小程序开发的小伙伴们应该都知道，虽然小程序已经给我们开发者提供了很多组件便于我们快速开发，但有时候，可能因为业务需求或者个人对技术追求 …… ，种种原因，促使我们不得不自己定义我们需要或者我们想要的组件。
自定义组件除可以满足我们的业务需求外，还有很多好处，例如可以让我们将复杂的页面拆分成多个低耦合的模块，也可重复使用该组件，提高代码的可重用性，提高开发效率，也可以有助于代码维护，等等。一时半会说不完，咋们直接进入正题吧。
本篇文章记录了我自己在开发中，一步步自定义组件的过程和一些总结，希望对各位有所帮助！如果觉得有收获，希望各位转发关注、动动你手指帮忙点个赞。谢谢！
坐稳啦~
要做自定义组件，我们先定一个小目标，比如说我们在小程序中经常使用的弹窗组件，基本效果图如下
如何自定义组件？
新建好一个基础项目，再新建好一个目录 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
链接：https://www.jianshu.com/p/4f3701ec0063
随时随地看视频
