微信小程序如何进行登录授权和获取用户信息

1. 在 index.wxml 点击的 button 按钮中，去进行判断和获取。在button中，设置 open-type 的值 为 getUserInfo， open-type 是微信的开放能力，getUserInfo可以 获取用户信息和可以从bindgetuserinfo回调中获取到用户信息。给 button去绑定 bindgetuserinfo ， bindgetuserinfo 去绑定 handleGetUserInfo事件，代码如下：

<button open-type="getUserInfo" style="display: {{ isShow?'block':'none'}}" bindgetuserinfo="handleGetUserInfo">获取用户登录信息</button>

2. 在 index.js，定义 handleGetUserInfo方法，传入 data , 判断用户点击是否允许。如果 data.detail.rawData的值为 true ，说明用户点击的是允许，那么调用 getUserInfo() 方法，去进行登录授权和获取用户信息，代码如下：

handleGetUserInfo (data) {
    // console.log('用户点击了',data)
    // 判断用户点击是否允许
    if (data.detail.rawData) {
      // 用户点击的是允许
      this.getUserInfo()
    }
  }

3. 在data 中 定义 页面的初始数据， 设置 userInfo的值 为 {}， 设置 isShow 的值为 false， 代码如下：

data: {
    userInfo: {},
    isShow: false
  }

4. 在 index.js 中， 定义 getUserInfo() 方法，第一步先进行判断用户是否授权，可以调用 wx.getSetting 的API方法，当 success 接口调用成功的回调函数，传入 data。AuthSetting是 用户授权设置信息，boolean scope.userInfo 是 AuthSetting的属性，是否授权用户信息，对应接口 wx.getUserInfo。 如果 data.authSetting['scope.userInfo'] 的值 true， 说明用户是授权的，可以进行更改data 中的 isShow 的值，通过 this.setData方法，设置 isShow 为 false，反之则是未授权，设置 isShow 为 true。第二步， 获取用户的登录信息，可以调用 wx.getUserInfo() ，当 success 接口调用成功的回调函数，传入 data , 更新data中的userInfo的信息，通过 this.setData方法，设置userInfo的值 为 data.userInfo。在fail中， 接口调用失败的回调函数，可以打印一下失败的信息，代码如下：

 getUserInfo () { 
    // 判断用户是否授权
    wx.getSetting({
      success: (data) => {
        // console.log(data)
        if (data.authSetting['scope.userInfo']) {
          // 用户已经授权
          this.setData({
            isShow: false
          })
        } else {
          // 用户未授权
          this.setData({
            isShow: true
          })
        }
      }
    })

    // 获取用户的登录信息
    wx.getUserInfo({
      success: (data) => {
        console.log(data)
        // 更新data中的userInfo
        this.setData({
          userInfo: data.userInfo
        })
      },
      fail: () => {
        console.log('获取用户数据失败')
      }
    })
  }

5. 在onLoad 生命周期钩子函数中，onLoad是监听页面的加载，初始化操作，调用 getUserInfo方法，代码如下：

onLoad: function (options) {
    this.getUserInfo()
  }

6. userInfo.avatarUrl 是用户的头像地址，userInfo.nickName是用户的昵称