龙岩易富通网络科技有限公司

龙岩小程序开发,龙岩分销系统

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

2023.06.02 | 980阅读 | 0条评论 | 小程序

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/


赞 (

发表评论