微信小程式模擬彈窗提示使用者授權(wxss+wxml)
阿新 • • 發佈:2018-12-18
效果圖:
wxml內容:
<!-- index.wxml --> <view class="modal-box" hidden='{{!showTip}}'> <view class="modal-content"> <view class="content-title">提示資訊</view> <view class="content-text"> 繫結微訊號需要收集您的部分使用者資訊,否則將無法繫結成功,請點選“確認”後按操作提示授權。 </view> </view> <view class="modal-btns"> <view class="weui-flex"> <view class="weui-flex__item"> <button class="dialog-btn cancel" bindtap="exit">取消</button> </view> <view class="weui-flex__item"> <button class="dialog-btn confirm" open-type="getUserInfo" bindgetuserinfo="getUserInfo">確認</button> </view> </view> </view> </view>
wxss內容(需要WeUI支援):
/** index.wxss **/ @import 'weui.wxss'; .modal-box { position: fixed; background: rgba(0, 0, 0, 0.4); top: 0rpx; width: 100%; height: 100%; } .modal-content { background: #fff; width: 600rpx; margin: 40% auto 0; justify-content: center; align-items: center; border-bottom: 1px solid #ebebec; } .content-title { height: 100rpx; text-align: center; font-size: 1.2rem; padding-top: 10rpx; } .content-text { padding: 0 50rpx 50rpx; } .modal-btns { width: 600rpx; margin: 0 auto; justify-content: center; align-items: center; } .dialog-btn { border-radius: 0; background: #fff; height: 100rpx; width: 100%; } .dialog-btn::after { border: none; border-radius: 0; } .cancel { color: #ccc; } .confirm { border-left: 1px solid #ebebec; color: #60d048; }
js牽扯的業務程式碼較多,不確定摘出來的這段程式碼是否完整,內容和官網DEMO相似,只是從app移到了index,主要目的是動態控制showTip變數實現提示框顯示隱藏。
/* index.js */ var app = getApp(); Page({ data: { canIUse: wx.canIUse('button.open-type.getUserInfo'), showTip: false }, onLoad: function (query) { var self = this; if (app.globalData.userInfo) { console.log("使用者已授權"); } else if (this.data.canIUse) { console.log("請求使用者授權"); // 由於 getUserInfo 是網路請求,可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況 // 登入 wx.login({ success: res => { //console.log(res); var code = res.code; //登入憑證 if (code) { app.globalData.code = code; // 獲取使用者資訊 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { // 已經授權,可以直接呼叫 getUserInfo 獲取頭像暱稱,不會彈框 wx.getUserInfo({ success: res => { //console.log(res); app.globalData.userInfo = res.userInfo app.globalData.encryptedData = res.encryptedData app.globalData.iv = res.iv if (res.userInfo) { // 可以將 res 傳送給後臺解碼出 unionId } else { self.setData({ showTip: true }); } } }) } else { self.setData({ showTip: true }); } }, fail: function () { console.log('獲取使用者資訊失敗') } }) } else { console.log('獲取使用者登入態失敗!' + res.errMsg) } } }) } else { console.log("使用者未授權"); // 在沒有 open-type=getUserInfo 版本的相容處理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo } }) } }, getUserInfo: function(e) { var self = this; if (e && e.detail.userInfo) { self.setData({ showTip: false }) } } })