fix(splash-screen): 修复H5环境下启动屏关闭后页面空白问题
问题根源分析: 1. diy-group 的 mounted() 在组件挂载时就触发了,但此时 diyData 还没有数据 2. otifyMounted() 在组件 mount 时立即关闭了 H5 的 uni.showLoading(),但页面内容还没就绪 3. 导致启动屏关闭后,首页内容还是空白的 修复方案: 1. 在 diy-group.vue 中,将 loaded 事件的触发时机改为 diyData watch 中,确保数据加载完成后再通知 2. 在 splash-state.js 中, otifyMounted() 不再立即关闭 H5 原生 loading,等待页面就绪后由 _doHide() 统一关闭 3. 在 index.js 中,onDiyGroupLoaded() 延迟 500ms 再通知页面就绪,确保内容渲染完成
This commit is contained in:
@@ -231,17 +231,12 @@ class SplashState {
|
|||||||
* 组件 mount 后通知 state 模块
|
* 组件 mount 后通知 state 模块
|
||||||
* - 标记 _hasMounted
|
* - 标记 _hasMounted
|
||||||
* - 如果有 _pendingHide, 触发真关
|
* - 如果有 _pendingHide, 触发真关
|
||||||
* - H5 降级场景: 立即关掉原生 loading, 让 splash 组件接管视觉
|
* - H5 降级场景: 不再立即关掉原生 loading, 等待页面就绪后再关
|
||||||
*/
|
*/
|
||||||
notifyMounted() {
|
notifyMounted() {
|
||||||
if (this._hasMounted) return;
|
if (this._hasMounted) return;
|
||||||
this._hasMounted = true;
|
this._hasMounted = true;
|
||||||
// H5 降级: 立即关掉原生 loading, 避免和 splash 组件重叠
|
|
||||||
if (useNativeLoading()) {
|
|
||||||
try { uni.hideLoading(); } catch (e) {}
|
|
||||||
}
|
|
||||||
if (this._pendingHide) {
|
if (this._pendingHide) {
|
||||||
// 给组件一帧时间渲染, 再隐藏 (避免一帧闪烁)
|
|
||||||
setTimeout(() => this._flushPendingHide(), 50);
|
setTimeout(() => this._flushPendingHide(), 50);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -300,6 +300,7 @@ export default {
|
|||||||
handler() {
|
handler() {
|
||||||
this.diyGlobalData = this.diyData ? this.$util.deepClone(this.diyData) : null;
|
this.diyGlobalData = this.diyData ? this.$util.deepClone(this.diyData) : null;
|
||||||
this.processData();
|
this.processData();
|
||||||
|
this._notifyLoaded();
|
||||||
},
|
},
|
||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
@@ -308,8 +309,9 @@ export default {
|
|||||||
this.processData();
|
this.processData();
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// 通知父组件 diy-group 内容已渲染完毕
|
if (this.diyData && this.diyData.value) {
|
||||||
this.$emit('loaded');
|
this._notifyLoaded();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
topNavColor() {
|
topNavColor() {
|
||||||
@@ -323,7 +325,6 @@ export default {
|
|||||||
|
|
||||||
return topNavColor;
|
return topNavColor;
|
||||||
},
|
},
|
||||||
// 过滤组件的渲染
|
|
||||||
diyDataArray() {
|
diyDataArray() {
|
||||||
if (!this.processedData) {
|
if (!this.processedData) {
|
||||||
this.processData();
|
this.processData();
|
||||||
@@ -347,6 +348,12 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
_notifyLoaded() {
|
||||||
|
if (this._loadedTimer) clearTimeout(this._loadedTimer);
|
||||||
|
this._loadedTimer = setTimeout(() => {
|
||||||
|
this.$emit('loaded');
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
processData() {
|
processData() {
|
||||||
if (!this.diyGlobalData || !this.diyGlobalData.value) {
|
if (!this.diyGlobalData || !this.diyGlobalData.value) {
|
||||||
this.processedData = [];
|
this.processedData = [];
|
||||||
|
|||||||
@@ -127,9 +127,12 @@ export default {
|
|||||||
},
|
},
|
||||||
// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
|
// diy-group 渲染完毕回调, 用于触发版本水印等延后显示元素
|
||||||
// 同时通知 splash-state 页面就绪, 启动屏可以关闭
|
// 同时通知 splash-state 页面就绪, 启动屏可以关闭
|
||||||
|
// 延迟 500ms 是为了确保页面内容有足够时间渲染
|
||||||
onDiyGroupLoaded() {
|
onDiyGroupLoaded() {
|
||||||
this.diyGroupReady = true;
|
this.diyGroupReady = true;
|
||||||
try { splashState.notifyPageReady(); } catch (e) {}
|
setTimeout(() => {
|
||||||
|
try { splashState.notifyPageReady(); } catch (e) {}
|
||||||
|
}, 500);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 版本连击 3 次以上显示构建版本信息(供测试人员使用)
|
* 版本连击 3 次以上显示构建版本信息(供测试人员使用)
|
||||||
|
|||||||
Reference in New Issue
Block a user