从小程序基础库版本 1.6.3 开始,小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。
一些需要注意的细节:
- 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
- 自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用
usingComponents
字段)。 - 自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
注意,是否在页面文件中使用 usingComponents
会使得页面的 this
对象的原型稍有差异,包括:
- 使用
usingComponents
页面的原型与不使用时不一致,即Object.getPrototypeOf(this)
结果不同。 - 使用
usingComponents
时会多一些方法,如selectComponent
。 - 出于性能考虑,使用
usingComponents
时,setData
内容不会被直接深复制,即this.setData({ field: obj })
后this.data.field === obj
。(深复制会在这个值被组件间传递时发生。)
如果页面比较复杂,新增或删除 usingComponents
定义段时建议重新测试一下。