【微信小程序】wx.getUserProfile()登录流程

2,359 阅读3分钟

由于微信在最近开始要求使用wx.getUserProfile()来获取用户的昵称,头像等信息。而且在用户已授权的前提下,不再支持静默获取以上的用户信息。针对这个改动,也将自己小程序的登录逻辑进行了相应的修改,下面是此次修改设置的流程图:

流程图

小程序启动时的业务逻辑

提示用户授权时的业务逻辑

相关的业务代码如下:

小程序加载及初始化时的业务逻辑

//app.js
const httpClient = require('utils/httpClient');
const urlConfig = require('utils/config');
App({
  onLaunch: function () {
    //获取本地缓存的Token
    this.initGlobalToken();
    //todo 获取本地保存的用户信息,如果存在就设置,不存在由接口去刷新缓存
    this.initUserInfo();
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        console.log(res)
        let body = new Object();
        body.code = res.code;
        httpClient.doPost(urlConfig.urlList.userInfoUrl, new Object, body)
          .then(success => {
            //成功登陆就缓存到本地用户信息
            console.log("get user info success: " + JSON.stringify(success.data))
            //保存到全局变量
            let unionId = success.data.token.unionid;
            let userInfo = success.data.userinfo;
            this.globalData.unionId = unionId;
            this.globalData.userInfo = userInfo;
            this.storeUserInfo(userInfo, unionId)
            //同时刷新本地的用户信息缓存
            //将用户信息保存到本地
          }, fail => {
            //登陆失败就尝试从缓存中获取用户信息
            //获取本地缓存的用户信息
            console.log("get user info fail: " + JSON.stringify(fail))
            this.initUserInfo();
          });
      }
    })
  },

  //同步获取用户缓存的Token
  initGlobalToken: function () {
    try {
      let that = this;
      //同步获取保存的Token 即将获取的值直接进行赋值
      let token = wx.getStorageSync('Authorization');
      if (token) {
        console.log('getStorageSync token from cache success: ' + token);
        that.globalData.token = cache.data;
      } else {
        console.log('getStorageSync token from cache fail: ' + JSON.stringify(token));
      }
    } catch (e) {
      console.log('getStorageSync token from cache fail: ' + e);
    }
  },

  //异步获取用户本地缓存的UserInfo
  initUserInfo: function () {
    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      console.log("initUserInfo from cache success")
      this.globalData.userInfo = userInfo;
    }

    let unionId = wx.getStorageSync('unionId');
    if (unionId) {
      console.log("initUnionId from cache success")
      this.globalData.unionId = unionId;
    }
    //两者都存在才设置为保存用户信息
    if (userInfo && unionId) {
      this.globalData.hasUserInfo = true;
    }
  },

  //存储用户信息和UnionId
  storeUserInfo: function (userInfo, unionId) {
    wx.setStorage({
      key: 'unionId',
      data: unionId,
      success: success => {
        console.log("store unionId success:" + JSON.stringify(success))
      },
      fail: fail => {
        console.log("store unionId fail:" + JSON.stringify(fail))
      }
    });
    let userInfoString = JSON.stringify(userInfo);
    console.log(userInfoString)
    wx.setStorage({
      key: 'userInfo',
      data: userInfo,
      success: success => {
        console.log("store userInfo success:" + JSON.stringify(success))
      },
      fail: fail => {
        console.log("store userInfo fail:" + JSON.stringify(fail))
      }
    });
  },

  //异步全局刷新Token
  refreshGlobalToken: function () {
    let that = this;
    //异步获取保存的Token
    wx.getStorage({
      key: 'Authorization',
      //成功获取到缓存 保存到全局变量中
      success: cache => {
        console.log('getStorage token from cache success: ' + cache.data)
        //获取到了Token才更新Token
        if (cache.data) {
          that.globalData.token = cache.data
          console.log(that.globalData)
        }

      },
      // 获取失败就失败
      fail: e => {
        console.log('getStorage token from cache fail: ' + e.errMsg)
      }
    })
  },

  //当前是否拥有用户信息
  hasUserInfo: function () {
    if (this.globalData.userInfo) {
      return true;
    }
    return false;
  },

  globalData: {
    token: null,
    notifyLoginTip: false,
    unionId: null,
    userInfo: null,
    hasUserInfo: false
  }
})

提示登录和授权页面

提示登录的组件wxml文件 组件

提示授权按钮页面

提示授权页面

绑定用户信息成功页面

绑定用户信息成功页面

授权页面点击事件业务逻辑

登录按钮绑定的点击事件代码

// pages/me/me.js
//获取应用实例
const app = getApp();
const httpClient = require('../../utils/httpClient');
const urlList = require('../../utils/config');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    motto: 'Hello World',
    userInfo: app.globalData.userInfo,
    hasUserInfo: app.globalData.hasUserInfo,
    mes: "",
    showError: false,
    toptipsType: "success"
  },

  //事件处理函数
  bindViewTap: function () {
    console.log(app.globalData);
    wx.navigateTo({
      url: '/pages/login/login'
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  getUserInfo: function (e) {
    wx.getUserProfile({
      desc: '完善用户信息',
      success: res => {
        app.globalData.userInfo = res.userInfo;
        this.bindUserInfo(app.globalData.userInfo, app.globalData.unionId);
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      },
      fail: fail => {

      }
    })
  },

  //绑定用户的UserInfo和OpenId
  bindUserInfo: function (userInfo, unionId) {
    if (userInfo && unionId) {
      this.showTopTips("绑定信息成功", "success")
      let body = new Object();
      body.user_info = userInfo;
      body.union_id = unionId;
      console.log('bindUserInfo')
      console.log(unionId)
      console.log(JSON.stringify(userInfo))
      httpClient.doPost(urlList.urlList.addUserInfoUrl, null, body).then(
        success => {
          //更新缓存中的userInfo
          console.log("bindUserInfo success " + JSON.stringify(success))
        },
        fail => {
          console.log("bindUserInfo fail " + JSON.stringify(fail))
          this.showTopTips("绑定信息异常,请检查网络或重试", "error")
        }
      )
    } else {
      this.showTopTips("绑定信息异常,请检查网络或重试", "error")
    }
  },

  //展示topTip数据
  showTopTips: function (mes, toptipsType) {
    this.setData({
      mes: mes,
      showError: true,
      toptipsType: toptipsType
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})