uni-app 在华为X5折叠屏手机上运行app时,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide()方法,导致出现闪屏的情况
uni-app 在华为X5折叠屏手机上运行app时,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide()方法,导致出现闪屏的情况
操作步骤:
在华为X5折叠屏手机上,运行app,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide(),出现闪屏的情况
预期结果:
跟不是折叠屏手机一样,正常触发onshow和onhide(),不出现闪屏
实际结果:
一直自动频繁触发,出现闪屏
bug描述:
在华为X5折叠屏手机上,运行app,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide(),出现闪屏的情况
信息类别 | 信息内容 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC开发环境版本 | win11 |
HBuilderX类型 | 正式 |
HBuilderX版本 | 3.99 |
手机系统 | Android |
手机系统版本 | Android 14 |
手机厂商 | 华为 |
手机机型 | 华为X5 |
页面类型 | vue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
更多关于uni-app 在华为X5折叠屏手机上运行app时,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide()方法,导致出现闪屏的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于uni-app 在华为X5折叠屏手机上运行app时,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide()方法,导致出现闪屏的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html
在华为X5折叠屏手机上运行uni-app时,频繁触发app.vue
的onShow
和onHide
方法,导致闪屏的情况,可能与折叠屏的特性有关。折叠屏设备在展开或折叠时,可能会触发应用的重新布局或生命周期事件,进而导致onShow
和onHide
方法的频繁调用。以下是一些可能的解决方案:
1. 优化生命周期事件处理
- 节流或防抖:在
onShow
和onHide
方法中添加节流或防抖逻辑,避免频繁执行某些操作。例如,使用setTimeout
或lodash
的throttle
和debounce
函数。
let timer = null;
export default {
onShow() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
// 执行你的逻辑
}, 300);
},
onHide() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
// 执行你的逻辑
}, 300);
}
}
2. 检测设备状态
- 检测折叠屏状态:通过判断设备的折叠状态,避免在折叠或展开时频繁触发某些操作。可以使用
uni.getSystemInfo
或uni.getSystemInfoSync
获取设备信息,判断是否为折叠屏设备,并根据设备状态调整逻辑。
export default {
onShow() {
const systemInfo = uni.getSystemInfoSync();
if (systemInfo.deviceModel === '华为X5') {
// 折叠屏设备的特殊处理
}
},
onHide() {
// 类似处理
}
}
3. 调整页面布局
- 动态调整布局:在折叠屏设备上,页面布局可能会因为屏幕尺寸的变化而重新渲染。可以通过监听屏幕尺寸变化事件,动态调整页面布局,避免频繁重绘。
export default {
onLoad() {
uni.onWindowResize((res) => {
// 根据屏幕尺寸调整布局
});
}
}