当前位置:   article > 正文

uniapp 应用启动onLaunch方法,改为同步,执行后再执行页面加载onLoad方法_uniapp onlaunch

uniapp onlaunch

问题描述

app.vue里的onLaunch中如果有异步方法,返回结果可能会在页面的 onLoad 之后,为了让页面的 onLoad 在 onLaunch 之后执行,使用以下解决方案

方案一

1、main.js添加如下代码

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

2、应用启动时,设置需要等待的逻辑

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

这个方法必须在你的业务如ajax执行完毕后再执行

另外注意要用箭头函数,否则this不好使

  1. onLaunch: function() {
  2. console.log('App Launch');
  3. console.log('倒计时10秒');
  4. setTimeout(() => {
  5. console.log('倒计时结束');
  6. this.$isResolve()
  7. },5000);
  8. },

3、在页面 onLoad 中增加等待代码 await this.$onLaunched

注意onload要添加async,否则编译不过去

  1. async onLoad(option) {
  2. //等待倒计时
  3. await this.$onLaunched;
  4. console.log("等待倒计时结束后打印");
  5. // 后续业务逻辑
  6. },

4、在chrome运行截图如下,小程序等支持ES6环境才行

 5、代码下载

uniapp同步方法实例代码-Javascript文档类资源-CSDN下载

方案二

1、main.js

  1. Vue.prototype.$visitStore = async (option)=>{
  2. //页面入参option
  3. //自己的业务逻辑
  4. //如果是ajax,注意要加同步等待
  5. await Vue.prototype.http.post('/customer/updateLastVisitStoreId',{lastVisitStoreId:storeId}).then(res => {
  6. console.log(res);
  7. }).catch(err => {
  8. console.log(err);
  9. })
  10. }

2、页面

  1. async onLoad(option) {
  2. await this.$visitStore(option);//同步执行这个方法
  3. }
转载自:https://www.lervor.com/archives/128/
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/284416
推荐阅读