微信小程序 res =>的意义及userInfoReadyCallback函数的作用

冷不防 2022-05-23 13:53 1151阅读 0赞

**刚开始接触微信小程序，想写个迷你计算器的小程序，感觉开发挺方便的，当准备使用用户信息时，打算看一下它是怎么获取用户信息的，为之后获取用户openid准备。获取用户信息主要在app.js 和 index.js中**

**代码中的 `res =>`可以理解为`function(res)`，其中res即为返回的数据结果对象，不知道又是哪新出的语法规则(后来补充，这个是ES6的箭头函数，https://blog.csdn.net/zjw\_python/article/details/80880208)**

app.js

App({
      onLaunch: function () {
        // 展示本地存储能力
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
    
        // 登录
        wx.login({
          success: res => {
          }
        })
        // 获取用户信息
        wx.getSetting({            
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  this.globalData.userInfo = res.userInfo
                  
                  // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                  // 所以此处加入 callback 以防止这种情况
                  if (this.userInfoReadyCallback) {
                    this.userInfoReadyCallback(res)
                  }
                }
              })
            }
          }
        })
      },
      globalData: {
        userInfo: null,
      }
    })

index.js

/index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        motto: '欢迎使用迷你计算器',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
    
      getUserInfo: function(e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      }
    })

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

*  **在index页面加载完成之前返回**：此时优先执行app.js中success函数的代码，`app.globalData.userInfo`就保存了用户信息。运行到这里时，由于`userInfoReadyCallback`函数是在index.onload中定义的，因此此时该函数并没有被定义，所以不执行该函数。之后执行index.js中onload中的代码，执行第一个if分支，赋值给页面的`userInfo`和`hasUserInfo`

if (this.userInfoReadyCallback) {
           this.userInfoReadyCallback(res)
        }

*  **在index页面加载完成之后返回**：此时优先执行index.js中onload中的代码，由于用户信息还没有返回，所以`app.globalData.userInfo`为null，执行第二个if分支，定义`userInfoReadyCallback`函数。随后数据被返回，执行success的代码，`app.globalData.userInfo`在此时才保存了用户的信息，并执行`userInfoReadyCallback`函数，赋值给页面的`userInfo`和`hasUserInfo`

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

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220523/7661db6401ed481fad93a7f7d5702e40.png