微信小程序登陸受權之終極蛇皮解決兼容方案（應該是比較完美的了）

總所周知，微信小程序的登陸受權在wx.getUserInfo接口調整以後，變得有點慘無人道，特別是須要兼容特別低版本的基礎庫的時候，好比我如今，竟然要我兼容1.0？？？EXM？？在折磨了兩天以後，終於作出了一個比較使人滿意的demo。

思路分析

• open-data

這是更改接口後的一個重要信息，新的要求是獲取用戶信息和wx.login須要顯式的要求用戶點擊事件以後才能進行。因此使用button組件就變成了常態。可是有個問題就是open-data須要基礎庫版本在1.4.0以上才能使用。假如低於這個版本則沒法使用這個。因此就須要咱們進行兼容。檢測是否能夠用可使用wx.canIUse(須要基礎庫在1.1.0以上，其實1.1.0如下的基礎庫徹底沒有用戶了)

<button open-type="getUserInfo" bindgetuserinfo="login" wx:if="{{ canIUse }}">登陸</button>

//  對應的js文件
page({
    data: {
       canIUse:wx.canIUse('button.open-type.getUserInfo')
    }
})

最簡單的兼容辦法，直接提示升級微信（好吧，通常來講這種都會被打的。。。放棄）那麼就只能使用原來的wx.getUser Info.可是呢，又不能直接進行調用。因此不外乎就是一些modal和從新拉取受權的過程。下面貼一張個人隨筆畫！！（這裏有個問題就是wx.authorize是存在bug的，因此實際開發中咱們儘可能不使用該api）

實現

主要是兼容用戶不受權和基礎庫版本的問題。對於用戶已經拒絕受權的狀況，引導用戶從新拉取受權。用到的主要api是

• wx.getSetting（1.2.0以上基礎庫支持）
• wx.openSetting(1.1.0以上基礎庫支持，2.3.0版本以上須要使用button組件。可是2.3.0以上的時候咱們能夠直接使用open-data獲取用戶信息，因此咱們不須要兼容這api)

具體代碼：

data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  login:function(e){
    console.log(e);
  },
// 兼容不支持opentype 1.4.0基礎庫
  lowLogin:function(){
    //  支持getsetting 1.2.0
    if(wx.getSetting){
      wx.getSetting({
        success:function(resGetting){
          //  用戶已經受權 1.2.0基礎庫
          if(resGetting.authSetting['scope.userInfo']){
            wx.getUserInfo({
              success:function(UserInfo){
                console.log(UserInfo);
              }
            })
          // 用戶未受權
          }else{
            // 拉取受權
            wx.getUserInfo({
              fail:function(){
                wx.showModal({
                  title: '提示',
                  content: '您還沒有受權,是否打開設置界面進行受權？',
                  success: function (res) {
                    if (res.confirm) {
                      wx.openSetting({
                        success: function (ee) {
                          //  受權成功
                          if(ee.authSetting['scope.userInfo'] == true){
                            wx.getUserInfo({
                              success: function (eee) {
                                console.log(eee);
                              }
                            })
                          }else{
                            wx.showModal({
                              title: '提示',
                              content: '您未受權，若須要使用部分功能，請登陸受權',
                              showCancel: false
                            })
                          }
                        }
                      })
                    }
                  }
                })
              }
            })
            
          }
        }
      })
    //  不支持getsetting 經過調用wx.getUserInfo判斷是否受權，若未受權則進入fail函數
    }else{
      wx.getUserInfo({
        success:function(getUserInfo){
          console.log(getUserInfo);
        },
        fail:function(){
          // 用戶未受權 彈窗經過opensetting受權
          wx.showModal({
            title: '提示',
            content: '您還沒有受權小程序，是否打開設置界面進行受權?',
            success:function(showModal){
              //  肯定打開 調用opensetting 1.1.0
              if(showModal.confirm){
                wx.openSetting({
                  success:function(opensetting){
                    console.log(opensetting);
                    if(opensetting.authSetting['scope.userInfo']){
                      wx.getUserInfo({
                        success:function(ress){
                          console.log(ress);
                        }
                      })
                    }else{
                      wx.showModal({
                        title: '提示',
                        content: '你未受權小程序，將沒法使用部分功能，若須要使用此部分功能，請受權登陸',
                        showCancel: false
                      })
                    }
                  }
                })
              }
            }

          })
        }
      })
    }
  }

<view>
  <button open-type='getUserInfo' bindgetuserinfo='login' wx:if="{{ canIUse }}">登陸</button>
  <button bindtap='lowLogin' wx:if="{{ !canIUse }}">登陸</button>
</view>

注：微信開發工具貌似有bug，在清楚受權數據緩存以後，打開opensetting以後，沒有出現受權獲取用戶信息的選項。我找了十幾個老版本的微信測試以後，再用工具打開，又出現了。暫不清楚這是什麼狀況。另外此代碼只兼容基礎庫在1.1.0以上的版本，其實也就1.1.0以上有人使用，1.1.0如下的版本是無人使用的。還有就是有些版本的微信加載以後，會出現如下報錯：（這個報錯緣由未知，還沒搞懂爲何會報這個錯誤。）

page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invok

附上github地址：代碼都已上傳>>>> github項目地址 能夠的話給個star吧