最近一直忙著項(xiàng)目沒有時(shí)間打理我的小程序，有網(wǎng)友反饋wx.getUserInfo官方文檔中做了一些調(diào)整，今天有空看了下文檔，果然變了，所以抽時(shí)間優(yōu)化了下代碼
思路
之前的授權(quán)登錄優(yōu)化這里看下原來的這篇文章,主要是在需要的時(shí)候才彈出用戶授權(quán)，同時(shí)通過wx.openSetting來實(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)。
這樣原本定義的方法就完全沒用了：
getUserInfo: function (loginType, cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo, true);
}
......
那只好換個(gè)思路啦，當(dāng)點(diǎn)擊需要授權(quán)的頁面時(shí)，我們首先驗(yàn)證全局變量globalData.userInfo是否有值，如果沒有，那我們直接跳轉(zhuǎn)到授權(quán)頁面(authorization),引導(dǎo)用戶授權(quán)登錄，登錄成功后再跳轉(zhuǎn)回需要訪問的頁面。
具體實(shí)現(xiàn)
授權(quán)登錄頁面設(shè)計(jì)
首先需要建個(gè)授權(quán)登錄頁面，頁面其實(shí)很簡單，一段引導(dǎo)語和一個(gè)授權(quán)按鈕，但設(shè)計(jì)下來發(fā)現(xiàn)太單調(diào)了，于是找了個(gè)gif動(dòng)圖，200多kb有點(diǎn)大[淚崩]，為了好看就只能犧牲下了。
另外，如果用戶不想授權(quán)，那此頁面沒有可操作按鈕了，只能退出，這不太友好，所以又加了個(gè)返回首頁的按鈕，整體樣式效果如下：
同時(shí)如果用戶點(diǎn)擊授權(quán)登錄后依舊拒絕，在頂部給到一些小提示：
這個(gè)的話基本上的交互就有了，來看看具體代碼：
//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">返回首頁</button>
</view>
</view>
<view wx:else class='zan-font-16 zan-c-red' style='text-align:center;margin-top:50rpx'>
您的微信版本過低，請(qǐng)升級(jí)后再次體驗(yàn)</view>
//js核心代碼：其中利用backtype來確認(rèn)授權(quán)登錄后跳轉(zhuǎn)回那個(gè)頁面
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)的是微信菜單頁，記得要用wx.switchTab,詳細(xì)的可以再看看官方文檔，幾個(gè)跳轉(zhuǎn)的方法去體會(huì)下。
這樣的話，在需要微信授權(quán)的頁面去驗(yàn)證下，如果沒有登錄就可以直接跳轉(zhuǎn)到該頁面啦。
//比如用戶中心的頁面
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è)小問題，在頁面跳轉(zhuǎn)時(shí)總有點(diǎn)小瑕疵，比如我第一次登錄，在點(diǎn)擊我的菜單Tab時(shí)，小程序會(huì)首先渲染用戶中心這個(gè)頁面，然后發(fā)現(xiàn)沒有授權(quán)，直接一閃而過又跳到授權(quán)登錄頁面,這個(gè)不懂有什么方式可以優(yōu)化的，如果有改善建議還望指教。
總結(jié)
果然，小程序變化還是挺快的，看來有時(shí)間還是得多多迭代我的小博客呀，也歡迎有興趣的小伙伴一起加入。
項(xiàng)目源碼地址：https://github.com/CavinCao/ghost-wechat-blog
