在开发中,会有一些判断是在小程序初始化的时候建立的,比如说个人信息同步,同步之后在进行其他页面的相应的操作,查看官方文档发现这个;
APP生命周期
看到这个的时候,豁哈,找到宝了,是不是可开心了;
onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次
按照我们的正常操作,所有需要初始化同步更新的操作,在onLaunch里执行,进行信息同步,然后在其他页面onload的时候再干其他的事情。理论上来说这样没啥问题。
但是!你高兴的太早了!!哈哈哈... (都是泪)
实际上进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过测试可以确定,在小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。(前人的教训)
所以这里我采用的方法是定义回调函数,
在page页面判断一下当前app.globalData.employ是否有值,如果没有,说明是第一次调用,则定义一个(回调函数)
app.employCallback = employ =>{ ...}
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。
//app.js
App({
globalData: {
employ: '',
userInfo: null,
},
onLaunch: function () {
let userInfo = wx.getStorageSync('userInfo') || null,
that = this;
// 更新userInfo
wx.request({
url: '你的地址',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json',
},
method: 'POST',
data: {},
success: function (res) {
if (res.data.status == 0) {
let obj = res.data.data;
that.globalData.userInfo = obj;
wx.setStorageSync('userInfo', userInfo)
} else {
wx.setStorageSync('userInfo', null);
};
that.globalData.employ = true;
/* 由于这里是网络请求,可能会在 Page.onLoad 之后才返回
* 所以此处加入 callback 以防止这种情况 */
if (that.employCallback) {
that.employCallback(true);
}
},
});
},
})
在首页里
//sequence.js
const app = getApp()
Page({
data: {
userInfo:null,
},
onLoad: function () {
let that = this;
if (app.globalData.employ && app.globalData.employ != '') {
console.log("first")
let userInfo = app.globalData.userInfo;
that.setData({
userInfo: userInfo ? userInfo : null
});
} else {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.employCallback = employ => {
if (employ != '') {
that.setData({
userInfo: app.globalData.userInfo
});
}
}
}
}
})
这样就可以实现我们想要的顺序:
[App] onLaunch => [Page] onLoad => [App] onLaunch sucess callback
源码可见github