微信小程序获取用户授权

wx.getUserInfo：此方法就是微信获取用户信息的方法

image.png

可以在成功的回调函数里面打印以下这个方法的实参，看看里面到底是啥

  wx.getUserInfo({
            success: res => {
              console.log(res)
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })

，这个对象里的数据就是我们用户的信息，这样就算是拿到了这个用户的信息了，接下来就是要把他渲染到页面里去了，这个时候需要在data里面定义一个对象来接受一下赋值，将userInfo的值赋给我们定义好的对象
在小程序中赋值不能直接等于号赋值，而需要通过以下方法

 this.setData({
                  userInfo:res.userInfo
                })

这个时候会有一个疑问，如果一个用户已经授权过之后，就不再需要重新弹出授权了，所以需要做一个判断
小程序官方提供了一个方法
wx.getSetting
这个方法同样也有失败和成功的回调函数

wx.getSetting({
      success: res => {
        console.log(res)
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              console.log(res)
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
                this.setData({
                  userInfo:res.userInfo
                })
              }
            }
          })
        }
      }
})

同样，也打印以下这个成功的回调函数里的res，看看里面有什么

image.png

可以看到authSetting里面有一个属性叫scope.userInfo，他的值为true，这个属性就是来判断用户是否授权的
接下来只需要在wx.getSetting方法里加一个判断，如果scope.userInfo的值为true，就不再执行获取用户信息的方法。

image.png

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

image.png

这里官方又提供了一个属性 open-type 在这个属性里绑定以下我们获取信息的方法，如果用户点击了确定的话，就调用获取信息的方法
实际操作后会发现，虽然是获取到了，但是需要重新编译一次才能把数据刷新到页面中

image.png

在这个属性的值里面也放上获取用户信息的方法
通过这个方法来判断出用户是点击了允许还是拒绝，如果允许，就获取信息，拒绝就返回
接下来只需要在用户点击确定的时候，再调用一次获取信息的方法就ok了
实现下来会发现，在生命周期函数中，this的指向会出现问题，会报错，
只需要将原本的写法改成箭头函数的写法就可以解决此问题了