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

  • Post author:
  • Post category:小程序


没有看过微信小程序自定义组件(以下称Component)的同学可以到

官网

上了解一下。

以下是对Component的总结:


一、Component概念

Component像

页面

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


二、slot

Component的slot(slot意思是插槽),主要是让你在外部的wxml可以自由的在你的Component的wxml里插入模块。大家可以在

https://github.com/zhu12345618/slotDemo

查看实例。

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


三、Component构造器

在Component构造器中需要注意的几个属性是:

properties、data、methods

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

1.

properties

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

如官网例子的index.wxml:

<!-- 页面的 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>

  <!-- 或者可以写成 -->
  <!--
    <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

下载。



五、组件通信的最后大招


如果以上通信还不能满足需求,可以用


this.selectComponent(“#test”)


,这个方法需要传一个id号。


注意上面的index.wxml中有一个代码是id=”test”,这样定义之后,就可以在js文件中




this.selectComponent(“#test”)

获取到这个组件了。




最后,Component还有


behaviors





组件关系





抽象节点


等特性,但是对于一般的需求来说,不经常用到,所以就不作总结了。如果需要了解的话,可以去官网学习。



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



版权声明:本文为u013654125原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。