一、前言

我相信在开发小程序的时候，你会遇到某个功能被多次使用的情况，比如弹出框。这个时候，大家首先想到的就是基于组件的开发，也就是把弹出框封装成一个组件，然后在任何使用的地方调用它。是的，似乎每个人都有想法，但如何实现呢？你可以看官方文件，但是微信的官方文件不是很清楚，写起来很痛苦。今天带你开发微信组件，静观其变，马路杀手要开了。

二、具体实现

让我们首先实现一个简单的弹出组件，如下图所示：

实现过程如下：

1.创建一个新的组件文件夹来存储我们的组件，它存储我们使用的组件。我们今天要做的事情将会出现。创建一个新的文件夹弹出窗口来存储我们的组件模板。右键选择新建组件，会自动生成组件模板wxs、wxml、json、js，如图。

2.我们可以写一些组件样式和布局，页面编写也差不多，我就不多说了，把代码贴到：就可以了。

popup.wxml

12345678910 view class=' wx-popup ' hidden=' { { flag } } ' view class=' popup-container ' view class=' wx-popup-title ' { title } }/view view class=' wx-popup-con ' { content } }/view view class=' wx-popup-BTN ' text class=' BTN-no ' bindtap=' _ error ' { BTN _ no } }/text text class=' BTN-ok ' bindtap=' _ success ' { BTN

12345678910111213141516171819202122223242526272829303132333343536373839404142434445464748/*组件/弹出窗口。wx-popup { position : absolute；left:0top:0宽度：100%；高度：100%；background: rgba(0，0，0， 5)；}.popup-container { position : absolute；左侧：50%；top :50%；宽度：80%；最大宽度width:600rpxborder:2rpxsolid # ccc边界半径：10 rpx；箱式： bordre-box；transform: translate(-50%，-50%)；飞越：隐藏；背景# fff}.wx-popup-title { width :100%；padding:20rpx文本对齐：居中；font-size :40 rpx；border-bottom :2 rpx solidred；}.wx-popup-con { margin 336060 rpx 10 rpx；文本对齐：居中；}.wx-popup-BTN { display : flex；证明内容：空间环绕；边距-底部：40 rpx；}.wx-popup-BTN text { display : flex；align-items : center；justice-content : center；宽度：30%；height:88rpxborder:2rpxsolid # ccc边界半径：88 rpx；}popup.js:

123456789101112131415161718192021222324252627282930313233343536373839404142434454647484950515253555565758596162636 64656组件({ 0 值：' Cancel'}，//弹出确认按钮文本BTN _ OK 3360 {Type 3360 string，值3360' OK'}，/* * *组件的初始数据*/data : {flag: true，}，/* * *组件的方法列表*/Methods 3360 {//hidepupp 3360 function(){ this。 setdata ({flag3360！This.data.flag})}，//显示项目符号框Show popup(){ this . setdata({ flag 3360！This.data.flag})}，/**内部私有方法建议以下划线开头* triggerEvent用于触发事件*/_error () {//触发取消此回调。触发事件('错误')}，_ success(){//触发this.triggerEvent的成功回调('成功')；}}} }}})组件这个可以自己看微信官方文档锻炼自学能力_

3.模板文件也已经建立。需要在首页配置这个组件。首先，构建一个名为index.json的文件，其中配置了‘using components’，也就是说需要引入到主页中，直接加载代码：

12345{ '使用组件' : { '弹出' : '/组件/弹出/弹出' }}4。完成这些基本上大功告成了，还有最重要的一步也是最后一步，引入到首页，看代码

1234567891011121314!索引。wxml-view class=' container ' view class=' user info ' buttonbindtap=' showPopup '点我/button/view popup id=' popup ' title='小组件内容='学会了吗btn_no='没有btn_ok='学会了绑定：错误=' _错误'绑定：成功=' _成功'/弹出窗口/视图5 .配置index.js操作点击事件，这个更简单，上代码

1234567891011121314151617181920212232425//索引。js/获取应用实例const app=GetApp()Page({ onready : function(){//获得弹出组件这个。popup=这个。select component(' # popup ')；}，show popup(){ this。弹出菜单。show popup()；},//取消事件_error() {console.log('你点击了取消');这个。弹出菜单。hidePopup()；},//确认事件_success() {console.log('你点击了确定');这个。弹出菜单。hidePopup()；}})到此就结束，一个简单的小插件封装好了