没有看过微信小程序自定义组件(如下称Component)的同窗能够到官网上了解一下。javascript
如下是对Component的总结:html
1、Component概念java
Component像页面同样由wxml、wxss、js和json4个文件组成,且须要把这4个文件放在同一个目录中。与页面不同的是,Component中的构造函数(也能够称构造器)是Component({}),而页面中的构造函数是Page({})。git
2、slotgithub
Component的slot(slot意思是插槽),主要是让你在外部的wxml能够自由的在你的Component的wxml里插入模块。你们能够在https://github.com/zhu12345618/slotDemo查看实例。json
还有一个实例是是Component接受外部样式的,官网中有例子。小程序
3、Component构造器微信小程序
在Component构造器中须要注意的几个属性是:properties、data、methods。微信
其余的:若是是属性的话,感受用到的很少,因此就不说了;若是是函数,则都是Component的生命周期函数,官网上便可了解得很清楚。app
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:组件中的方法都是在这个对象里定义。
4、组件与外部通讯事件
上面的"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下载。
5、组件通讯的最后大招
若是以上通讯还不能知足需求,能够用this.selectComponent("#test"),这个方法须要传一个id号。
注意上面的index.wxml中有一个代码是id="test",这样定义以后,就能够在js文件中用this.selectComponent("#test")获取到这个组件了。
最后,Component还有behaviors、组件关系、抽象节点等特性,可是对于通常的需求来讲,不常常用到,因此就不做总结了。若是须要了解的话,能够去官网学习。
以上是本人的一点小总结,若有不足之处,还请各位指正!