一、前言相信大家在开发小程序时会遇到某个功能多次使用的情况，比如弹出框。这个时候大家首先想到的是组件化开发，就是把弹出框封装成一个组件，然后哪里使用哪里就调用，对，看来大家都是有思路的人，但是要怎样实现呢。可能你会去看官方文档，但是微信的官方文档也是说的不太清楚，所以写起来也是非常痛苦。今天就带大家手摸手开发微信组件，坐稳了，马路杀手要开车了。
二、具体实现我们先实现个简单的弹窗组件，详情图如下：
实现过程如下：
1.新建component文件夹存放我们的组件，里边存放的就是我们所用的组件，我们今天要做的事弹出框，新建文件夹popup存放我们的组件模板，点击右键选择新建component，就会自动生成组件的模板wxss、wxml、json、js，如图
2.我们可以写一些组件样式和布局，更页面写法类似，我就不多说了，直接把代码贴出:
popup.wxml
viewhidden="{{flag}}"viewclass='popup-container'view{{title}}/viewview{{content}}/viewviewtextbindtap='_error'{{btn_no}}/texttextbindtap='_success'{{btn_ok}}/text/view/view/viewpopup.wxss
/component/popup.wxss/.wx-popup{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.5);}.popup-container{position:absolute;left:50%;top:50%;width:80%;max-width:600rpx;border:2rpxsolid#ccc;border-radius:10rpx;box-sizing:bordre-box;transform:translate(-50%,-50%);overflow:hidden;background:#fff;}.wx-popup-title{width:100%;padding:20rpx;text-align:center;font-size:40rpx;border-bottom:2rpxsolidred;}.wx-popup-con{margin:60rpx10rpx;text-align:center;}.wx-popup-btn{display:flex;justify-content:space-around;margin-bottom:40rpx;}.wx-popup-btntext{display:flex;align-items:center;justify-content:center;width:30%;height:88rpx;border:2rpxsolid#ccc;border-radius:88rpx;}popup.js:
Component({options:{multipleSlots:true//在组件定义时的选项中启用多slot支持},/组件的属性列表/properties:{title:{//属性名type:String,//类型（必填），目前接受的类型包括：String,Number,Boolean,Object,Array,null（表示任意类型）value:'标题'//属性初始值（可选），如果未指定则会根据类型选择一个},//弹窗内容content:{type:String,value:'内容'},//弹窗取消按钮文字btn_no:{type:String,value:'取消'},//弹窗确认按钮文字btn_ok:{type:String,value:'确定'}},/组件的初始数据/data:{flag:true,},/组件的方法列表/methods:{//隐藏弹框hidePopup:function(){this.setData({flag:!this.data.flag})},//展示弹框showPopup(){this.setData({flag:!this.data.flag})},/内部私有方法建议以下划线开头triggerEvent用于触发事件/_error(){//触发取消回调this.triggerEvent("error")},_success(){//触发成功回调this.triggerEvent("success");}}})Component这个可以自己看微信官方文档锻炼一下自学能力^_^
3.模板文件也建好了，在首页用这个组件需要配置一下，首先建一个名为index.json的文件，里边配置"usingComponents"，就是需要引入到首页，直接上代码：
{"usingComponents":{"popup":"/component/popup/popup"}}4.完成这些基本上大功告成了，还有最重要的一步也是最后一步，引入到首页，看代码
!--index.wxml--viewviewbuttonbindtap="showPopup"点我/button/viewpopupid='popup'title='小组件'content='学会了吗'btn_no='没有'btn_ok='学会了'bind:error="_error"bind:success="_success"/popup/view5.配置index.js操作点击事件，这个更简单，上代码
//index.js//获取应用实例constapp=getApp()Page({onReady:function(){//获得popup组件this.popup=this.selectComponent("#popup");},showPopup(){this.popup.showPopup();},//取消事件_error(){console.log('你点击了取消');this.popup.hidePopup();},//确认事件_success(){console.log('你点击了确定');this.popup.hidePopup();}})到此就结束，一个简单的小插件封装好了
三、测试运行效果图：
四、其他补充
暂时没
代码下载：注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权
