微信小程序自己设置组件 – 弹窗组件

小程序开发的小伙伴们应该都知道，尽管小程序已经给我们开发者提供了很多组件便于我们快速开发，但有时候，可能由于业务需求或者者个人对技术追求 …… ，种种起因，促使我们不得不自己定义我们需要或者者我们想要的组件。

自己设置组件除可以满足我们的业务需求外，还有很多好处，例如可以让我们将复杂的页面拆分成多个低耦合的板块，也可重复使用该组件，提高代码的可重用性，提高开发效率，也可以有助于代码维护，等等。一时半会说不完，咋们直接进入正题吧。

本篇文章记录了我自己在开发中，一步步自己设置组件的过程和少量总结，希望对各位有所帮助！假如觉得有收获，希望各位转发关注、动动你手指帮忙点个赞。谢谢！

坐稳啦~

要做自己设置组件，我们先定一个小目标，比方说我们在小程序中经常使用的弹窗组件，基本效果图如下

如何自己设置组件？

新建好一个基础项目，再新建好一个目录 components 专门放自己设置组件，在此目录结构下新建一个 dialog 文件夹来放这次我们自己设置的组件（假如以后重复使用，直接拷贝该文件夹就可）。

自己设置组件一般需要由 .json、.wxml、.wxss、.js?4 个文件组成，跟普通页面一样，其中 .js 文件的编写是重点难点也是和页面的区别，其余三个文件的编写跟我们平常写页面没多大出入。

我们在dialog 文件夹下新建一个?dialog 页面来自己设置我们的组件，是新建页面哦！但建好后，记得把 .js 文件中的代码清理，后面会说明为什么，这也是自己设置组件和普通页面不同之处，稍后我们再把代码补上；假如不建页面，也可以分别创立 4 个不同后缀名但文件名一样的空文件。我推荐使用创立页面的方式，由于方便快捷，当然因人而异。

新建基础项目时，index 页面可能会少了一个 index.json 文件，需要我们自己新建。新建基础项目也会有 logs 页面，我们可以选择删除或者者保留，我们此次不会使用到它。

创立好后的目录结构，也就是项目结构如下，我们只要往里面补充代码即可以

要想自己设置组件，我们需要先在 dialog.json 文件中公告，告诉编译器：呐，我要开始自己设置组件了

自己设置组件无非就那么几种，也就是已有组件、新组件、组合、修改的排列组合的集。

而后即可以写界面和样式了，和平时写的界面样式写法没什么区别，这次我只是用已有的组件通过组合成新组件，该怎样排就怎样排，界面写在 dialog.wxml 中，样式写在 dialog.wxss 中，照常写即可以了。

界面如下：

这个界面也不难了解，相信大家一看就能明白，其中的标题、信息、确定按钮文字和取消按钮文字都进行了数据绑定，都需要我们传进去，我们想传什么就显示什么，这样就灵活了很多，中间还有一根短分割线。

样式如下：

注意：在样式文件 .wxss 中不应使用ID选择器、属性选择器和标签名选择器，常用类选择器。

接下来是，最难的部分： .js 文件

在自己设置组件的?js?文件中，需要使用?Component( )?来注册组件，这也为什么前面要删除 .js 文件中代码的起因，也是跟页面最大的区别，在里面我们可以提供给组件少量内部数据、属性定义和自己设置方法等。

组件的内部数据和属性将被用于组件?wxml?的渲染，方法则用于事件解决或者者写业务逻辑等。

其中，data 部分跟我们在页面中的含义用法一致；我们可以指定 properties 属性的类型和默认值，属性值也可由组件外部传入

像上面这样，组件中的标题就是「 测试 」了，而不是默认的「标题」，往下看完怎样使用后再回来看就知道怎样回事了。

还有方法 method，方法也跟我们在页面中方法使用情况一样。

这里重点说一下这个触发事件，使用?this.triggerEvent( ) 可以发生触发事件，什么个情况呢？假如我们绑定触发事件中的事件，那么触发事件发生，绑定的事件也会发生（不知形容得正确与否），如

举个例子来说明

我们要注意的是第一个参数和第二个参数，前者是指定需要触发的事件的事件名，例如 cancle（可随性自己设置），在使用时即可以进行绑定，如：bind:cancle 或者者? bindcancle 这种格式都可以正确调用，推荐前者。然后者是一个 detail 对象，这个参数我们常用！用来向调用者传递我们想告诉调用者的数据，是组件创立者和调用者沟通的桥梁，这个能处理很多问题，希望大家熟知，以后你常用自己设置组件就知道这个有多重要了；而 option 参数则很少用。

介绍可以查看官方文档，官方文档是最好的资料，但不是最合适的。至于为什么这么说，相信很多开发者都深有体会。

如此一来，当代码执行到?this.triggerEvent( ) 这句时，就会触发 指定的 cancel 事件。

而在使用组件时，我们又绑定了该事件是 cancel_event（可随性自己设置），例如： xx.wxml 中的代码

那么如果我们在 .js 中定义了 cancel_event 函数

那该函数就会被调用。也就是说，当?this.triggerEvent( ) 代码被执行，就会输出 index cancel。这一连串的关系，希望我能说明白。假如有哪里不清楚或者者有错，欢迎在下方留言。

肯定要在定义组件和使用组件及展现效果间来回看看，这样可以更好更快的了解。

如何使用自己设置组件？

我们自己设置组件的目的是提高代码重用性，或者者满足我们的由于需求，粗暴点的就是为了「 用」，定义好组件之后，我们怎样引用这个自己设置的组件呢？

在 index.json 中公告，告诉编译器：呐，我要使用放在 xx 的 xx 名字的自己设置组件了

这里的 access-dialog 是我们给我们要的组件命名，是可以自由定义的，想给它叫什么名字就叫什么，但最好是故名思意。然后面是指定这个自己设置组件的目录，我这里给的是绝对路径，也可以是相对路径，个人喜欢就好了。

有了组件名字，我们即可以像其余组件一样使用它了，认真看后面代码怎样使用它就明白了

这样简单地就应用上了，简单粗暴！还绑定了 cancel 和 confirm 事件。

在 index.js 文件中写上对应事件的业务逻辑，这样我们就基本学会了如何自己设置组件和自己设置组件的使用

我们分别设置组件的标题、信息，设置两个按钮上的文字，如下代码一样，不过我建议后期要进行数据绑定，这样我们只需在 js 文件中修改就好了，也可以用代码控制这些值，而我们一般也是这样做，而不是在页面中固定

这样，我们可以自己设置控制标题、信息，两个按钮文字及点击后的业务逻辑。

一切都可以自己设置，随心所欲！假如以后自己写好一个组件后，想让别人使用，我们只需把放组件的文件夹分享即可以，当然，你组件中假如引用了其余组件也要一并拷贝、使用了全局样式也是！

如需更多关于小程序的技术文章及学习资料，诸如电子书、视频等，欢迎关注公众号：MoTec，在公众号内回复相关文章就可获取。

MoTec

假如有人需要这个小 demo 来参考的话，可以在公众号后端回复「 小程序自己设置组件 – 弹窗 」就可获取。假如觉得这篇文章不错，期待你的关注和留言，不妨点个赞。