登錄授權(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)。

這樣原本定義的方法就完全沒用了：

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.     ......

復制代碼
那只好換個思路啦，當點擊需要授權(quán)的頁面時，我們首先驗證全局變量globalData.userInfo是否有值，如果沒有，那我們直接跳轉(zhuǎn)到授權(quán)頁面(authorization),引導用戶授權(quán)登錄，登錄成功后再跳轉(zhuǎn)回需要訪問的頁面。

具體實現(xiàn)

授權(quán)登錄頁面設計

首先需要建個授權(quán)登錄頁面，頁面其實很簡單，一段引導語和一個授權(quán)按鈕，但設計下來發(fā)現(xiàn)太單調(diào)了，于是找了個gif動圖，200多kb有點大[淚崩]，為了好看就只能犧牲下了。

另外，如果用戶不想授權(quán)，那此頁面沒有可操作按鈕了，只能退出，這不太友好，所以又加了個返回首頁的按鈕，整體樣式效果如下：
 

同時如果用戶點擊授權(quán)登錄后依舊拒絕，在頂部給到一些小提示：
 

這個的話基本上的交互就有了，來看看具體代碼：

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)后，可體驗更多功能</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">返回首頁</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. 您的微信版本過低，請升級后再次體驗</view>
14. //js核心代碼：其中利用backtype來確認授權(quán)登錄后跳轉(zhuǎn)回那個頁面
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)的是微信菜單頁，記得要用wx.switchTab,詳細的可以再看看官方文檔，幾個跳轉(zhuǎn)的方法去體會下。

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

1. //比如用戶中心的頁面
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.   }

其他

由于時間有限，有些代碼處理的不是很好，這個大家主要體會下思路和主要方法，時間充裕的情況下還是要注意下自己的編碼習慣。

另外就是有個小問題，在頁面跳轉(zhuǎn)時總有點小瑕疵，比如我第一次登錄，在點擊我的菜單Tab時，小程序會首先渲染用戶中心這個頁面，然后發(fā)現(xiàn)沒有授權(quán)，直接一閃而過又跳到授權(quán)登錄頁面,這個不懂有什么方式可以優(yōu)化的，如果有改善建議還望指教。