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

1 回复

更多关于uni-app 在华为X5折叠屏手机上运行app时,通过输出日志显示,一直在频繁触发app.vue的onshow和onhide()方法,导致出现闪屏的情况的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在华为X5折叠屏手机上运行uni-app时,频繁触发app.vueonShowonHide方法,导致闪屏的情况,可能与折叠屏的特性有关。折叠屏设备在展开或折叠时,可能会触发应用的重新布局或生命周期事件,进而导致onShowonHide方法的频繁调用。以下是一些可能的解决方案:

1. 优化生命周期事件处理

  • 节流或防抖:在onShowonHide方法中添加节流或防抖逻辑,避免频繁执行某些操作。例如,使用setTimeoutlodashthrottledebounce函数。
let timer = null;
export default {
    onShow() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            // 执行你的逻辑
        }, 300);
    },
    onHide() {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            // 执行你的逻辑
        }, 300);
    }
}

2. 检测设备状态

  • 检测折叠屏状态:通过判断设备的折叠状态,避免在折叠或展开时频繁触发某些操作。可以使用uni.getSystemInfouni.getSystemInfoSync获取设备信息,判断是否为折叠屏设备,并根据设备状态调整逻辑。
export default {
    onShow() {
        const systemInfo = uni.getSystemInfoSync();
        if (systemInfo.deviceModel === '华为X5') {
            // 折叠屏设备的特殊处理
        }
    },
    onHide() {
        // 类似处理
    }
}

3. 调整页面布局

  • 动态调整布局:在折叠屏设备上,页面布局可能会因为屏幕尺寸的变化而重新渲染。可以通过监听屏幕尺寸变化事件,动态调整页面布局,避免频繁重绘。
export default {
    onLoad() {
        uni.onWindowResize((res) => {
            // 根据屏幕尺寸调整布局
        });
    }
}
回到顶部