微信小程序 Component 构造器

àì夳堔傛蜴生んèń 2021-09-08 20:10 237阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

`Component` 构造器可用于定义组件，调用 `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 构造器构造页面**

事实上，小程序的页面也可以视为自定义组件。因而，页面也可以使用 `Component` 构造器构造，拥有与普通组件一样的定义段与实例方法。但此时要求对应 json 文件中包含 `usingComponents` 定义段。

此时，组件的属性可以用于接收页面的参数，如访问页面 `/pages/index/index?paramA=123&paramB=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: {  /* ... */ },
    })

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Component]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html