登錄授權(quán)登錄優(yōu)化,主要是在需要的時(shí)候才彈出用戶授權(quán),同時(shí)通過(guò)wx.openSetting來(lái)實(shí)現(xiàn)用戶拒絕后的二次授權(quán),因?yàn)槭跈?quán)獲取用戶基本信息一旦拒絕之后小程序就不會(huì)再出現(xiàn)授權(quán)窗口。
但現(xiàn)在wx.getUserInfo該接口將不再出現(xiàn)授權(quán)彈窗,需要嵌套在button中讓用戶主動(dòng)點(diǎn)擊授權(quán)。
這樣原本定義的方法就完全沒(méi)用了:
-
getUserInfo: function (loginType, cb) {
-
var that = this
-
if (this.globalData.userInfo) {
-
typeof cb == "function" && cb(this.globalData.userInfo, true);
-
}
-
-
......
復(fù)制代碼
那只好換個(gè)思路啦,當(dāng)點(diǎn)擊需要授權(quán)的頁(yè)面時(shí),我們首先驗(yàn)證全局變量globalData.userInfo是否有值,如果沒(méi)有,那我們直接跳轉(zhuǎn)到授權(quán)頁(yè)面(authorization),引導(dǎo)用戶授權(quán)登錄,登錄成功后再跳轉(zhuǎn)回需要訪問(wèn)的頁(yè)面。
具體實(shí)現(xiàn)
授權(quán)登錄頁(yè)面設(shè)計(jì)
首先需要建個(gè)授權(quán)登錄頁(yè)面,頁(yè)面其實(shí)很簡(jiǎn)單,一段引導(dǎo)語(yǔ)和一個(gè)授權(quán)按鈕,但設(shè)計(jì)下來(lái)發(fā)現(xiàn)太單調(diào)了,于是找了個(gè)gif動(dòng)圖,200多kb有點(diǎn)大[淚崩],為了好看就只能犧牲下了。
另外,如果用戶不想授權(quán),那此頁(yè)面沒(méi)有可操作按鈕了,只能退出,這不太友好,所以又加了個(gè)返回首頁(yè)的按鈕,整體樣式效果如下:
同時(shí)如果用戶點(diǎn)擊授權(quán)登錄后依舊拒絕,在頂部給到一些小提示:
這個(gè)的話基本上的交互就有了,來(lái)看看具體代碼:
-
//wxml:利用canIUse變量去兼容低版本
-
-
<view wx:if="{{canIUse}}">
-
<view class='zan-font-14 zan-c-gray-dark' style='text-align:center;margin-top:50rpx'>
-
允許微信授權(quán)后,可體驗(yàn)更多功能</view>
-
<view class="zan-btns">
-
<button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授權(quán)登錄</button>
-
<button bindtap='navigateBack' class="zan-btn">返回首頁(yè)</button>
-
</view>
-
</view>
-
-
<view wx:else class='zan-font-16 zan-c-red' style='text-align:center;margin-top:50rpx'>
-
您的微信版本過(guò)低,請(qǐng)升級(jí)后再次體驗(yàn)</view>
-
//js核心代碼:其中利用backtype來(lái)確認(rèn)授權(quán)登錄后跳轉(zhuǎn)回那個(gè)頁(yè)面
-
bindGetUserInfo: function(e) {
-
let backtype = this.data.backType;
-
if (e.detail.userInfo) {
-
app.globalData.userInfo = e.detail.userInfo
-
if (backtype =='index') {
-
wx.switchTab({
-
url: '../index/index'
-
})
-
} else if (backtype == 'mine') {
-
wx.switchTab({
-
url: '../mine/mine'
-
})
-
} else {
-
wx.redirectTo({
-
url: '../detail/detail?blogId=' + backtype
-
})
-
}
-
} else {
-
this.showZanTopTips('很遺憾,您拒絕了微信授權(quán),寶寶很傷心');
-
}
-
},
這里注意下,如果跳轉(zhuǎn)的是微信菜單頁(yè),記得要用wx.switchTab,詳細(xì)的可以再看看官方文檔,幾個(gè)跳轉(zhuǎn)的方法去體會(huì)下。
這樣的話,在需要微信授權(quán)的頁(yè)面去驗(yàn)證下,如果沒(méi)有登錄就可以直接跳轉(zhuǎn)到該頁(yè)面啦。
-
//比如用戶中心的頁(yè)面
-
onLoad: function () {
-
let that = this;
-
if (!app.globalData.userInfo) {
-
wx.redirectTo({
-
url: '../authorization/authorization?backType=mine'
-
})
-
}
-
-
that.setData({
-
userInfo: app.globalData.userInfo
-
});
-
}
其他
由于時(shí)間有限,有些代碼處理的不是很好,這個(gè)大家主要體會(huì)下思路和主要方法,時(shí)間充裕的情況下還是要注意下自己的編碼習(xí)慣。
另外就是有個(gè)小問(wèn)題,在頁(yè)面跳轉(zhuǎn)時(shí)總有點(diǎn)小瑕疵,比如我第一次登錄,在點(diǎn)擊我的菜單Tab時(shí),小程序會(huì)首先渲染用戶中心這個(gè)頁(yè)面,然后發(fā)現(xiàn)沒(méi)有授權(quán),直接一閃而過(guò)又跳到授權(quán)登錄頁(yè)面,這個(gè)不懂有什么方式可以優(yōu)化的,如果有改善建議還望指教。