微信号:zxcx0101

介绍:知晓程序,是爱范儿旗下专注「小程序生态」的品牌,提供小程序资讯、教程、活动、社区等服务. 更多内容请访问 minapp.com.

开发 | 小程序自定义组件怎么用?看完这篇文章你就知道了

2018-01-12 12:27 让你更懂微信的
作者:陈威
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。
好在微信小程序的库从 1.6.3 开始,官方对于自定义组件这一块有了比较大的变动,最直观的感觉就是文档比以前全多了。
还有就是, 现在小程序支持简洁的组件化编程,可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中复用,提高自己代码的可读性,降低自己维护代码的成本。
本篇文章就是手把手教你实现小程序中自定义组件,坐稳啦~
要做自定义组件,我们先定一个小目标,比如说我们在小程序中实现一下 WeUI 中的弹窗组件,基本效果图如下。
首先,我们需要创建一个空白项目,并在 components 组件中新建一个 Dialog 文件夹来存放我们的弹窗组件。
Dialog 下, 右击新建 Component 元素,并命名为 dialog 后,会生成对应的 JSON、WXML、WXSS 和 JS 4 个文件,也就是一个自定义组件的组成部分,此时你的项目结构应该如下图所示:
组件初始化工作准备完成,接下来就是组件的相关配置, 首先我们需要声明自定义组件,也就是将 dialog.jsoncomponent 字段设为 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
关注「知晓程序」公众号,在微信后台回复「开发」,让你的小程序性能再上一层楼。

▽ 点击「阅读原文」,发现更多优质小程序

 
知晓程序 更多文章 王者荣耀看了也要哭!微信里居然也能玩「多人对战」游戏了 春运买票难?12306 推出官方小程序,简洁好看秒杀 App | 国家队&n 行业重磅!知晓程序《2018 年小程序趋势报告》发布 独家发布!2017 年度 TOP 100 小程序榜单 这 10 种最酷玩法,创造了 2017 年所有爆款小程序
猜您喜欢 MVC学习系列5--Layout布局页和RenderSection的使用 【简单明了】如何编写自己的推荐系统? 美团云出席HCC华为云计算大会 携手打造100亿美元IT产业 职场新人是如何看待互联网测试的? 为什么很多优秀的软件公司和开发者愿意开源和共享?