uni-app APP打开一直处在加载页面loading，无法关闭。

发布于 1周前 作者 itying888 来自 Uni-App

uni-app APP打开一直处在加载页面loading，无法关闭。

操作步骤

  1. 创建一个新的uniapp项目。
  2. 运行到 android status 的模拟器中，不会触发APP.vue的钩子事件函数，一直处在loading页面，真机目前测试安卓14版本偶尔会出现这种情况。

预期结果

正常进入APP

实际结果

无法进入APP

bug描述

直接新建了一个uniapp的项目，什么也没有写。

  1. 运行到手机上(安卓10版本)和mumu模拟器(安卓12版本)没有任何问题。
  2. 运行到另一个手机上(安卓14版本)时，打开APP有时候会一直处启动页面进行loading，有时候可以正常进去，然后我就用Android Status的模拟器进行测试，下载了三个版本。均出现一直loading的情况，APP.vue的两个钩子函数也没有打印：
onLaunch: function() {
  console.log('App Launch')
},
onShow: function() {
  console.log('App Show')
}

Image 1 Image 2 Image 3

开发环境信息

项目创建方式 HBuilderX
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 专业版 版本号 23H2 安装日期 ‎2024/‎6/‎27 操作系统版本 22631.4602 体验 Windows 功能体验包 1000.22700.1055.0
HBuilderX类型 正式
HBuilderX版本号 4.44
手机系统 Android
手机系统版本号 Android 15
手机厂商 模拟器
手机机型 android status的模拟器
页面类型 vue
vue版本 vue3
打包方式 离线

Harmonyos Next教程
4 回复

看描述没啥问题，你同事是否正常，真机是否正常，有没有规律？HBuilderX 内置的空白项目是否正常


我测试真机，安卓10-安卓12没有问题。同事真机是安卓14，偶尔会出现一次打开会一直在启动页面无法关闭，需要重新关闭再打开。 然后Android status的模拟器都打不开，测试也不触发onLaunch和onShow事件。

回复 2***@qq.com: 我使用 vue3+HBuilderX 4.44 创建空白项目，确保 app.vue 有 onlaunch onshow运行到安卓 14 的真机 小米 13， 使用开发模式标准基座运行测试了几次都正常，强杀应用重启也正常

针对您提到的uni-app应用在启动时持续显示加载页面（loading）且无法关闭的问题，这通常与应用的启动流程、页面渲染或数据加载有关。以下是一些可能的原因及相应的代码示例，用于排查和解决该问题。请注意，这些示例基于常见的开发实践，具体实现可能需要根据您的项目结构进行调整。

1. 检查App.vue中的onLaunch方法

App.vue中的onLaunch方法是应用启动时首先执行的地方。确保这里没有阻塞操作或长时间运行的异步任务。

// App.vue
export default {
  onLaunch() {
    // 示例：快速启动，避免阻塞
    console.log('App Launch');
    // 如果需要执行异步操作，请使用Promise或async/await，并确保处理错误
    // this.initAppAsync(); // 假设这是一个异步初始化方法
  },
  methods: {
    async initAppAsync() {
      try {
        // 模拟异步操作
        await new Promise(resolve => setTimeout(resolve, 1000));
        console.log('App Initialized');
      } catch (error) {
        console.error('Initialization Error:', error);
        // 处理错误，可能需要显示错误页面或重置加载状态
      }
    }
  }
}

2. 检查首页的onLoad或mounted生命周期

首页组件的加载状态可能也会影响整个应用的显示。确保首页组件的加载逻辑高效，避免不必要的阻塞。

// pages/index/index.vue
export default {
  data() {
    return {
      loading: true
    };
  },
  async mounted() {
    try {
      // 模拟数据加载
      await new Promise(resolve => setTimeout(resolve, 500));
      this.loading = false;
    } catch (error) {
      console.error('Data Load Error:', error);
      // 处理加载错误，可能需要显示错误提示或保持加载状态为true
    }
  }
}

3. 使用全局加载指示器

如果应用确实需要处理一些启动时的异步操作，考虑实现一个全局的加载指示器，并在操作完成后关闭它。

// 在Vuex或全局状态管理中管理加载状态
// store.js
const store = new Vuex.Store({
  state: {
    isLoading: true
  },
  mutations: {
    setLoading(state, payload) {
      state.isLoading = payload;
    }
  },
  actions: {
    async initApp({ commit }) {
      try {
        // 模拟初始化过程
        await new Promise(resolve => setTimeout(resolve, 2000));
        commit('setLoading', false);
      } catch (error) {
        console.error('Init Error:', error);
        // 处理错误，保持加载状态或显示错误
      }
    }
  }
});

在您的应用中，确保根据实际的异步操作调整上述代码，并在操作完成后正确更新加载状态。如果问题依旧存在，建议进一步检查网络请求、资源加载等可能导致阻塞的环节。

回到顶部