微信小程序登录授权之终极蛇皮解决兼容方案（应该是比较完美的了）

总所周知，微信小程序的登录授权在wx.getUserInfo接口调整之后，变得有点惨无人道，特别是需要兼容特别低版本的基础库的时候，比如我现在，居然要我兼容1.0？？？EXM？？在折磨了两天之后，终于做出了一个比较令人满意的demo。

思路分析

• open-data

这是更改接口后的一个重要信息，新的要求是获取用户信息和wx.login需要显式的要求用户点击事件之后才能进行。所以使用button组件就变成了常态。但是有个问题就是open-data需要基础库版本在1.4.0以上才能使用。假如低于这个版本则无法使用这个。所以就需要我们进行兼容。检测是否可以用可以使用wx.canIUse(需要基础库在1.1.0以上，其实1.1.0以下的基础库完全没有用户了)

登录

//  对应的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
                      })
                    }
                  }
                })
              }
            }

          })
        }
      })
    }
  }

  登录
  登录

注：微信开发工具貌似有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吧