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

来源:csdn博客 分类: 文章浏览史 发布时间:2020-08-03 19:40:45 最后更新:2020-08-03 浏览:43
转载声明:
本文为摘录自“csdn博客”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-03 19:40:45

因为小程序现在不会自动弹出授权窗口,可通过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',
    }
复制代码

今天的分享到此为止,比心~!

php技术微信