微信小程式版部落格——授權登入的修改(wx.getUserInfo)

 

最近一直忙著專案沒有時間打理我的小程式，有網友反饋wx.getUserInfo官方文件中做了一些調整，今天有空看了下文件，果然變了，所以抽時間優化了下程式碼

思路

之前的授權登入優化這裡看下原來的這篇文章,主要是在需要的時候才彈出使用者授權，同時通過wx.openSetting來實現使用者拒絕後的二次授權，因為授權獲取使用者基本資訊一旦拒絕之後小程式就不會再出現授權視窗。

但現在wx.getUserInfo該介面將不再出現授權彈窗,需要巢狀在button中讓使用者主動點選授權。

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

getUserInfo: function (loginType, cb) {
    var that = this
    if (this.globalData.userInfo) {
      typeof cb == "function" && cb(this.globalData.userInfo, true);
} 
    
    ......

那隻好換個思路啦，當點選需要授權的頁面時，我們首先驗證全域性變數globalData.userInfo是否有值，如果沒有，那我們直接跳轉到授權頁面(authorization),引導使用者授權登入，登入成功後再跳轉回需要訪問的頁面。

具體實現

授權登入頁面設計

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

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

image

同時如果使用者點選授權登入後依舊拒絕，在頂部給到一些小提示：

image

這個的話基本上的互動就有了，來看看具體程式碼：

//wxml:利用canIUse變數去相容低版本

<view wx:if="{{canIUse}}">
  <view class='zan-font-14 zan-c-gray-dark' style='text-align:center;margin-top:50rpx'>
    允許微信授權後，可體驗更多功能</view>
  <view class="zan-btns">
    <button open-type='getUserInfo' bindgetuserinfo="bindGetUserInfo" class="zan-btn zan-btn--primary">授權登入</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來確認授權登入後跳轉回那個頁面
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('很遺憾，您拒絕了微信授權，寶寶很傷心');
    }
  },

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

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

//比如使用者中心的頁面
onLoad: function () {
    let that = this;
    if (!app.globalData.userInfo) {
      wx.redirectTo({
        url: '../authorization/authorization?backType=mine'
      })
    }

    that.setData({
      userInfo: app.globalData.userInfo
    });
  }

其他

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

另外就是有個小問題，在頁面跳轉時總有點小瑕疵，比如我第一次登入，在點選我的選單Tab時，小程式會首先渲染使用者中心這個頁面，然後發現沒有授權，直接一閃而過又跳到授權登入頁面,這個不懂有什麼方式可以優化的，如果有改善建議還望指教。

總結

果然，小程式變化還是挺快的，看來有時間還是得多多迭代我的小部落格呀，也歡迎有興趣的小夥伴一起加入。

專案原始碼地址：https://github.com/CavinCao/ghost-wechat-blog

 

原文 https://www.jianshu.com/p/9930ea8d8b40