小程序 授权弹出框实例（附截图和源码哟）

因为小程序现在不会自动弹出授权窗口，可通过open-type='getUserInfo' 的按钮点击后弹出，于是自己实现一个授权的弹出框，包括了样式、界面和js代码，喜欢就点赞啦，么么哒～

样式是参考的一个博客，但是出来后发现还是有些问题，所以样式已经被我改的面目全非了嘤嘤嘤。（如果该作者有看到的可以联系下我，我补下参考链接，感谢这位大神先！）

先上下效果图～除了那个圆点，我实在是还原不出来，其他的个人觉得还是很像的！

好了，上代码～点了授权按钮后续的相关js就自己写吧～

wxml：

<view class='box' hidden="{{authorModal==true}}">
    <view class='msg-box'>
        <text class='title'>微信授权</text>
        <text class='aumsg'>xxx小程序申请获得以下权限</text>
        <text class='msg'>●获得你的公开信息（昵称、头像等）</text>
        <view class='btn_wrapper'>
            <button bindtap='cancle' class='btn'>拒绝</button>
            <button class='btn confirm_btn' open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo'>允许</button>
        </view>
    </view>
</view>
复制代码

我觉得最想知道的应该是css吧：

/*modal css*/
.box{
 width: 100%;
 height:50%;
 left:12%;
 top:20%;
 position: fixed;
 z-index: 9999;
 
}
.msg-box {
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: #FFFFFf;
 border-radius: 5px;
 width: 76%;
 padding-top:30rpx;
 
}
.title{
 margin: 10rpx;
 width:100%;
 text-align:center;
 padding-bottom:10px;
 border-bottom:2rpx solid rgba(7,17,27,0.1);
}
.msg{
 margin: 20rpx;
 font-size:12px;
 color:#ccc;
 border-top:2rpx solid rgba(7,17,27,0.1);
 padding-top:20rpx;
 padding-bottom:20px;
 width:80%;
}
.btn_wrapper{
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 100rpx;
line-height: 100rpx;
 border-top:2rpx solid rgba(7,17,27,0.1);
 width:100%;
}
.btn{
 background-color: #fff;
 flex: 1;
 height: 100rpx;
 line-height: 100rpx;
 text-align: center;
 font-size: 36rpx;
 width:200%;
 border-radius: 0;
}
.aumsg{
 padding-top:80rpx;
 font-size:34rpx;
 width:80%;
}
.confirm_btn{
 border-left:2rpx solid rgba(7,17,27,0.1);
 color:green;
}
.btn::after {
 border: 0;
}
复制代码

实现灰色的背景的话，给box的父组件加个代表class名的变量modalContainer，随着弹出框的出现和消失setData就可以啦。

.modal-container{
 background: #ccc;
}
复制代码

<view class="container {{modalContainer}}">
复制代码

初始值：

data: {
    modalContainer: 'modal-container',
    }
复制代码

今天的分享到此为止，比心～！