uniapp中onLaunch和onload的先后执行顺序

onLaunch与onload分别是APP生命周期与页面生命周期，理论上应该先执行onLaunch 后执行页面生命周期onLoad。然而实际上并非如此，在执行onlaunch的同时，也会执行onLoad生命周期，而在实际开发中往往需要优先执行onlaunch后再执行onLoad，因此可以使用当前方法解决。

一、main.js添加如下代码？

代码如下（示例）

// 让页面的 onLoad 在 onLaunch 之后执行

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

    Vue.prototype.$isResolve = resolve

})

二、在 App.vue 的 onLaunch 中增加代码 this.$isResolve()；

代码如下（示例）：

//app.vue生命周期中，onlaunch执行时，执行this.$isResolve()

onLaunch () {

        //发送请求

    uni.request({

        success: loginRes => {       

            // 业务逻辑

            // ...

            // 当执行完业务逻辑，需要同步onload时，调用一下

            this.$isResolve()           

        }

    })

}

三、在页面 onLoad 中增加代码 await this.$onLaunched；

代码如下（示例）：

//onLoad 生命周期函数前，加async/await,用此方法同步执行顺序

        async onLoad() {

               //async/await,当执行完APP生命周期中的onlaunch，再执行页面中的业务逻辑

               await this.$onLaunched;

               //执行页面中的业务逻辑

               //...

        },

个人理解

1先给onLaunch方法套一个promise实例，执行成功后再执行全局挂载的方法，标识当前已经执行完毕。
2.在页面中利用async/await 同步执行代码的方法，实现onLaunch 在 onLoad 之后执行

版权属于：瞭月

本文链接：https://www.lervor.com/archives/128/