uniapp 页面onLoad等待小程序onLaunch请求结束（Vue3.0）

你的代码有瑕疵

于 2025-02-21 18:44:23 发布

阅读量308

点赞数 1

文章标签： uni-app 小程序 vue.js

本文链接：https://blog.csdn.net/m0_49337807/article/details/145783520

版权

借助 app.config.globalProperties 来创建一个全局可用的 Promise 对象 $onLaunched 以及一个用于解析该 Promise 的函数 $isResolve。当 onLaunch 中异步执行完毕后调用 $isResolve 来解析 Promise，页面中使用 await $onLaunched 等待 $isResolve 执行即可。

在 main.ts 中添加以下代码，

app.config.globalProperties.$onLaunched = new Promise(resolve => {
  app.config.globalProperties.$isResolve = resolve
})

在这里插入图片描述

app.vue 中加入以下代码

import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any

onLaunch((options?: App.LaunchShowOption) => {
  console.log('onLaunch执行');
  setTimeout(() => {
    proxy.$isResolve()
  }, 3000);
});

index.vue 页面代码如下：

import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as any
onLoad(async () => {
  console.log('onLoad----，等待onLaunched计时结束');
  
  await proxy.$onLaunched
  console.log('onLoad----，onLaunched计时结束!');
});