小程序弹窗组件
[图片上传失败...(image-d076d0-1526454282915)]
弹窗组件构成
基础的弹窗组件很简单，在网上很容易找到类似的效果图，如图：
image.png
基本由
标题 title
内容 content
取消按钮 cancel
确认按钮 confirm
遮罩层 mask
这五部分构成
图解代码
那么，我们在设计这个组件的时候，也就应该先从这五部分入手，如图：
image.png
现在这个组件的基本骨架就有了，然后在js中配置我们需要的部分，也就是基础的一些属性的配置项
image.png
在这个基础上，完善我们的代码。CSS部分就不做展示了，完整的代码可在我的github上面看。
如何使用？
看下初期的一个用法和效果：
在一个页面中引入一个组件需要三部分：
1、在其json文件声明要使用这个组件
image.png
2、在页面上引入这个组件并用id标示这个组件
img
3、在js中的onReady中获取到这个组件，小程序已经支持类似DOM获取的语法
image.png
效果图
image.png
补全组件功能
这个组件比较特殊，初始状态是一个隐藏的状态。我们需要去动态地改变组件内部的这个showModal的值才行，代码实现：
// 页面
this.popup.show()
// 组件内部
show() {
this.setData({
showModal: true
})
},
同时，给确认和算了注册上方法，完善组件功能：
// 组件内部 为了区分内部和外部的方法，内部的我加上了_
_onCancel() {
this.triggerEvent("cancelEvent")
},
_onConfirm() {
this.triggerEvent("confirmEvent")
}
// triggerEvent可以主动触发绑定在组件上的事件
页面上的代码
<popup
id="popup"
cancelText="算了"
confirmText="确认"
title="标题"
content="你说什么"
bind:cancelEvent="popupCancel"
bind:confirmEvent="popupConfirm"/>
这样，我们在对应的页面写上对应的取消和确定方法就好了。非常好用
丰富组件
如果仅仅是做成上面这个样子，那就太low了。而且小程序也自带了wx.showModal({...})，这样就显得这个组件有点多余了
丰富1，增加显示图片的能力
在很多需求中，弹窗组件不仅仅用做一个提醒的功能，还需要展示一些必要信息，比如二维码之类的。
在组件中新加入下面这样一段代码：
<block wx:if="{{imgUrl}}">
<image src='{{imgUrl}}' class='m-i-img'></image>
</block>
// js中对应属性描述
imgUrl: {
type: String,
value: ''
}
// css部分 这部分就可以大家根据自己的实际需求来变更了
.m-i-img {
width: 240rpx;
height: 240rpx;
margin: 0;
}
效果图：
image.png
即完成了需求，又丰富了组件，以后有类似的需求再也不用重复工作了。可是，如果我们的弹窗组件仅仅可以做到这些，那么远远不够。
想要哪些东西？
对于一个合格的组件来说，它不仅仅要具备丰富的功能，更重要的是它要可以贴合用户的需要，可以定制化开发。
对于Vue来说，可以通过slot（插槽）来解决这个问题，我的这篇文章有我的一点Vue插槽的学习总结。对于小程序来说，也提供了插槽来方便开发者可以对一个组件进行定制化开发！这就可以满足我们想要哪些东西都可以往里面放置这些东西这个需求！
话不多说，看下插槽的威力吧：
// 结合实际情况，我在content区域加入了一个插槽
<view class="m-info">
<block wx:if="{{imgUrl}}">
<image src='{{imgUrl}}' class='m-i-img'></image>
</block>
<text>
{{content}}
</text>
<slot name="content">
</slot>
</view>
这个就对应的是Vue中的具名插槽，需要我们在js中开启多slot支持:
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
在页面中定义我们要定制化的部分
<popup
id="popup"
cancelText="保存二维码"
confirmText="好的"
title="温馨提示"
imgUrl="/images/speech.jpg"
content="{{popupContent}}"
bind:cancelEvent="popupCancel"
bind:confirmEvent="popupConfirm">
<view slot="content" style='color: red;'>
插槽测试部分
</view>
</popup>
效果图：
image.png
至此，从零到有的一个弹窗插件就完成了
结语
其实小程序的组件化开发已经慢慢有了像Vue这样的组件开发的样子。官方文档 内容也非常多
我们在开发的时候一定不能为了完成功能而去开发，一定要学会抽象化的思考整个功能，为写出更加优雅的代码
