开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。
微信小程序项目越写越大，页面也越来越多，所以将相同作用的模块写成组件是非常必要也方便开发维护的事。
比如，一个弹出框写起来很简单，但是每个页面都需要用一个弹出框，如果每个页面都写一个弹出框的话，这就很麻烦，而且没有意义，所以，就弹出框写成组件，就是一个非常好的选择。下面就以弹出框来举例，了解一下微信小程序的组件系统。
创建自定义组件
类似于页面，一个自定义组件由
jsonwxmlwxssjs4个文件组成。要编写一个自定义组件，首先需要在json文件中进行自定义组件声明（将component字段设为true可这一组文件设为自定义组件）：
项目目录
json文件：
{ "component": true}wxml文件：
<view wx:if="{{show}}" class='iosTip-mask iosTip-animate-fade-in'> <view class='iosTip-dialog'> <view class='iosTip-dialog-box'> <view class='iosTip-close' bindtap='close'></view> <view class='iosTip-title'>特别说明</view> <view class='iosTip-con'>受《Apple Developer Program 许可协议》《App Store 审核指南》 等终端设备系统、应用程序商店、市场等的协议规范的影响，自2018年8月17日起，小程序内苹果（Apple）手机用户将暂不支持直接购买。</view> <button open-type='contact' class="service-button" session-from="{{3}}"> <view class='iosTip-bottom'>联系在线客服获得更多帮助</view> </button> </view> </view></view>js文件：
// component/iosTip/iosTip.jsComponent({ /** * 组件的初始数据 */ data: { show: true }, /** * 组件的方法列表 */ methods: { close: function() { var myShow = { 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: fadeIn ease 0.3s forwards; animation: fadeIn ease 0.3s forwards;}.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: 60rpx 0 20rpx; 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;}以上代码就定义了一个完整的组件，下面需要在页面中去使用它
页面index的json文件需要引用组件：
{ "usingComponents": { "iosTip": "/components/iosTip/iosTip" }}页面index的wxml文件使用组件：
<iosTip bind:myevent="onGetShow" wx:if="{{IsIosShow}}" />页面index的js文件书写逻辑：
onGetShow: function (e) { console.log(e.detail.myShow) this.setData({ IsIosShow: e.detail.myShow }) },这样，一个完整的组件就写好了，每个页面都可以引用弹出框了
微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
