组件定义
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": {} }
页面使用组件
{ "usingComponents": { "my-component": "/components/custom-component" } } <!--
页面的WXML --> <my-component my-property="example" />

技术
©2019-2020 Toolsou All rights reserved,
hive大量小文件处理方法总结苹果不送充填器耳机真为环保?可能还是为了赚钱吧 Unity3D Input按键系统灰色预测使用正交表法设计测试用例函数基本定义和使用‘未完待续face_recognition的5个应用实例VaR - 风险价值 - 蒙特卡罗法 - Python一个猜数字的小游戏,用JavaScript实现k8s入门到放弃--k8s重要概念