微信小程序的userInfoReadyCallback相关解释

关于微信小程序quickstart项目中的userInfoReadyCallback，大体可以总结以下三点：

1.userInfoReadyCallback这个方法是在page.onload中定义的。

2.如果userInfoReadyCallback方法被定义了，则说明page.onload比当前方法运行的早（page已经完成初始化），app的globalData还没有数据，通过此回调可以及时的刷新数据

3.如果userInfoReadyCallback方法没有被定义，则说明page.onload比当前方法运行的晚（page还没有初始化），app的globalData是有值的，可以在page.onload中取globalData里面的值

以上是百度搜索到的答案。

下面是个人的见解：

app.js

    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
                // 可以将 res 发送给后台解码出 unionId
                that.globalData.userInfo = res.userInfo

                // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                console.log('app1');
                if (that.userInfoReadyCallback) {
                  console.log('app2');
                  that.userInfoReadyCallback(res)
                }
              }, 3000);

            }
          })
        }
      }
    })

index.js

  onLoad: function () {
    if (app.globalData.userInfo) {
      console.log('page1');
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      console.log('page2');
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      // 给app.js 定义一个方法。
      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
          })
        }
      })
    }
  }

讲解之前先明确两点：

1.app.js的wx.getSetting是在onLaunch里面执行的

2.执行顺序：app.onLaunch--->page.onLoad

 
  通过上面代码，可见我在app.js和index.js文件设置了几个输出，以便观察代码执行顺序，以下是执行结果： 
 

图1-1

进入小程序，首先执行app.onLaunch，接着执行wx.getSetting中的wx.getUserInfo，由于wx.getUserInfo是异步执行的，所以在这里可以分为两种情况。

a.在page.onLoad执行之前，wx.getUserInfo已经执行完毕，通过success方法中的that.globalData.userInfo = res.userInfo为userInfo进行赋值，所以当page.onLoad执行判断app.globalData.userInfo的时候，app.globalData.userInfo是有值的，所以输出会【page1】

b.在wx.getUserInfo还没执行完成的时候，也就是还没回调success时，代码仍旧会往下执行。
这时app.onLaunch执行完毕后,会轮到page.onLoad执行。在判断app.globalData.userInfo时，由于app.globalData.userInfo因为wx.getUserInfo还未执行完成，所以没有值，所以会走另一个判断，因此输出了【page2】。

之后，我们可以看到app.userInfoReadyCallback = res =>{}，这是在为app.js定义一个userInfoReadyCallback方法，以便wx.getUserInfo成功执行后，能够赋值给userInfo。当page.onLoad执行完毕之后，此时wx.getUserInfo执行success，会先判断app.userInfoReadyCallback是否被定义，若被定义了则执行这个方法，达到为userInfo进行赋值的目的。

在绝大多数情况下wx.getUserInfo都会先比page.onLoad先执行完成，所以为了达到第二种效果，我们添加一个计时器。

app.js

          wx.getUserInfo({
            success: res => {
              var that = this
              setTimeout(function () {
                // 可以将 res 发送给后台解码出 unionId
                that.globalData.userInfo = res.userInfo

                // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                // 所以此处加入 callback 以防止这种情况
                console.log('app1');
                if (that.userInfoReadyCallback) {
                  console.log('app2');
                  that.userInfoReadyCallback(res)
                }
              }, 3000);

            }
          })

执行结果：

可以看到，会先输出【page2】，然后才是进入到 wx.getUserInfo 的success方法中，输出【app1】 ,接着就是我们所说的执行判断是否定义 userInfoReadyCallback ，最后输出【app2】

微信小程序的userInfoReadyCallback相关解释

猜你喜欢