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













