一、Component
1.组件的属性
定义段 |
类型 |
是否必填 |
描述 |
最低版本 |
properties |
Object Map |
否 |
组件的对外属性,是属性名到属性设置的映射表 |
|
data |
Object |
否 |
组件的内部数据,和 properties 一同用于组件的模板渲染 |
|
observers |
Object |
否 |
组件数据字段监听器,用于监听 properties 和 data 的变化,参见 数据监听器 |
2.6.1 |
methods |
Object |
否 |
组件的方法,包括事件响应函数和任意的自定义方法,关于事件响应函数的使用,参见 组件间通信与事件 |
|
behaviors |
String Array |
否 |
类似于mixins和traits的组件间代码复用机制,参见 behaviors |
|
created |
Function |
否 |
组件生命周期函数-在组件实例刚刚被创建时执行,注意此时不能调用 setData ) |
|
attached |
Function |
否 |
组件生命周期函数-在组件实例进入页面节点树时执行) |
|
ready |
Function |
否 |
组件生命周期函数-在组件布局完成后执行) |
|
moved |
Function |
否 |
组件生命周期函数-在组件实例被移动到节点树另一个位置时执行) |
|
detached |
Function |
否 |
组件生命周期函数-在组件实例被从页面节点树移除时执行) |
|
relations |
Object |
否 |
组件间关系定义,参见 组件间关系 |
|
externalClasses |
String Array |
否 |
组件接受的外部样式类,参见 外部样式类 |
|
options |
Object Map |
否 |
一些选项(文档中介绍相关特性时会涉及具体的选项设置,这里暂不列举) |
|
lifetimes |
Object |
否 |
组件生命周期声明对象,参见 组件生命周期 |
2.2.3 |
pageLifetimes |
Object |
否 |
组件所在页面的生命周期声明对象,参见 组件生命周期 |
2.2.3 |
definitionFilter |
Function |
否 |
定义段过滤器,用于自定义组件扩展,参见 自定义组件扩展 |
2.2.3 |
2.组件的通用属性和方法
属性名 |
类型 |
描述 |
is |
String |
组件的文件路径 |
id |
String |
节点id |
dataset |
String |
节点dataset |
data |
Object |
组件数据,包括内部数据和属性值 |
properties |
Object |
组件数据,包括内部数据和属性值(与 data 一致) |
router |
Object |
相对于当前自定义组件的 Router 对象 |
pageRouter |
Object |
相对于当前自定义组件所在页面的 Router 对象 |
方法名 |
参数 |
描述 |
最低版本 |
setData |
Object newData |
设置data并执行视图层渲染 |
|
hasBehavior |
Object behavior |
检查组件是否具有 behavior (检查时会递归检查被直接或间接引入的所有behavior) |
|
triggerEvent |
String name, Object detail, Object options |
触发事件,参见 组件间通信与事件 |
|
createSelectorQuery |
|
创建一个 SelectorQuery 对象,选择器选取范围为这个组件实例内 |
|
createIntersectionObserver |
|
创建一个 IntersectionObserver 对象,选择器选取范围为这个组件实例内 |
|
createMediaQueryObserver |
|
创建一个 MediaQueryObserver 对象 |
2.11.1 |
selectComponent |
String selector |
使用选择器选择组件实例节点,返回匹配到的第一个组件实例对象(会被 wx://component-export 影响) |
|
selectAllComponents |
String selector |
使用选择器选择组件实例节点,返回匹配到的全部组件实例对象组成的数组(会被 wx://component-export 影响) |
|
selectOwnerComponent |
|
选取当前组件节点所在的组件实例(即组件的引用者),返回它的组件实例对象(会被 wx://component-export 影响) |
2.8.2 |
getRelationNodes |
String relationKey |
获取这个关系所对应的所有关联节点,参见 组件间关系 |
|
groupSetData |
Function callback |
立刻执行 callback ,其中的多个 setData 之间不会触发界面绘制(只有某些特殊场景中需要,如用于在不同组件同时 setData 时进行界面绘制同步) 2.4.0 |
|
getTabBar |
|
返回当前页面的 custom-tab-bar 的组件实例,详见自定义 tabBar |
2.6.2 |
getPageId |
|
返回页面标识符(一个字符串),可以用来判断几个自定义组件实例是不是在同一个页面内 |
2.7.1 |
animate |
String selector, Array keyframes, Number duration, Function callback |
执行关键帧动画,详见动画 |
2.9.0 |
clearAnimation |
String selector, Object options, Function callback |
清除关键帧动画,详见动画 |
2.9.0 |
setUpdatePerformanceListener |
Object options, Function listener |
清除关键帧动画,详见动画 |
2.12.0 |
3.组件定义
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": {}
}
3.页面使用组件
{
"usingComponents": {
"my-component": "/components/custom-component"
}
}
<!-- 页面的 WXML -->
<my-component my-property="example" />