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

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}}，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