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

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

浏览量:687 时间: 来源:weixin_34198797

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