参考链接https://blog.csdn.net/LMXQH/article/details/80490035
关于微信小程序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】