微信小程序 Component 构造器

时间：2024-03-03 08:10:24

目录

参数

properties 定义

Component 构建组件

使用 Component 构造器构造页面

Component 构造器可用于定义组件，调用 Component 构造器时可以指定组件的属性、数据、方法等。

参数

定义段 类型 是否必填 描述 最低版本
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

生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。 

properties 定义

定义段 类型 是否必填 描述 最低版本
type 是 属性的类型
optionalTypes Array 否 属性的类型（可以指定多个） 2.6.5
value 否 属性的初始值
observer Function 否 属性值变化时的回调函数

属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。

请注意： 定义段中的 type 字段为 必填 项，虽然 2.17.2 及以上的基础库增加了对未填写的兼容（未填写时兼容为填写 null），但更低版本的基础库无法处理未填写的情况，最坏可能会使页面无法正常渲染，请注意兼容。

Component({
  properties: {
    min: {
      type: Number,
      value: 0
    },
    max: {
      type: Number,
      value: 0,
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
    lastLeaf: {
      // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      type: Number,
      optionalTypes: [String, Object],
      value: 0
    }
  }
})

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。

多数情况下，属性最好指定一个确切的类型。这样，在 WXML 中以字面量指定属性值时，值可以获得一个确切的类型，如：

<custom-comp min="1" max="5" />

此时，由于自定义组件的对应属性被规定为 Number 类型， min 和 max 会被赋值为 1 和 5 ，而非 "1" 和 "5" ，即：

this.data.min === 1 // true
this.data.max === 5 // true

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: { /* ... */ },
})

相关文章