作者:陈威
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。
好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,最直观的感觉就是文档比以前全多了。
还有就是,现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本。
本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦~
要做自定义组件,我们先定一个小目标,比如说我们在小程序中实现一下 WeUI 中的弹窗组件,基本效果图如下。
首先,我们需要创建一个空白项目,并在 components
组件中新建一个 Dialog
文件夹来存放我们的弹窗组件。
在 Dialog
下,右击新建 Component 元素,并命名为 dialog
后,会生成对应的 JSON、WXML、WXSS 和 JS 4 个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示:
组件初始化工作准备完成,接下来就是组件的相关配置,首先我们需要声明自定义组件,也就是将 dialog.json
中 component
字段设为 true
:
其次,我们需要在 dialog.wxml
文件中编写弹窗组件模版。在 dialog.wxss
文件中加入弹窗组件样式,它们的写法与页面的写法类似,我就不赘述,直接贴代码啦~
dialog.wxml
文件如下:
组件的结构和样式都有了,还缺少什么呢?没错,还缺 JavaScript 代码。
眼睛比较犀利的同学,可能已经发现了我们在 dialog.wxml
文件中的会有一些形如 {{ isShow }}
、{{ title }}
这样的模版变量,还定义了 _cancelEvent
和 _confirmEvent
两个方法,它们的具体实现就是在 dialog.js
中。
dialog.js
是自定义组件的构造器,是使用小程序中 Component 构造器生成的。调用 Component 构造器时,可以用来指定自定义组件的属性、数据、方法等,具体的细节可以参考一下官方的文档。
下面,我通过代码注释,解释一下构造器中的一些属性的使用:
到现在,你应该完成了一个自定义弹窗组件的大部分代码,可是你保存后并没有发现任何变化。因为我们还需要在 index.wxml
文件中引入它。
首先需要在 index.json
中引入组件:
然后我们在 index.wxml
中引入它,并增加我们自定义的一些值,如下。
嗯哪,还差最后一步,index.js
配置,没错,这个也很简单,我就复制粘贴了。
到此,大功告成!让我们测试一下:
点击取消或者确定按钮的话,我们在事件中设置了弹窗会关闭,并会打印出相应的信息,具体点击完应该怎么做,就看你们自己发挥了,我只能帮你到这里了~
现在,你已经基本掌握了小程序中的自定义组件开发技巧,怎么样,是不是很棒,应该给自己点个赞,打个 call。
总体来说,小程序推出自定义组件后,感觉方便了很多,还没有 get 的小伙伴们,赶紧学习学习,以后多用组件化开发,就不会那么难受了,加油哦~
具体代码,我已经托管到 GitHub 上了,欢迎 issue~
原文地址: https://juejin.im/post/5a3110756fb9a0451b048b72