你我学习网
1 2 3 4 5 6 7 | // 页面 Bvar pageCommonBehavior = require('./page-common-behavior')Component({ behaviors: [pageCommonBehavior], data: { /* ... */ }, methods: { /* ... */ },}) |
小程序Component 构造器
Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。
详细的参数含义和使用请参考 Component 参考文档。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 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 构造器构造页面
事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 Component 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 usingComponents 定义段。
此时，组件的属性可以用于接收页面的参数，如访问页面 /pages/index/index?paramA=123¶mB=xyz ，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。
页面的生命周期方法（即 on 开头的方法），应写在 methods 定义段中。
代码示例：
1 2 3 | { "usingComponents": {}} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | Component({ properties: { paramA: Number, paramB: String, }, methods: { onLoad: function() { this.data.paramA // 页面参数 paramA 的值 this.data.paramB // 页面参数 paramB 的值 } }}) |
使用 Component 构造器来构造页面的一个好处是可以使用 behaviors 来提取所有页面中公用的代码段。
例如，在所有页面被创建和销毁时都要执行同一段代码，就可以把这段代码提取到 behaviors 中。
代码示例：
1 2 3 4 5 6 7 8 9 10 11 | // page-common-behavior.jsmodule.exports = Behavior({ attached: function() { // 页面创建时执行 console.info('Page loaded!') }, detached: function() { // 页面销毁时执行 console.info('Page unloaded!') }}) |
1 2 3 4 5 6 7 | // 页面 Avar pageCommonBehavior = require('./page-common-behavior')Component({ behaviors: [pageCommonBehavior], data: { /* ... */ }, methods: { /* ... */ },}) |
标签:
小程序Component 构造器
