最近一直忙著項目沒有時間打理我的小程序，有網(wǎng)友反饋wx.getUserInfo官方文檔中做了一些調(diào)整，今天有空看了下文檔，果然變了伍派，所以抽時間優(yōu)化了下代碼
思路
之前的授權(quán)登錄優(yōu)化這里看下原來的這篇文章,主要是在需要的時候才彈出用戶授權(quán)，同時通過wx.openSetting來實現(xiàn)用戶拒絕后的二次授權(quán)剩胁，因為授權(quán)獲取用戶基本信息一旦拒絕之后小程序就不會再出現(xiàn)授權(quán)窗口诉植。
但現(xiàn)在wx.getUserInfo該接口將不再出現(xiàn)授權(quán)彈窗,需要嵌套在button中讓用戶主動點擊授權(quán)。
這樣原本定義的方法就完全沒用了：
getUserInfo: function (loginType, cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo, true);
}
......
那只好換個思路啦昵观，當點擊需要授權(quán)的頁面時晾腔，我們首先驗證全局變量globalData.userInfo是否有值，如果沒有啊犬，那我們直接跳轉(zhuǎn)到授權(quán)頁面(authorization),引導用戶授權(quán)登錄建车，登錄成功后再跳轉(zhuǎn)回需要訪問的頁面。
具體實現(xiàn)
授權(quán)登錄頁面設(shè)計
首先需要建個授權(quán)登錄頁面椒惨，頁面其實很簡單缤至，一段引導語和一個授權(quán)按鈕，但設(shè)計下來發(fā)現(xiàn)太單調(diào)了康谆，于是找了個gif動圖领斥，200多kb有點大[淚崩]，為了好看就只能犧牲下了沃暗。
另外月洛，如果用戶不想授權(quán)，那此頁面沒有可操作按鈕了孽锥，只能退出嚼黔，這不太友好，所以又加了個返回首頁的按鈕惜辑，整體樣式效果如下：
同時如果用戶點擊授權(quán)登錄后依舊拒絕唬涧，在頂部給到一些小提示：
這個的話基本上的交互就有了，來看看具體代碼：
//wxml:利用canIUse變量去兼容低版本
<view wx:if="{{canIUse}}">
<view class='zan-font-14 zan-c-gray-dark' style='text-align:center;margin-top:50rpx'>
允許微信授權(quá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'>
您的微信版本過低碎节，請升級后再次體驗</view>
//js核心代碼：其中利用backtype來確認授權(quán)登錄后跳轉(zhuǎn)回那個頁面
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,詳細的可以再看看官方文檔介粘，幾個跳轉(zhuǎn)的方法去體會下殖氏。
這樣的話，在需要微信授權(quá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
});
}
其他
由于時間有限，有些代碼處理的不是很好，這個大家主要體會下思路和主要方法总滩，時間充裕的情況下還是要注意下自己的編碼習慣纲堵。
另外就是有個小問題，在頁面跳轉(zhuǎn)時總有點小瑕疵闰渔，比如我第一次登錄席函，在點擊我的菜單Tab時，小程序會首先渲染用戶中心這個頁面冈涧，然后發(fā)現(xiàn)沒有授權(quán)茂附，直接一閃而過又跳到授權(quán)登錄頁面,這個不懂有什么方式可以優(yōu)化的，如果有改善建議還望指教督弓。
總結(jié)
果然营曼，小程序變化還是挺快的，看來有時間還是得多多迭代我的小博客呀愚隧，也歡迎有興趣的小伙伴一起加入蒂阱。
