小程序之组件开发

1.创建自定义组件

a.创建list-box组件


组件.jpg

b.在自定义组件的list-box.json 文件中设置 "component":true


json.jpg

c.在自定义组件的list-box.wxml 文件中编写组件代码


wxml.jpg

d.在自定义组件的list-box.js 文件中,需要使用 Component() 来注册组件,并提供组件的属性定义、内部数据和自定义方法。


js.jpg

2.使用自定义组件

a.在使用自定义组件的json文件中进行引用声明


json.jpg

b.在使用自定义组件的js文件中定义节点属性值


js.jpg

c.在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。


wxml.jpg

3.效果

1.jpg

4.细节注意事项

一些需要注意的细节:

因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。
自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。
自定义组件和页面所在项目根目录名不能以“wx-”为前缀,否则会报错。
注意,是否在页面文件中使用 usingComponents 会使得页面的 this 对象的原型稍有差异,包括:

使用 usingComponents 页面的原型与不使用时不一致,即 Object.getPrototypeOf(this) 结果不同。
使用 usingComponents 时会多一些方法,如 selectComponent 。
出于性能考虑,使用 usingComponents 时, setData 内容不会被直接深复制,即 this.setData({ field: obj }) 后 this.data.field === obj 。(深复制会在这个值被组件间传递时发生。)
如果页面比较复杂,新增或删除 usingComponents 定义段时建议重新测试一下。

参考:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。