您现在的位置: 微信小程序 > 微信小程序开发 > 教程 >

微信小程序使用回调解决onLoad与onLaunch执行顺讯问题的终极分析 ...

来源:微信小程序 编辑:Yiyongtong.com 发布时间:2018-06-12 10:40热度:

userInfoReadyCallback 在页面中定义,在 app.js 中使用,使用场景是你需要获取完用户信息之后立即使用。如果你是在一进落地页就把用户信息存本地,然后进入个人中心页面再从本地取出来,是不需要使用这个的。

附app.js代码:

// 获取用户信息
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)
            }
        }
      })
    }
  }
})
if (this.userInfoReadyCallback) {
  this.userInfoReadyCallback(res)
}

上面这句是判断 userInfoReadyCallback 是否定义了,若没定义,说明其在 Page.onLoad 定义 userInfoReadCallback 之前运行的,说明 app.globalInfo.userInfo 已经包含了用户登录的信息了。若定义了,说明 Page.onLoad 在该语句返回的 success 结果之前已经运行了。但是页面获取的 app.globalInfo.userInfo 的值是空的,所以还需要再重新对其进行赋值(并不是重新执行方法,只是重新复制)。

再附上index.js代码:

//获取应用实例
const app = getApp()
Page({
    onLoad: function () {
        if(app.globalData.userInfo) {
            // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
           // 所以此处加入 callback 以防止这种情况
           app.userInfoReadyCallback = res => {
               this.setData({
                   userInfo: res.userInfo
               })
            }
        } else {
          this.setData({
             userInfo: app.globalData.userInfo
          })
        }
    }   
})

Page.onLoad 中首先会判断 app.globalData.userInfo 是否存在,如果不存在,就在全局定义一个函数 userInfoReadyCallback,这个函数的作用是接收全局登录返回的用户数据,并存到页面中。

总结:这种模式是通过判断一个全局变量是否存在来决定是否执行回调的。如果这个全局变量不存在,也就是说 Page.onLoad 在 App.onLaunch 执行完之前执行了,那么我们就在 Page.onLoad 中挂载一个回调函数,等 App.onLaunch 执行完所有的异步后会判断全局是否定义了这个回调函数,如果定义了,就调用这个回调重新赋值。