uni-app中App.vue的onLaunch函数和页面的onLoad函数异步问题的解决方案

应用生命周期函数 onLaunch 和页面生命周期函数 onLoad 存在同时执行的问题,而在实际开发中往往需要先执行 onLaunch 再执行 onLoad,为了让页面的 onLoad 在 onLaunch 之后执行,可以使用以下解决方案:

1 修改 main.js

Vue.prototype.$onLaunched = new Promise(resolve => {
    Vue.prototype.$isResolve = resolve
})

2 修改 App.vue

在 App.vue 的 onLaunch 所有业务逻辑执行完毕后增加代码 this.$isResolve()

onLaunch: function() {
	this.getConfig().then(res => {
	    // 业务逻辑执行完毕
    	this.$isResolve()
	})
},

或者

async onLaunch: function() {
	await this.getConfig()
	// 业务逻辑执行完毕
    this.$isResolve()
},

3 修改页面

在页面的 onLoad 中增加代码 await this.$onLaunched,注意onload要添加async

async onLoad(option) {
	//等待倒计时	
	await this.$onLaunched;
	// 后续业务逻辑
},

你可能感兴趣的:(uni-app,javascript,前端)