小程序开发知识必备-自定义组件


1.认识自定义组件的属性、数据、方法和生命周期。

1>自定义组件的属性、数据、方法

  • 【properties】:自定义组件的对外属性,是属性名到属性设置的映射表,属性设置中可包含三个字段, type 表示属性类型(可以是 String,Boolean,Array)、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。
  • 【data】: 组件的内部数据,和 properties 一同用于组件的模版渲染。
  • 【methods】: 组件的方法,包括事件响应函数和任意的自定义方法
Component({
  //1.组件的需要渲染的数据
  properties: {
    //属性值可以在组件使用时指定
    isShow: {
      type: Boolean,
      value: false,
    },
  },
  // 这里是一些组件内部数据
  data: {
    isValue: false,
  },
  methods: {
    //页面方法
    preventTouchMove() {},
    closeModel() {
      this.setData({
        isShow: false,
      });
      //获取组件内data的数据
      console.log(this.data.isValue);
      //获取渲染的properties的数据
      console.log(this.properties.isValue);
    },
  },
});
  • methods 中获取数据,
  • 一种是获取 data 里的数据: this.data.属性名;
  • 一种是获取 properties 中的属性值: this.properties.属性名。

2>自定义组件的生命周期

  • created:在组件实例进入页面节点树时执行,注意此时不能调用 setData
  • attached:在组件实例进入页面节点树时执行, this.data 已被初始化为组件的当前值,绝大多数初始化工作可以在这个时机进行。
  • ready:在组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery
  • moved:在组件实例被移动到节点树另一个位置时执行。
  • detached:在组件实例被从页面节点树移除时执行。
Component({
  created: function () {
    // 组件生命周期函数,在组件实例进入页面节点树时执行,
    //注意此时不能调用setData
    console.log("Component-1 >> created");
  },
  attached: function () {
    // 组件生命周期函数,在组件实例进入页面节点树时执行。
    console.log("Component-1 >> attached");
  },
  ready: function () {
    // 在组件布局完成后执行,此时可以获取节点信息
    // (组件生命周期函数-在组件布局完成后执行)
    console.log("Component-1 >> ready");
  },
  moved: function () {
    // 在组件实例被移动到节点树另一个位置时执行
    console.log("Component-1 >> moved");
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
    console.log("Component-1 >> detached");
  },
  lifetimes: {
    // 组件生命周期声明对象,将组件的生命周期收归到该字段进行声明///,
    //原有声明方式仍旧有效,如同时存在两种声明方式
    // ,则lifetimes字段内声明方式优先级最高
    created: function () {
      console.log("Component-1 lifetimes >> created");
    },
    attached: function () {
      console.log("Component-1 lifetimes >> attached");
    },
    ready: function () {
      console.log("Component-1 lifetimes >> ready");
    },
    moved: function () {
      console.log("Component-1 lifetimes >> moved");
    },
    detached: function () {
      console.log("Component-1 lifetimes >> detached");
    },
  },
  pageLifetimes: {
    // 组件所在页面的生命周期声明对象,
    //目前仅支持页面的show和hide两个生命周期
    show: function () {
      console.log("Component-1 pageLifetimes >> Show");
    },
    hide: function () {
      console.log("Component-1 pageLifetimes >> Hide");
    },
  },
});

2.小程序页面生命周期函数

1>小程序生命周期 App.js

