微信小程序-自定义组件

目录结构

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成

创建

xx.json

{
  "component": true
}

xx.js

使用Component注册组件，提供组件的属性定义 内部数据 自定义方法

属性和内部数据用于物件的 xx.wxml 的渲染，属性值可以由组件外部传入（使用这个组件的，就是外部）。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

注意事项：

命名

• 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。

引用其他自定义组件

• 自定义组件也是可以引用自定义组件的，引用方法类似于页面引用自定义组件的方式（使用 usingComponents 字段）。

前缀不能为 wx-

• 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

页面的 this 对象的原型

• 使用 usingComponents 页面的原型与不使用时不一致，即 Object.getPrototypeOf(this) 结果不同。
• 使用 usingComponents 时会多一些方法，如 selectComponent 。
• 出于性能考虑，使用 usingComponents 时， setData 内容不会被直接深复制，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深复制会在这个值被组件间传递时发生。）

如果页面比较复杂，新增或删除 usingComponents 定义段时建议重新测试一下。

使用

使用组件需要在当前页面的json中引用

声明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}