Component 构造器可用于定义组件,调用 Component 构造器时可以指定组件的属性、数据、方法等。
详细的参数含义和使用请参考 Component 参考文档。
Component({
behaviors: [],
properties: {
myProperty: { // 属性名
type: String,
value: ""
},
myProperty2: String // 简化的定义方式
},
data: {}, // 私有数据,可用于模板渲染
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
},
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function() { },
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function(){
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function(){
// 这里将 data.A[0].B 设为 "myPrivateData"
this.setData({
"A[0].B": "myPrivateData"
})
},
_propertyChange: function(newVal, oldVal) {
}
}
})
事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用 Component 构造器构造,拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。
此时,组件的属性可以用于接收页面的参数,如访问页面 /pages/index/index?paramA=123¶mB=xyz ,如果声明有属性 paramA 或 paramB ,则它们会被赋值为 123 或 xyz 。
页面的生命周期方法(即 on 开头的方法),应写在 methods 定义段中。
代码示例:
{
"usingComponents": {}
}
Component({
properties: {
paramA: Number,
paramB: String,
},
methods: {
onLoad: function() {
this.data.paramA // 页面参数 paramA 的值
this.data.paramB // 页面参数 paramB 的值
}
}
})
使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。
例如,在所有页面被创建和销毁时都要执行同一段代码,就可以把这段代码提取到 behaviors 中。
代码示例:
// page-common-behavior.js
module.exports = Behavior({
attached: function() {
// 页面创建时执行
console.info("Page loaded!")
},
detached: function() {
// 页面销毁时执行
console.info("Page unloaded!")
}
})
// 页面 A
var pageCommonBehavior = require("./page-common-behavior")
Component({
behaviors: [pageCommonBehavior],
data: { },
methods: { },
})
// 页面 B
var pageCommonBehavior = require("./page-common-behavior")
Component({
behaviors: [pageCommonBehavior],
data: { },
methods: { },
})
绘图接口和方法渐变渐变能用于填充一个矩形,圆,线,文字等。填充色可以不固定位固定的一种颜色。我们提供了两种颜色渐变的方式...
绘图接口和方法canvasContext.setShadow定义设置阴影样式。Tip: 如果没有设置,offsetX 默认值为0, offsetY 默认值为0, blur ...
Object wx.getAccountInfoSync()基础库 2.2.2 开始支持,低版本需做兼容处理。获取当前帐号信息。线上小程序版本号仅支持在正式...