feat: 新增统一启动屏组件,优化跨平台加载体验

1. 新增splash-screen全局启动屏组件,适配非APP平台的加载过渡
2. 新增splash-state状态管理模块,统一处理启动屏的显示隐藏、软隐藏时序、兜底超时逻辑
3. 重构App.vue和main.js的加载逻辑,替换原有uni.showLoading方案
4. 在首页和空页面挂载启动屏组件,适配不同页面场景
5. 兼容H5平台降级处理,解决main.js挂载前无法渲染组件的问题
This commit is contained in:
2026-07-01 15:36:55 +08:00
parent c0220492a2
commit 5ae4bbcbd3
6 changed files with 420 additions and 19 deletions

15
main.js
View File

@@ -16,6 +16,7 @@ import {
} from './common/js/storage.js'
import configExternal from './common/js/config-external.js'
import PrivacyManager from './common/js/privacy.js'
import splashState from './common/js/splash-state.js'
Vue.prototype.$store = store //挂在vue
@@ -67,26 +68,22 @@ uniStorage();
// 以下代码所有平台共享:
// - lang.js: bootCompleted 标志, boot 未完成时 lang() 返回空串
// - http.js: sendRequest 门控, boot 未完成时业务请求排队
// - App.vue: onLaunch 中 showLoading + await boot + hideLoading
// - splash-state.js: 统一启动屏状态 (H5 降级 uni.showLoading, 小程序/鸿蒙走 splash 组件)
// - App.vue: onLaunch 中 splashState.show() + await boot + splashState.hide()
// ============================================================
// #ifdef H5
// H5: remote-only 下先 await boot 再 $mount(), 首屏直接有翻译数据
// splashState.show() 内部 H5 降级为 uni.showLoading (await 期间 Vue 还没挂载,组件层无法渲染)
async function bootstrap() {
if (Lang.isRemoteOnly && Lang.isRemoteOnly()) {
let _hideLoading = false;
try {
uni.showLoading({ title: '加载中...', mask: true });
_hideLoading = true;
} catch (e) {}
splashState.show();
try {
await Lang.boot();
} catch (e) {
console.warn('[i18n] remote-only boot fail', e);
} finally {
if (_hideLoading) {
try { uni.hideLoading(); } catch (e) {}
}
splashState.hide({ reason: 'boot-complete' });
}
}