微信小程序用户授权

一、获取用户授权设置

开发者可以使用 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来授权登录

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

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

三、进行封装

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

(1)my.wxml

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

    
    
        
        {{user.nickName}}
    

(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
  }
})

你可能感兴趣的:(微信小程序用户授权)