前言
近期在寫一點小東西,碰到遮罩...所以將實現的過程分享出來，供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧
邏輯如下：
1：第一次登陸的時候會有一個登錄按鈕遮罩浮層提示去授權登錄
2：在彈出的授權框里，拒絕授權按鈕的時候，界面的數據沒有辦法加載出來，允許授權的時候，界面就能渲染從后端拿過來的數據
3：判斷是否授過權（判斷是第一次登錄還是第n次），如果用戶第一次已經登錄授權，后面繼續登錄的時候懸浮框就不會再出現
效果如下：
代碼如下：
index.html
<!-- 授權彈框提示 --> <view class="container"> <view class="float" hidden='{{viewShowed}}'> <view class='floatContent'> <view class='floatText'> <text>獲取微信授權信息</text> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">去設置</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代碼，與后臺數據庫交互，授權的信息存入了數據庫，可根據自己的需要做出相應的修改。
//index.js//獲取應用實例var app = getApp()Page({ data: { carList: [], //車輛數據集合 viewShowed: true, //控制授權是否顯示 }, onLoad: function () { var that = this; app.getOpenid().then(function (res) { if (res.status == 200) { //判斷是否授權 wx.getSetting({ success(e) { if (e.authSetting['scope.userInfo']) { //已經授權 that.getCars(res.data); } else { //沒有授權，顯示授權框 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); } }); },})總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網的支持。
新聞熱點
疑難解答
