uni-app 在 Android App 中，页面的 onLoad 阶段调用 uni.showLoading() 没有效果

uni-app 在 Android App 中，页面的 onLoad 阶段调用 uni.showLoading() 没有效果

示例代码：

function delay(time) {  
    return new Promise((resolve, reject) => setTimeout(() => resolve(), time));  
}  

export default {  
    onLoad() {  
        console.log('Start loading ...');  
        uni.showLoading();  
        await delay(3000);  
        uni.hideLoading();  
        console.log('Load completed.');  
    }  
};

操作步骤：

  1. 新建一个 uni-app 项目，在主页插入脚本代码，然后本地打包成 Android App。
  2. 使用 Android Studio 的调试功能或打包成 .apk 文件后实机安装调试。

预期结果：

在页面加载时应当出现加载框

实际结果：

并没有在正确的时间出现加载框。

bug描述：

自己按照官网提供的打包方式进行打包，结果在页面中的 onLoad 生命周期调用 uni.showLoading 时没有反应。后续代码执行正常，而且从 logcat 中看不出有什么异常。

不论是 nvue 页面还是 vue 页面都会有这个问题。

同样的问题在实机调试和云端打包时就没有出现。请问是否是我在打包时漏掉了什么 lib 文件？或者是某些设置不正确导致的？


### 表格

| 项目         | 值             |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Windows        |
| PC操作系统版本 | Windows 10 20H2 |
| HBuilderX类型 | 正式           |
| HBuilderX版本 | 3.1.8          |
| 手机系统     | Android        |
| 手机系统版本 | Android 11     |
| 手机厂商     | 努比亚          |
| 手机机型     | NX629J         |
| 页面类型     | vue            |
| 打包方式     | 离线           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app 在 Android App 中，页面的 onLoad 阶段调用 uni.showLoading() 没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我也遇到了这个问题，把onLoad 换成 mounted 就行了

更多关于uni-app 在 Android App 中，页面的 onLoad 阶段调用 uni.showLoading() 没有效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的异步时序问题。在 onLoad 阶段直接调用 uni.showLoading() 时，由于页面渲染尚未完成，可能导致加载框无法正常显示。

解决方案：

  1. 使用 setTimeout 延迟执行：
onLoad() {
    console.log('Start loading ...');
    setTimeout(() => {
        uni.showLoading();
    }, 0);
    // 后续代码...
}
  1. 在 onReady 生命周期中调用：
onReady() {
    uni.showLoading();
    // 后续代码...
}
  1. 使用 nextTick：
onLoad() {
    this.$nextTick(() => {
        uni.showLoading();
    });
}
回到顶部