App({

  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {

    var userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.globalData.userInfo = userInfo;
    }

  },
onShow(): function() {
  console.log('onShow监听小程序显示');
},

onHide(): function() {
  console.log('onLaunch监听小程序隐藏');
},

###

2> 小程序生命周期 xxx.js(非 App.js)

Page({
  data: {},
  onLoad: function (options) {
    // 生命周期函数--监听页面加载
    console.log("onLoad");
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
    console.log("onReady");
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
    console.log("onShow");
  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏
    console.log("onHide");
  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载
    console.log("onUnload");
  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
    console.log("onPullDownRefresh");
  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
    console.log("onReachBottom");
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
});

3>生命周期图示

)


  1. 小程序注册完成后,加载页面,触发 onLoad 方法,一个页面只会调用一次(刚加载时调用一次);
  2. 页面载入后触发 onShow 方法,显示页面,每次打开页面都会调用一次 (只要展示这个页面,就会自动加载);
  3. 首次显示页面,会触发 onReady 方法,渲染页面和样式,一个页面只会调用一次(刚加载时调用一次);
  4. 当小程序后台运行或跳转(wx.navigateTo)到其他页面时,触发 onHide 方法;
  5. 当小程序从后台进入前台运行或重新载入页面时,触发 onShow 方法;
  6. 当小程序使用 wx.readirectTo()、关闭当前页和返回上一页 wx.navigateBack(),会触发 onUnload

**

1.小程序

  • 页面加载顺序是先加载 onLoad,再是 onShow,最后 onReady

2.原生 JS

  • document.ready 表示文档结构加载完成(不包含图片等非文字媒体文件);ready 如果定义多个,都会按渲染顺序执行。
  • window.onload 包含图片等在内的所有元素都加载完成。但是,onload 不管定义多少个,只执行一个(最后一个)
  • 加载顺序是先加载 ready,后 onload,正好和小程序相反

3.Jquery

(document).ready(function())
简写为
(function(){});

3.小程序组件的使用

父组件:

index.json

{ "usingComponents": { "v-select": "/component/select/select" } }

注意事项:
v-select 是你定义的组件的名称,后面的是组件所在的位置。 / 单斜杠表示根目录,是绝对路径。
如果控制台报错,出现没找到路径的情况,一定是自己填写的路径不对,认真检查路径代码。

index.wxml

  <v-select select-array='{{selectArray}}'  bind:getNowData='getCurrentTextAction'  current-text="{{current_text}}"></v-elect>
  • 1.select-array 是我在组件中自定义的属性名,这个是和组件所在的 js 中 properties 中的属性是对应的。在 properties 定义的属性中,属性名采用驼峰写法例如:selectArray。在引入组件的 wxml 中,指定属性值时则对应使用连字符写法例如:select-array=',selectArray为select组件中所需展示的数据源
  • 2.这里 getNowData 是自定义的子组件需要触发的事件名,getNowData 是引入组件的页面需要获取传过来的数据的自定义的事件名。

index.js


getCurrentTextAction(e){
    let item = e.detail;
    this.setData({
      current_text: item.name,
      current_type: item.type
    });
  }

子组件:

在 component 文件目录下,创建一个 select 文件夹,随后 select 文件夹下手动创建:select.js、select.json、select.wxml、select.wxss 四个文件。

select.json

{
  "component": true
}

select.wxml

<view class="section-select-box">
  <view class="select-content" bindtap="selectToggleAction">
    <view class="select-text">{{currentText}}</view>
    <image
      class="select-img"
      src="../../images/icon_arrow_down.png"
      animation="{{arrowAnimation}}"
    ></image>
  </view>

  <view class="select-list" wx:if="{{isShow}}">
    <view
      class="select-list-item"
      wx:for="{{selectArray}}"
      data-index="{{index}}"
      wx:key="{{index}}"
      bindtap="selectItemAction"
      >{{item.name}}</view
    >
  </view>
</view>

select.js

Component({
  /**
 1. 组件的需要渲染的数据
   */
  properties: {
    selectArray: {
      type: Array,
    },
    // 初始时要展示的内容
    currentText: {
      type: String,
    },
  },

  /**
 2. 是组件的内部数据
   */
  data: {
    isShow: false, // 初始option不显示
  },

  /**
 3. 组件的方法列表
   */
  methods: {
    //option的显示与否
    selectToggleAction: function () {
      // 获取当前option显示的状态
      var nowShow = this.data.isShow;

      if (nowShow) {
      } else {
      }
      this.setData({
        isShow: !nowShow,
      });
    },
    //设置内容
    selectItemAction: function (e) {
      // 当前option的数据是引入组件的页面传过来的,所以这里获取数据只有通过this.properties
      var nowData = this.properties.selectArray;
      var index = e.target.dataset.index; // 当前点击的索引
      var current_text = nowData[index].name; // 当前点击的内容
      var current_type = nowData[index].type; // 当前点击的内容

      this.setData({
        isShow: false,
        current_text: current_text,
      });
      // 内容更新后,需要把更新的数据传输出去
      var nowDate = {
        id: index,
        name: current_text,
        type: current_type,
      };
      // 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
      this.triggerEvent("getNowData", nowDate);
    },
  },
});

传参

//父组件传值
<v-select select-array='{{selectArray}}' current-text="{{current_text}}"></v-elect>

//子组件接收使用properties接收
 properties: {
    selectArray: {
      type: Array,
    }
  }

传事件

//子组件给父组件传递值(通过方法传值)
// 这里的 getNowData 要和外部的 bind:getNowData ,名称一定要对应
this.triggerEvent("getNowData", nowDate);

//父组件
<v-select bind:getNowData="getCurrentTextAction"></v-elect>;

文章参考:
https://www.cnblogs.com/xiao-apple36/p/12867092.html
https://www.jianshu.com/p/1b83e00738a9
https://blog.csdn.net/qq_35872379/article/details/87935688


文章作者:   leader755
版权声明:   本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 leader755 !
评论 (留下邮箱后可以快速收到回复)
 上一篇
谈谈你不知道的gist 谈谈你不知道的gist
1.Gist 是什么关于 Gist 的详细介绍,请阅读官方文档About gists,下面只简略介绍部分功能: Gist 是一种与其他人共享代码片段和粘贴的简单方法。 当您需要与同事或朋友共享示例代码或技术时,可以使用它。 GitHub
2021-01-04
下一篇 
SSH配置 SSH配置
一.配置单个 ssh单个 ssh key 是指一台 git 服务器只有一个 git 账号。也就是说,如果你不仅在 github 有账号,在 coding 也有账号,甚至团队内部自己搭建了私有的 git 服务器等,这些服务器都可以公用同一个
2020-12-21
  目录