阅读(3255)
赞(11)
QQ小程序 使用 Component 构造器构造页面
2020-07-01 15:35:26 更新
事实上,小程序的页面也可以视为自定义组件。因而,页面也可以使用 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() {
this.data.paramA // 页面参数 paramA 的值
this.data.paramB // 页面参数 paramB 的值
}
}
})
Bug & Tips:
- 使用 this.data 可以获取内部数据和属性值,但不要直接修改它们,应使用 setData 修改。
- 生命周期函数无法在组件方法中通过 this 访问到。
- 属性名应避免以 data 开头,即不要命名成 dataXyz 这样的形式,因为在 QML 中, data-xyz="" 会被作为节点 dataset 来处理,而不是组件属性。
- 在一个组件的定义和使用时,组件的属性名和 data 字段相互间都不能冲突(尽管它们位于不同的定义段中)。
- 对象类型的属性和 data 字段中可以包含函数类型的子字段,即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。
- bug : 对于 type 为 Object 或 Array 的属性,如果通过该组件自身的 this.setData 来改变属性值的一个子字段,则依旧会触发属性 observer ,且 observer 接收到的 newVal 是变化的那个子字段的值, oldVal 为空, changedPath 包含子字段的字段名相关信息。
- bug : 位于 slot 中的自定义组件没有触发 pageLifetimes 中声明的页面生命周期