自定义微信小程序授权弹窗
引
相信大家对微信小程序都不陌生，每天多多少少会用上那么一两个甚至更多！
这两年小程序的火爆程度真的无法只言片语就能形容，想引入一些数据，但与本文定位不符，就只能搁置了。一句话：「 小程序真的小，但不平凡 」！因此，我也因为项目的需求的原因，一不小心就入了小程序的坑！
正题
由于产品的更新升级，开发小程序的伙伴肯定会在开发工具的控制台看到这样的提示：
既然这个获取用户信息的接口不再出现授权弹窗，查阅了官方提供的组件也没有这样的弹窗，那我们就只能模仿造一个咯！
还是直接上效果，我相信以效果为引导的教程会更通俗易懂。
从效果分析，我们要做的也就两样事物
1. 遮罩层
2. 弹窗内容
一、遮罩层
遮罩层要占满全屏，宽高应占整个页面容器的 100%；颜色偏灰色，可以用黑色 + 一个透明度调节，或者直接找到合适的颜色值。
样式代码如下：
/* 遮罩层 */
.mask{
width:100%;
height:100%;/*宽高 100% 铺满屏幕 */
background: #000;
opacity:0.5;
z-index:9000;
}
每个页面都有一个 Page 容器，我们遮罩层的父容器最好是 Page，我们要设置一个 Page 的宽高。
page{
width:100%;
height:100%;
}
这样，我们的遮罩层就确保可以铺满整个手机屏幕。
二、弹窗
弹窗的宽高可以自己定，我建议用百分比，因为弹窗需要相对浏览器定位，用百分比容易让弹窗居中。
样式代码如下：
.modalDlg{
width:90%;
height:50%;
z-index:9900;/* 要比遮罩层的大 */
background-color: #FFA07A;
border-radius:30rpx;
position: fixed;/* 生成绝对定位的元素，相对于浏览器窗口进行定位。 */
top:10%;
left:5%;/* (100% - width)/2 */
}
这里要特别说一下的是：z-index，弹窗的 z-index 值一定要比遮罩层的 z-index 值大一些，让弹窗在遮罩层上面（相对于垂直手机屏幕方向）
然后我用一个模板定义一个授权弹窗的标题、信息及两个按钮。取消按钮用于关闭弹窗，授权按钮用户获取用户信息。
好了，但是这样会有一个非常严重问题：遮罩层下的组件一样会触发点击事件或其他事件！
如何解决呢 ？
我给出的思路或者说做法是：用 wx:if 和 wx:else 控制组件的显示，当弹窗和遮罩层出现，遮罩层下的所有组件都不可见，反之，则可见。我也因此写了一篇博客笔记：https://blog.csdn.net/MOESECSDN/article/details/81571487，记下了自己的实践和简单的思考。欢迎前去围观！
这个项目的源码地址是：https://github.com/MoTec95/CustomPop。如果你感兴趣，欢迎 clone 到本地瞧瞧。欢迎你指出项目的不足。
上面用到的模板也适用于标题、信息、是否 XX 这样的应用场景，我也用这模板做了一个授权页面，效果如下：
项目地址：https://github.com/MoTec95/AccessTemplate，欢迎大家前去看看，界面配色不佳我也很无奈。
另外也用弹窗做了一个二维码弹窗，因为之前做的项目中有这样的需求：触发生成二维码图片，直接在本页面弹出一个门禁二维码，但是之前做不出来，最后只是让二维码到新的页面展示而已。希望接手的师弟能借鉴这个项目，把这个我看似炫酷一点的功能加上。
效果图如下：
项目地址是：https://gitee.com/MoTek/QRPop
所以我建议编程初学者，「 学东西要以项目作为驱动 」，这样我们更清楚项目需求，而不是自个人瞎认为：应该是这样的！自己的目标也明确。如今做出来，虽然现在回头看，觉得当时自己那么 SB，但还是相当有成就感。学习、成长的过程就是这样，从不会到会的过程，然后回头看：原来当初的自己是那么蠢萌！哈哈。
