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

发布日期: 2020-12-22

更新日期: 2020-12-22

文章字数: 2k

阅读时长: 8 分

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>生命周期图示

)

小程序注册完成后，加载页面，触发 onLoad 方法，一个页面只会调用一次（刚加载时调用一次）；

页面载入后触发 onShow 方法，显示页面，每次打开页面都会调用一次（只要展示这个页面，就会自动加载）；

首次显示页面，会触发 onReady 方法，渲染页面和样式，一个页面只会调用一次（刚加载时调用一次）；

当小程序后台运行或跳转（wx.navigateTo）到其他页面时，触发 onHide 方法；

当小程序从后台进入前台运行或重新载入页面时，触发 onShow 方法；

当小程序使用 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>