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:
15
main.js
15
main.js
@@ -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' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user