在腾讯云小程序平台开发中,开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用。同时,也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护和复用。
创建自定义组件
一个自定义组件由 json、wxml、wxss、js 四个文件组成。要编写一个自定义组件,首先需要在 json 文件中进行自定义组件声明,将 component 字段设为 true,以便让开发者知道这一组文件是一个自定义组件。
{"component": true}
代码示例:
<!-- 这是自定义组件的内部WXML结构 --><view class="inner">{{innerText}}</view><slot></slot>
/* 这里的样式只应用于这个自定义组件 */.inner {color: red;}
说明:
在组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。
在自定义组件的
js
文件中,需要使用Component()
来注册组件,并提供组件的属性定义、内部数据和自定义方法。代码示例:
Component({properties: {// 这里定义了innerText属性,属性值可以在组件使用时指定innerText: {type: String,value: 'default value',}},data: {// 这里是一些组件内部数据someData: {}},methods: {// 这里是一个自定义方法customMethod() {}}})
使用自定义组件
使用已注册的自定义组件前,首先要在页面的
json
文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:{"usingComponents": {"component-tag-name": "path/to/the/custom/component"}}
这样,在页面的
wxml
中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。说明:
在
app.json
中声明usingComponents
字段,在此处声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。<view><!-- 以下是对一个自定义组件的引用 --><component-tag-name inner-text="Some text"></component-tag-name></view>
自定义组件的
wxml
节点结构在与数据结合之后,将被插入到引用位置内。细节注意事项
需要注意的细节:
自定义组件的标签名和 WXML 节点标签名仅支持小写字母、中划线和下划线的组合。
自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用
usingComponents
字段)。自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
是否在页面文件中使用
usingComponents
会使得页面的this
对象的原型稍有差异,包括:使用
usingComponents
页面的原型与不使用时不一致,即Object.getPrototypeOf(this)
结果不同。使用
usingComponents
时会多一些方法,如selectComponent
。出于性能考虑,使用 usingComponents 时, setData 内容不会被直接深复制,即
this.setData({ field: obj })
后this.data.field === obj
。(深复制会在这个值被组件间传递时发生。)说明:
如果页面比较复杂,新增或删除
usingComponents
定义段时建议重新测试一下。