组件定义javascript
Component({ // behavior1.js // module.exports = Behavior({ // behaviors: [require('behavior2.js')], // definitionFilter(defFields, definitionFilterArr) {},//定义段过滤器,用于自定义组件扩展。 // }) //相似于mixins和traits的组件间代码复用机制 behaviors: [require('behavior1.js')], //组件的对外属性,是属性名到属性设置的映射表 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' }] }, // 私有数据,可用于模版渲染 relations: {}, //组件间关系定义 externalClass: [], //组件接受的外部样式类 //一些选项 options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, lifetimes: { // 生命周期函数,能够为函数,或一个在methods段中定义的方法名 created: function () {}, //在组件实例刚刚被建立时执行,注意此时不能调用 setData attached: function () {}, //在组件实例进入页面节点树时执行 ready: function () {}, //在组件布局完成后执行 moved: function () {}, //在组件实例被移动到节点树另外一个位置时执行 detached: function () {}, //在组件实例被从页面节点树移除时执行 error: function () { // 页面被展现 }, show: function () { // 页面被展现 }, hide: function () { // 页面被隐藏 }, resize: function (size) { // 页面尺寸变化 } }, pageLifetimes: { // 组件所在页面的生命周期函数 created: function () {}, //在组件实例刚刚被建立时执行,注意此时不能调用 setData attached: function () {}, //在组件实例进入页面节点树时执行 ready: function () {}, //在组件布局完成后执行 moved: function () {}, //在组件实例被移动到节点树另外一个位置时执行 detached: function () {}, //在组件实例被从页面节点树移除时执行 error: function () { // 页面被展现 }, show: function () { // 页面被展现 }, hide: function () { // 页面被隐藏 }, resize: function (size) { // 页面尺寸变化 } }, //组件的方法,包括(事件响应函数)和(任意的自定义方法) 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) {} } })
<!-- 组件 custom-component.wxml --> <custom-component> <view>{{myProperty}}</view> <button bindtap='onMyButtonTap'>Button</button> <view>{{A[0].B}}</view> <button bindtap='_myPrivateMethod'>_myPrivateMethod</button> </custom-component>
{ "component": true, "usingComponents": {} }
页面使用组件java
{ "usingComponents": { "my-component": "/components/custom-component" } }
<!-- 页面的 WXML --> <my-component my-property="example" />