登錄授權登錄優(yōu)化，主要是在需要的時候才彈出用戶授權，同時通過wx.openSetting來實現用戶拒絕后的二次授權，因為授權獲取用戶基本信息一旦拒絕之后小程序就不會再出現授權窗口。

但現在wx.getUserInfo該接口將不再出現授權彈窗,需要嵌套在button中讓用戶主動點擊授權。

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

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

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

具體實現

授權登錄頁面設計

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

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

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

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

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.     允許微信授權后，可體驗更多功能</view>
6.   <view class="zan-btns">
7.     <button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授權登錄</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來確認授權登錄后跳轉回那個頁面
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('很遺憾，您拒絕了微信授權，寶寶很傷心');
34.     }
35.   },

這里注意下，如果跳轉的是微信菜單頁，記得要用wx.switchTab,詳細的可以再看看官方文檔，幾個跳轉的方法去體會下。

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

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

其他

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

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