微信小程序不支持wx.getUserInfo授权的解决方法

微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。我最近围绕这个做了一些研究，来看看我是如何做好这个授权。 1.用户进来一个页面时，按照微信小程序的生命周期，开始解析onLoad里面的内容。 所以我们在第一步，就把代码放在这里，看看全局变量是否已经有值， 2.如果之前没有授权，则查看用户是否有请求一个授权登录的按钮， 3.最后查阅这个函数的授权结果，是成功返回还是失败。代码如下：

1  onLoad: function () {
2
3    if (app.globalData.userInfo) {
4      console.log(1)
5      this.setData({
6        userInfo: app.globalData.userInfo,
7        hasUserInfo: true
8      })
9    } else if (this.data.canIUse){
10      console.log(2)
11      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
12      // 所以此处加入 callback 以防止这种情况
13      app.userInfoReadyCallback = res => {
14        console.log(12)
15        app.globalData.userInfo = res.userInfo
16        this.setData({
17          userInfo: res.userInfo,
18          hasUserInfo: true
19        })
20      }
21    } else {
22      console.log(3)
23      // 在没有 open-type=getUserInfo 版本的兼容处理
24      wx.getUserInfo({
25        success: res => {
26          app.globalData.userInfo = res.userInfo
27          this.setData({
28            userInfo: res.userInfo,
29            hasUserInfo: true
30          })
31        },
32        fail:res=>{
33          console.log(4);
34          this.setData({
35            getUserInfoFail:true
36          })
37        }
38      })
39    }
40  },

第二步：通常我们这里会进入第二步，允许使用按钮提示用户授权。在onLoad周期里面我们没获取到用户是否有成功授权，我们下一周期onShow，在这里，我们就可以查阅授权的状态，如果进入了fail操作，说明还没有授权，在失败的时候，我们赋值告知授权失败，我们页面根据这个状态值，来显示需要用户点击授权。代码如下：

1  login: function () {
2
3    console.log(111)
4    var that = this
5    // if (typeof success == "function") {
6    //   console.log(6);
7    //   console.log('success');
8    //   this.data.getUserInfoSuccess = success
9    // }
10    wx.login({
11      success: function (res) {
12        var code = res.code;
13        console.log(code);
14        wx.getUserInfo({
15          success: function (res) {
16            console.log(7);
17            app.globalData.userInfo = res.userInfo
18            that.setData({
19              getUserInfoFail: false,
20              userInfo: res.userInfo,
21              hasUserInfo: true
22              
23            })
24            //平台登录
25          },
26          fail: function (res) {
27            console.log(8);
28            console.log(res);
29            that.setData({
30              getUserInfoFail: true
31            })
32          }
33        })
34      }
35    })
36  },

页面xml中根据这个getUserInfoFail来显示按钮。

1  <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>

当用户点击授权后，弹出一个弹窗，提示他授权，这个时候调用的是getUserInfo这个函数，代码如下：

1  getUserInfo: function(e) {
2    console.log(5);
3    console.log(e)
4    if(e.detail.userInfo){
5      app.globalData.userInfo = e.detail.userInfo
6      this.setData({
7        userInfo: e.detail.userInfo,
8        hasUserInfo: true
9      })
10    }else{
11      this.openSetting();
12    }
13    
14  },

如果我们可以获取到detail.userInfo的值，说明参数正确，用户点击了允许授权。如果用户点击拒绝，这个时候我们就要调用openSetting这个函数。这个函数主要是打开授权的地方，有兼容性问题，低版本不支持。

1  openSetting: function () {
2    var that = this
3    if (wx.openSetting) {
4      wx.openSetting({
5        success: function (res) {
6          console.log(9);
7          //尝试再次登录
8          that.login()
9        }
10      })
11    } else {
12      console.log(10);
13      wx.showModal({
14        title: '授权提示',
15        content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法：删除小程序->重新搜索进入->点击授权按钮'
16      })
17    }
18  }

