uniapp 应用启动 onLaunch 方法,改为同步,执行后再执行页面加载 onLoad 方法
问题描述
app.vue 里的 onLaunch 中如果有异步方法,返回结果可能会在页面的 onLoad 之后,为了让页面的 onLoad 在 onLaunch 之后执行,使用以下解决方案
方案一
main.js 添加如下代码
Vue.prototype.$onLaunched = new Promise((resolve) => {
Vue.prototype.$isResolve = resolve
})
应用启动时,设置需要等待的逻辑
在 App.vue 的 onLaunch 中增加代码 this.$isResolve()
这个方法必须在你的业务如 ajax 执行完毕后再执行
另外注意要用箭头函数,否则 this 不好使
onLaunch: function() {
console.log('App Launch');
console.log('倒计时10秒');
setTimeout(() => {
console.log('倒计时结束');
this.$isResolve()
},5000);
},
在页面 onLoad 中增加等待代码 await this.$onLaunched
async onLoad(option) {
//等待倒计时
await this.$onLaunched;
console.log("等待倒计时结束后打印");
// 后续业务逻辑
},
方案二
main.js
Vue.prototype.$visitStore = async (option) => {
//页面入参option
//自己的业务逻辑
//如果是ajax,注意要加同步等待
await Vue.prototype.http
.post("/customer/updateLastVisitStoreId", { lastVisitStoreId: storeId })
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})
}
页面
async onLoad(option) {
await this.$visitStore(option);//同步执行这个方法
}
