1.

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

2.

微信小程序项目越写越大，页面也越来越多，所以将相同作用的模块写成组件是非常必要也方便开发维护的事。

3.

比如，一个弹出框写起来很简单，但是每个页面都需要用一个弹出框，如果每个页面都写一个弹出框的话，这就很麻烦，而且没有意义，所以，就弹出框写成组件，就是一个非常好的选择。下面就以弹出框来举例，了解一下微信小程序的组件系统。

创建自定义组件4.

类似于页面，一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）：

项目目录json文件：{"component":true}wxml文件：viewwx:if"{{show}}"class'iosTip-maskiosTip-animate-fade-in'viewclass'iosTip-dialog'viewclass'iosTip-dialog-box'viewclass'iosTip-close'bindtap'close'/viewviewclass'iosTip-title'特别说明/viewviewclass'iosTip-con'受《AppleDeveloperProgram许可协议》《AppStore审核指南》等终端设备系统、应用程序商店、市场等的协议规范的影响，自2018年8月17日起，小程序内苹果（Apple）手机用户将暂不支持直接购买。/viewbuttonopen-type'contact'class"service-button"session-from"{{3}}"viewclass'iosTip-bottom'联系在线客服获得更多帮助/view/button/view/view/viewjs文件：//component/iosTip/iosTip.jsComponent({/***组件的初始数据*/data:{show:true},/***组件的方法列表*/methods:{close:function(){varmyShow{myShow:false}this.triggerEvent('myevent',myShow)//myevent自定义名称事件，父组件中使用}}})wxss文件：.iosTip-mask{width:100%;position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.4);}.iosTip-animate-fade-in{-webkit-animation:fadeInease0.3sforwards;animation:fadeInease0.3sforwards;}.iosTip-dialog{position:absolute;width:80%;max-width:300px;top:40%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:rgba(255,255,255,0.3);text-align:center;border-radius:8px;overflow:hidden;padding:12rpx;}.iosTip-dialog-box{background-color:#fff;width:100%;height:auto;border-radius:8px;position:relative;}.iosTip-close{background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDQzMzYzKSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSLlm77lsYJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxOC45NDRweCIgaGVpZ2h0PSIxOC45ODZweCIgdmlld0JveD0iMCAwIDE4Ljk0NCAxOC45ODYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE4Ljk0NCAxOC45ODYiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNDQ0NDQ0MiIGQ9Ik0xOC4wNTUsMTguMDk2Yy0xLjE4OCwxLjE4OC0zLjExMSwxLjE4OC00LjI5OCwwbC00LjI5OC00LjMwMg0KCWwtNC4yOTYsNC4zMDJjLTEuMTg4LDEuMTg4LTMuMTExLDEuMTg4LTQuMjk4LDBjLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDJsNC4yOTgtNC4zMDFMMC44NjUsNS4xOTINCgljLTEuMTg2LTEuMTg4LTEuMTg2LTMuMTEzLDAtNC4zMDFjMS4xODctMS4xODgsMy4xMS0xLjE4OCw0LjI5OCwwbDQuMjk2LDQuMzAxbDQuMjk4LTQuMzAxYzEuMTg3LTEuMTg4LDMuMTEtMS4xODgsNC4yOTgsMA0KCWMxLjE4NiwxLjE4OCwxLjE4NiwzLjExMywwLDQuMzAxbC00LjI5OCw0LjMwMWw0LjI5OCw0LjMwMUMxOS4yNCwxNC45ODIsMTkuMjQsMTYuOTA4LDE4LjA1NSwxOC4wOTZ6Ii8+DQo8L3N2Zz4NCg");width:60rpx;height:60rpx;position:absolute;right:12rpx;top:12rpx;background-size:20rpx;background-repeat:no-repeat;background-position:center;}.iosTip-title{font-weight:bold;padding:60rpx020rpx;font-size:40rpx;}.iosTip-con{font-size:26rpx;color:#888888;line-height:48rpx;padding:40rpx;text-align:left;}.iosTip-bottom{color:#62759c;font-size:24rpx;margin-top:80rpx;padding-bottom:70rpx;}.service-button{background:white;margin:0;padding:0;}5.

以上代码就定义了一个完整的组件，下面需要在页面中去使用它

6.

页面index的json文件需要引用组件：

{"usingComponents":{"iosTip":"/components/iosTip/iosTip"}}7.

页面index的wxml文件使用组件：

iosTipbind:myevent"onGetShow"wx:if"{{IsIosShow}}"/8.

页面index的js文件书写逻辑：

onGetShow:function(e){console.log(e.detail.myShow)this.setData({IsIosShow:e.detail.myShow})},9.

这样，一个完整的组件就写好了，每个页面都可以引用弹出框了

10.

微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/