如果用户进入了授权页后，点击允许我们获取用户信息，返回成功时，我们执行login这个函数，这时，我们就可以进入getuserInfo() 里面拿到授权的信息了。那么头像、用户信息和其它一些个人的资料都可以查到了。 完整的index.js如下：

1  //index.js
2//获取应用实例
3const app = getApp()
4
5Page({
6  data: {
7    motto: 'Hello World',
8    userInfo: {},
9    hasUserInfo: false,
10    getUserInfoFail:false,
11    canIUse: wx.canIUse('button.open-type.getUserInfo')
12  },
13  //事件处理函数
14  bindViewTap: function() {
15    wx.navigateTo({
16      url: '../logs/logs'
17    })
18  },
19  onShow:function(){
20    this.login();
21  },
22  onLoad: function () {
23    
24    if (app.globalData.userInfo) {
25      console.log(1)
26      this.setData({
27        userInfo: app.globalData.userInfo,
28        hasUserInfo: true
29      })
30    } else if (this.data.canIUse){
31      console.log(2)
32      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
33      // 所以此处加入 callback 以防止这种情况
34      app.userInfoReadyCallback = res => {
35        console.log(12)
36        app.globalData.userInfo = res.userInfo
37        this.setData({
38          userInfo: res.userInfo,
39          hasUserInfo: true
40        })
41      }
42    } else {
43      console.log(3)
44      // 在没有 open-type=getUserInfo 版本的兼容处理
45      wx.getUserInfo({
46        success: res => {
47          app.globalData.userInfo = res.userInfo
48          this.setData({
49            userInfo: res.userInfo,
50            hasUserInfo: true
51          })
52        },
53        fail:res=>{
54          console.log(4);
55          this.setData({
56            getUserInfoFail:true
57          })
58        }
59      })
60    }
61  },
62  getUserInfo: function(e) {
63    console.log(5);
64    console.log(e)
65    if(e.detail.userInfo){
66      app.globalData.userInfo = e.detail.userInfo
67      this.setData({
68        userInfo: e.detail.userInfo,
69        hasUserInfo: true
70      })
71    }else{
72      this.openSetting();
73    }
74    
75  },
76  login: function () {
77    console.log(111)
78    var that = this
79    // if (typeof success == "function") {
80    //   console.log(6);
81    //   console.log('success');
82    //   this.data.getUserInfoSuccess = success
83    // }
84    wx.login({
85      success: function (res) {
86        var code = res.code;
87        console.log(code);
88        wx.getUserInfo({
89          success: function (res) {
90            console.log(7);
91            app.globalData.userInfo = res.userInfo
92            that.setData({
93              getUserInfoFail: false,
94              userInfo: res.userInfo,
95              hasUserInfo: true
96              
97            })
98            //平台登录
99          },
100          fail: function (res) {
101            console.log(8);
102            console.log(res);
103            that.setData({
104              getUserInfoFail: true
105            })
106          }
107        })
108      }
109    })
110  },
111  //跳转设置页面授权
112  openSetting: function () {
113    var that = this
114    if (wx.openSetting) {
115      wx.openSetting({
116        success: function (res) {
117          console.log(9);
118          //尝试再次登录
119          that.login()
120        }
121      })
122    } else {
123      console.log(10);
124      wx.showModal({
125        title: '授权提示',
126        content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法：删除小程序->重新搜索进入->点击授权按钮'
127      })
128    }
129  }
130})

index.xml如下

1  <!--index.wxml-->
2<view class="container">
3  <view class="userinfo">
4    <button wx:if="{{!hasUserInfo && canIUse && getUserInfoFail}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
5    <block wx:if="{{hasUserInfo}}">
6      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
7      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
8    </block>
9  </view>
10  <view class="usermotto">
11    <text class="user-motto">{{motto}}</text>
12  </view>
13</view>

至此，我们就完成了用户的流程了。