获取用户信息主要在app.js 和 index.js中

app.js

  1. App({
  2.   onLaunch: function () {
  3.     // 展示本地存储能力
  4.     var logs = wx.getStorageSync('logs') || []
  5.     logs.unshift(Date.now())
  6.     wx.setStorageSync('logs', logs)
  8.     // 登录
  9.     wx.login({
  10.       success: res => {
  11.       }
  12.     })
  13.     // 获取用户信息
  14.     wx.getSetting({            
  15.       success: res => {
  16.         if (res.authSetting['scope.userInfo']) {
  17.           // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
  18.           wx.getUserInfo({
  19.             success: res => {
  20.               // 可以将 res 发送给后台解码出 unionId
  21.               this.globalData.userInfo = res.userInfo
  23.               // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  24.               // 所以此处加入 callback 以防止这种情况
  25.               if (this.userInfoReadyCallback) {
  26.                 this.userInfoReadyCallback(res)
  27.               }
  28.             }
  29.           })
  30.         }
  31.       }
  32.     })
  33.   },
  34.   globalData: {
  35.     userInfo: null,
  36.   }
  37. })

index.js

  1. //获取应用实例
  2. const app = getApp()
  4. Page({
  5.   data: {
  6.     motto: '欢迎使用迷你计算器',
  7.     userInfo: {},
  8.     hasUserInfo: false,
  9.     canIUse: wx.canIUse('button.open-type.getUserInfo')
  10.   },
  11.   //事件处理函数
  12.   bindViewTap: function() {
  13.     wx.navigateTo({
  14.       url: '../logs/logs'
  15.     })
  16.   },
  18.   onLoad: function () {
  19.     if (app.globalData.userInfo) {
  20.       this.setData({
  21.         userInfo: app.globalData.userInfo,
  22.         hasUserInfo: true
  23.       })
  24.     } else if (this.data.canIUse){
  25.       // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
  26.       // 所以此处加入 callback 以防止这种情况
  27.       app.userInfoReadyCallback = res => {
  28.         this.setData({
  29.           userInfo: res.userInfo,
  30.           hasUserInfo: true
  31.         })
  32.       }
  33.     } else {
  34.       // 在没有 open-type=getUserInfo 版本的兼容处理
  35.       wx.getUserInfo({
  36.         success: res => {
  37.           app.globalData.userInfo = res.userInfo
  38.           this.setData({
  39.             userInfo: res.userInfo,
  40.             hasUserInfo: true
  41.           })
  42.         }
  43.       })
  44.     }
  45.   },
  47.   getUserInfo: function(e) {
  48.     console.log(e)
  49.     app.globalData.userInfo = e.detail.userInfo
  50.     this.setData({
  51.       userInfo: e.detail.userInfo,
  52.       hasUserInfo: true
  53.     })
  54.   }
  55. })

首先执行的是app.js的wx.getUserInfo，这个是获取用户信息的网络请求，由于其返回结果不知道在index页面加载完成之前还是之后完成，因此分为两种情况：

  • 在index页面加载完成之前返回：此时优先执行app.js中success函数的代码，app.globalData.userInfo就保存了用户信息。运行到这里时，由于userInfoReadyCallback函数是在index.onload中定义的，因此此时该函数并没有被定义，所以不执行该函数。之后执行index.js中onload中的代码，执行第一个if分支，赋值给页面的userInfo和hasUserInfo
  1. if (this.userInfoReadyCallback) {
  2.        this.userInfoReadyCallback(res)
  3.     }
  • 在index页面加载完成之后返回：此时优先执行index.js中onload中的代码，由于用户信息还没有返回，所以app.globalData.userInfo为null，执行第二个if分支，定义userInfoReadyCallback函数。随后数据被返回，执行success的代码，app.globalData.userInfo在此时才保存了用户的信息，并执行userInfoReadyCallback函数，赋值给页面的userInfo和hasUserInfo

userInfoReadyCallback函数的作用，就是保证页面的userInfo和hasUserInfo被正确赋值，无论用户信息在页面加载完成之前还是之后返回。