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

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序登录授权之终极蛇皮解决兼容方案(应该是比较完美的了)脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

思路分析

这是更改接口后的一个重要信息,新的要求是获取用户信息和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
                      })
                    }
                  }
                })
              }
            }

          })
        }
      })
    }
  }
@H_777_285@<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吧

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序登录授权之终极蛇皮解决兼容方案(应该是比较完美的了)全部内容,希望文章能够帮你解决微信小程序登录授权之终极蛇皮解决兼容方案(应该是比较完美的了)所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。