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

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

作者:陈威

之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时,官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦。

好在微信小程序的库从 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

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更懂微信的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-01-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 开发 | 减少一半工作量!有了这个「轮子」,小程序 UI 搭建超简单

    前段时间,微信低调地推出了小程序「自定义组件」能力。这个能力允许开发者,根据实际需要创建自定义组件,并在小程序中使用。

    知晓君
  • 开发 | 小程序不够「高级」?那是因为你没用上这 3 个特效!

    最近在负责一个微信小程序的前端以及前后端接口的对接的项目,整体上所有页面的布局我都已经搭建完成。

    知晓君
  • 「大众点评点餐」小程序开发经验 02:视图

    知晓君
  • 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“...

    外婆的彭湖湾
  • VirtualBox安装MacOS系统以及git,npm,nodejs工具

    1.软件资源 VirtualBox下载地址:官网地址 MacOS10.11.4版本的ISO系统镜像文件地址:百度网盘BT种子 2.安装MacOS虚拟机系统 1、...

    用户1148881
  • 【可视化】一篇文章深入浅出解读大数据分析

    新媒体管家 ? ? ? ? ? ? ? ? ? ? ? ?

    钱塘数据
  • 手游热更新方案xLua开源:Unity3D下Lua编程解决方案

    导语 xLua是Unity3D下Lua编程解决方案,自2016年初推广以来,已经应用于十多款腾讯自研游戏,凭借其出色的性能,易用性,扩展性而广受好评。 而就在前...

    腾讯Bugly
  • 解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题

    关于解决CKEditor 4 富文本编辑器在图片组件无法显示[上传]选项卡的相关问题。

    Eller
  • 【安排】23行代码爬取知乎全部回答(内附源码和应用程序)

    上个月行哥为了给大家推荐书单,1分钟爬取了知乎5646个回答,并统计出前十名推荐量最高的书单给大家分享,并且为了大家使用方便将该篇推文中的代码转成应用程序给大...

    行哥玩Python
  • 手游热更新方案xLua开源:Unity3D下Lua编程解决方案

    xLua是Unity3D下Lua编程解决方案,自2016年初推广以来,已经应用于十多款腾讯自研游戏,凭借其出色的性能,易用性,扩展性而广受好评。现在xLua开源...

    腾讯开源

扫码关注云+社区

领取腾讯云代金券