微信小程序自定义组件Component总结

一时失言乱红尘 2022-05-22 07:36 702阅读 0赞

没有看过微信小程序自定义组件(以下称Component)的同学可以到[官网][Link 1]上了解一下。

以下是对Component的总结：

一、Component概念

Component像[页面][Link 2]一样由wxml、wxss、js和json4个文件组成，且需要把这4个文件放在同一个目录中。与页面不一样的是，Component中的构造函数（也可以称构造器）是Component(\{\})，而页面中的构造函数是Page(\{\})。

二、slot

Component的slot（slot意思是插槽），主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。大家可以在[https://github.com/zhu12345618/slotDemo][https_github.com_zhu12345618_slotDemo]查看实例。

还有一个实例是是Component接受外部样式的，官网中有例子。

三、Component构造器

在Component构造器中需要注意的几个属性是：properties、data、methods。

其他的：如果是属性的话，感觉用到的不多，所以就不说了；如果是函数，则都是Component的生命周期函数，官网上即可了解得很清楚。

1. properties：对外属性，即如果外部的wxml文件传入数据时，会把数据设置成properties的属性。

如官网例子的index.wxml：

<my-component my-property="example" />

这个"my-property"即对应custom-component.js里properties属性的myProperty，修改my-property就是修改myProperty。

custom-component.js如下：

Component({
    
      behaviors: [],
    
      properties: {
        myProperty: { // 属性名
          type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
          value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
          observer: function (newVal, oldVal) { } // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        },
        myProperty2: String // 简化的定义方式
      },
      data: {
        A: [{
          B: 'init data.A[0].B'
        }]
      }, // 私有数据，可用于模版渲染
    
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      attached: function () { },
      moved: function () { },
      detached: function () { },
    
      methods: {
        onMyButtonTap: function () {
          this.setData({
            // 更新属性和数据的方法与更新页面数据的方法类似
            myProperty: 'Test'
          })
        },
        _myPrivateMethod: function () {
          // 内部方法建议以下划线开头
          this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'
          this.applyDataUpdates()
        },
        _propertyChange: function (newVal, oldVal) {
    
        }
      }
    
    })

但是！小程序有一个问题：是如果properties中的属性是带有数字的，如：myProperty2，这样wxml里对应的就是my-property2，但是这样程序会报错，希望小程序以后可能修复这个问题。

2. data：这里的data和页面中的data是一致的，但是这里的data只在组件内部使用。

Tips：properties和data里的属性不能一样，否则会有冲突。

3. methods：组件中的方法都是在这个对象里定义。

四、组件与外部通信事件

上面的"myProperty"是父节点设置数据到组件里，组件传数据到父节点是用事件的方式。

注册事件，index.wxml和index.js：

<view>
      <my-component id="test" bindmyevent="myEventListener">
         <view>这里是插入到组件slot中的内容</view> 
      </my-component>
    
      
      
    </view>

监听事件：

Page({
      data: {
    
      },
      onLoad : function() {
          console.log(this.selectComponent("#test"));
      },
      myEventListener: function(e) {
        console.log("Event in index")
      }
    })

发射事件component-tag-name.wxml和component-tag-name.js：

<view class="wrapper">
      <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
    </view>

// components/component-tag-name.js
    Component({
      properties: {},
      methods: {
        onTap: function () {
          var myEventDetail = {} // detail对象，提供给事件监听函数
          var myEventOption = {} // 触发事件的选项
          this.triggerEvent('myevent', myEventDetail, myEventOption)
        }
      }
    })

源代码官网里有，也可以在[https://github.com/zhu12345618/componentEventTest][https_github.com_zhu12345618_componentEventTest]下载。

五、组件通信的最后大招

如果以上通信还不能满足需求，可以用this.selectComponent("\#test")，这个方法需要传一个id号。

注意上面的index.wxml中有一个代码是id="test"，这样定义之后，就可以在js文件中用this.selectComponent("\#test")获取到这个组件了。

最后，Component还有behaviors、组件关系、抽象节点等特性，但是对于一般的需求来说，不经常用到，所以就不作总结了。如果需要了解的话，可以去官网学习。

以上是本人的一点小总结，如有不足之处，还请各位指正！

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/framework.html#%E7%A8%8B%E5%BA%8F%E4%B8%8E%E9%A1%B5%E9%9D%A2
[https_github.com_zhu12345618_slotDemo]: https://github.com/zhu12345618/slotDemo
[https_github.com_zhu12345618_componentEventTest]: https://github.com/zhu12345618/componentEventTest