登錄授權(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)用了：

1. getUserInfo: function (loginType, cb) {
2.     var that = this
3.     if (this.globalData.userInfo) {
4.       typeof cb == "function" && cb(this.globalData.userInfo, true);
5. } 
6.     
7.     ......

復(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)看看具體代碼：

1. //wxml:利用canIUse變量去兼容低版本
2.  
3. <view wx:if="{{canIUse}}">
4.   <view class='zan-font-14 zan-c-gray-dark' style='text-align:center;margin-top:50rpx'>
5.     允許微信授權(quán)后，可體驗(yàn)更多功能</view>
6.   <view class="zan-btns">
7.     <button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授權(quán)登錄</button>
8.     <button bindtap='navigateBack' class="zan-btn">返回首頁(yè)</button>
9.   </view>
10. </view>
11.  
12. <view wx:else class='zan-font-16 zan-c-red' style='text-align:center;margin-top:50rpx'>
13. 您的微信版本過(guò)低，請(qǐng)升級(jí)后再次體驗(yàn)</view>
14. //js核心代碼：其中利用backtype來(lái)確認(rèn)授權(quán)登錄后跳轉(zhuǎn)回那個(gè)頁(yè)面
15. bindGetUserInfo: function(e) {
16.     let backtype = this.data.backType;
17.     if (e.detail.userInfo) {
18.       app.globalData.userInfo = e.detail.userInfo
19.       if (backtype =='index') {
20.         wx.switchTab({
21.           url: '../index/index'
22.         })
23.       } else if (backtype == 'mine') {
24.         wx.switchTab({
25.           url: '../mine/mine'
26.         })
27.       } else {
28.         wx.redirectTo({
29.           url: '../detail/detail?blogId=' + backtype
30.         })
31.       }
32.     } else {
33.       this.showZanTopTips('很遺憾，您拒絕了微信授權(quán)，寶寶很傷心');
34.     }
35.   },

這里注意下，如果跳轉(zhuǎn)的是微信菜單頁(yè)，記得要用wx.switchTab,詳細(xì)的可以再看看官方文檔，幾個(gè)跳轉(zhuǎn)的方法去體會(huì)下。

這樣的話，在需要微信授權(quán)的頁(yè)面去驗(yàn)證下，如果沒(méi)有登錄就可以直接跳轉(zhuǎn)到該頁(yè)面啦。

1. //比如用戶中心的頁(yè)面
2. onLoad: function () {
3.     let that = this;
4.     if (!app.globalData.userInfo) {
5.       wx.redirectTo({
6.         url: '../authorization/authorization?backType=mine'
7.       })
8.     }
9.  
10.     that.setData({
11.       userInfo: app.globalData.userInfo
12.     });
13.   }

其他

由于時(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)化的，如果有改善建議還望指教。