微信小程序自定义组件实践分享

前言

很久很久没有更新文章主要是因为忙于学业与找工作，当然不负众望在今年下半年入职了，好了废话不多说，以下是在工作当中使用多次自定义组件分享。

介绍

在微信小程序中，自定义组件的介绍是

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

使用组件化开发是为了将重复性的代码进行合理化的规划，通过自定义组件更好的进行编码为自己也为后续维护优化提供便利

实践

在自定义组件中，组件页面与普通页面相比其中的生命周期是不一样的，所以有的方法在组件页面中是无法使用的，当遇到需要通过页面组件的某些生命周期方法是该怎么样去执行这类方法，以下是通过组件页面中的properties属性中的observer监听方法去执行页面传递特定值去进行相关调用方法

封装组件：

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    reachBottomActive: {
      // 是否下拉刷新，默认不执行，父组件传回1，子组件请求回数据返回并将reachBottomNum值改为0传回父组件
      type: String,
      observer: function (mydata) {
        switch(mydata){
          case "1":
            this.onReachBottom()
            return;
        }
      }
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    list: [],
    ....
  },


  /**
   * 组件的方法列表
   */
  methods: {
    onReachBottom() {
      var that = this
      var offset = that.data.list.length;
      if (offset == that.data.total) {
        that.setData({
          loading: false,
          pullUpOn: false
        })
        that.triggerEvent("searchObj", {
          list: this.data.list,
          pullUpOn: this.data.pullUpOn,
          loading: this.data.loading,
          reachBottomNum:0,
        })
        return false;
      }
      // 根据父组件传回的值判断是否已经上拉
      app.$http.ninepost(this.properties.networkApi, {
        offset: offset,
        searchkey: this.data.searchkey,
        isagent:this.properties.isagent,
        isrefuse:this.properties.isrefuse
      }).then(res => {
        var backdata = res.data;
        console.log(backdata);
        that.setData({
          loading: true,
          pullUpOn: true
        })
        if (res.code == 200) {
          console.log(backdata);
          that.setData({
            list: that.data.list.concat(backdata.list)
          })
          that.triggerEvent("searchObj", {
            list: that.data.list,
            pullUpOn: true,
            loading: true,
            reachBottomNum:0,
          })
        } else {
          app.showtips('温馨提示',backdata.msg);
        }
      })
    }
  }
})

父组件：

    <view_searchbar 
    networkApi="/mini/jobBm" 
    searchTxt="姓名、手机查找" 
    reachBottomActive="{{searchkeyActive}}" 
    bind:searchObj="searchObjOn"
    backgroundColor="#4849a1"
    ></view_searchbar>

父组件js

const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    searchkeyActive:0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.setData({
      searchkeyActive:1,
    })
  },
  searchObjOn(e){
    this.setData({
      searchkeyActive:e.detail.reachBottomNum
    })
  }
})

是否上拉刷新，默认不执行，父组件传回1，子组件请求回数据返回并将reachBottomNum值改为0传回父组件以此达到重复调用执行

思路就是根据reachBottomNum值去进行判断，在封装组件中监听这个值是否变化，且结果为0的话就调用执行上拉函数方法即可

以此思路去进行其他方法的使用也是基本可以实现，当然实现封装组件内去执行页面组件的一些特定生命周期方法有很多种，以上是个人觉得一种比较容易且理解的方法

如果各位开发者有更好的思路以及优化建议，欢迎讨论