前言
近期在寫一點小東西,碰到遮罩...所以將實現(xiàn)的過程分享出來，供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧
邏輯如下：
1：第一次登陸的時候會有一個登錄按鈕遮罩浮層提示去授權(quán)登錄
2：在彈出的授權(quán)框里，拒絕授權(quán)按鈕的時候，界面的數(shù)據(jù)沒有辦法加載出來，允許授權(quán)的時候，界面就能渲染從后端拿過來的數(shù)據(jù)
3：判斷是否授過權(quán)（判斷是第一次登錄還是第n次），如果用戶第一次已經(jīng)登錄授權(quán)，后面繼續(xù)登錄的時候懸浮框就不會再出現(xiàn)
效果如下：
代碼如下：
index.html
<!-- 授權(quán)彈框提示 --> <view class="container"> <view class="float" hidden='{{viewShowed}}'> <view class='floatContent'> <view class='floatText'> <text>獲取微信授權(quán)信息</text> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">去設(shè)置</button> </view> </view> </view></view>index.wxss
.float { height: 100%; width: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); z-index: 2; top: 0; left: 0;}.floatContent { padding: 20rpx 0; width: 80%; background: #fff; margin: 40% auto; border-radius: 20rpx; display: flex; flex-direction: column; justify-content: space-around; align-items: center; position: relative; height: 332rpx;}.floatText text { color: #000; font-size: 40rpx; display: block; text-align: center; line-height: 90rpx; border-radius: 30rpx; margin-right: 10rpx;}index.js
js代碼，與后臺數(shù)據(jù)庫交互，授權(quán)的信息存入了數(shù)據(jù)庫，可根據(jù)自己的需要做出相應(yīng)的修改。
//index.js//獲取應(yīng)用實例var app = getApp()Page({ data: { carList: [], //車輛數(shù)據(jù)集合 viewShowed: true, //控制授權(quán)是否顯示 }, onLoad: function () { var that = this; app.getOpenid().then(function (res) { if (res.status == 200) { //判斷是否授權(quán) wx.getSetting({ success(e) { if (e.authSetting['scope.userInfo']) { //已經(jīng)授權(quán) that.getCars(res.data); } else { //沒有授權(quán)，顯示授權(quán)框 that.setData({ viewShowed: false, }) } } }) } }) }, getUserInfo: function (e) { var that = this; that.setData({ viewShowed: true, }); var userinfo = e.detail.userInfo; wx.request({ url: "http://localhost:8081/wpDeboServer/wx.do", data: { "openid": app.globalData.openid, "nickname": userinfo.nickName }, method: 'PUT', header: { 'Content-type': 'application/json' }, success: function (res) { //查詢綁定車輛 that.getCars(app.globalData.openid); } }); },})總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對武林網(wǎng)的支持。
新聞熱點
疑難解答
