微信小程序用户授权

一、获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态

（1）wx.getSetting获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

• 参数

  
  
• object.success 回调函数 参数
  
• 示例

// 查看是否授权；获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
    wx.getSetting({
      // 调用getSetting接口成功的回调函数
      success(res) {
        // 判断authSetting用户授权结果；scope.userInfo表示是否授权用户信息，对应接口 wx.getUserInfo
        if (res.authSetting['scope.userInfo']) {
            // 获取用户数据的代码
        }
      }
    })

二、获取用户信息

wx.getUserInfo(Object object)获取用户信息API；调用前需要 用户授权 scope.userInfo。

• 参数

  
  
• object.success 回调函数 参数res
  
• 示例

wxml中定义button绑定事件授权登录，其中需要设置open-type="getUserInfo"属性值

// 需要使用button来授权登录
<button type="primary" wx:if="{{!user && canIuse}}" open-type="getUserInfo" bind:getuserinfo="bindGetUserInfo">授权登录</button>

在js文件中获取用户信息头像昵称，但是获取用户信息前需要wx.getSetting用户授权

wx.getUserInfo({
     // 调用getUserInfo接口成功的回调函数
     success: function (res) {
       console.log(res.userInfo)
       }
   }
})

三、进行封装

对授权登录进行封装，当小程序从入口文件app.js文件执行时，就去进行异步用户授权和异步获取用户数据

（1）my.wxml

• 点击按钮，执行bindGetUserInfo获取用户信息事件

<view>
    <button type="primary" wx:if="{{!user && canIuse}}" open-type="getUserInfo" bind:getuserinfo="bindGetUserInfo">授权登录</button>
    <view wx:else class="head-portrait">
        <van-image round width="200rpx" height="200rpx" fit="cover" src="{{user.avatarUrl}}"></van-image>
        <text class="nickName">{{user.nickName}}</text>
    </view>
</view>

（2）my.js

• 当app.js请求用户授权异步过程中，页面先执行到my.js文件时；为了避免一直等在app.js的请求。我们给app小程序实例定义一个名为callBackGetUserInfo的回调函数;当app实例异步操作加载用户数据完成以后，将数据传过来显示过来

// 获取app示例
const app = getApp();
Page({

    /**
     * 页面的初始数据
     */
    data: {
        canIuse: wx.canIUse('button.open-type.getUserInfo'),
        user: null
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log("app.globalData.userInfo>>>", app.globalData.userInfo);
        if (app.globalData.userInfo) {
            this.setData({
                user: app.globalData.userInfo
            })
        }else {
            // 给app 小程序实例定义一个名为callBackGetUserInfo的回调函数;当app实例异步操作加载用户数据完成以后，将数据传过来显示过来
            app.callBackGetUserInfo = res => {
                app.globalData.userInfo = res.userInfo;
                this.setData({userInfo:res.userInfo})
            }
        }
    },

    /**
     * 授权登录事件
     */
    bindGetUserInfo: function (e) {
        console.log(e.detail.userInfo);
        this.setData({
            user: e.detail.userInfo
        })
    }
})

（3）app.js

App({
  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log("小程序初始化onLaunch >>>");
    const _this = this;
    // 查看是否授权；获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限
    wx.getSetting({
      // 调用getSetting接口成功的回调函数
      success(res) {
        // 判断authSetting用户授权结果；scope.userInfo表示是否授权用户信息，对应接口 wx.getUserInfo
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取用户信息头像昵称
          wx.getUserInfo({
            // 调用getUserInfo接口成功的回调函数
            success: function (res) {
              console.log(res.userInfo)
              _this.globalData.userInfo = res.userInfo;
              // 如果app实例的回调函数存在的话，则去执行这个回调函数
              if (_this.callBackGetUserInfo) {
                _this.callBackGetUserInfo(res.userInfo)
              }
            }
          })
        }
      }
    })
  },

  globalData:{
    message: '',
    userInfo: null
  }
})