脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

总所周知,微信小程序的登录授权在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吧

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过