uni-app部分华为鸿蒙手机回退后页面不显示

测试过的手机：

有问题的设备

华为nova5 pro, HarmonyOS 3.0.0
华为HONOR X10, HarmonyOS 3.0.0

正常的设备

华为nova10 SE, HarmonyOS 4.0.0
OPPO Reno9 pro+, Android13
vivo V1838A, Android10

示例代码：

页面跳转代码

uni.navigateTo({  
url: `/pages/countryside/configCabinet/index?activateId=${state.activateId}`,  
});

操作步骤：

每次必现

预期结果：

按物理返回键或者标题栏左上角返回键，应该一级一级页面回退

实际结果：

回退时，页面不显示，但是onShow()回调是执行了的


## bug描述：
- 原生Android 接入uni sdk的方式。Uniapp 使用 uni.navigateTo 从A -> B -> C -> D 跳转，然后使用物理返回键（或标题栏返回键），回到A，但是中途B不显示了（但是onShow是执行了的），用户看见的就是D->C->A 了，请问这个问题怎么解决？
- 异常的设备
  - 1. 华为nova5 pro, HarmonyOS 3.0.0
  - 2. 华为HONOR X10, HarmonyOS 3.0.0
- 正常的设备
  - 1. 华为nova10 SE, HarmonyOS 4.0.0
  - 2. OPPO Reno9 pro+, Android13
  - 3. vivo V1838A, Android10
- 编译ide : HBuilder 3.96
- uni: "[@dcloudio](/user/dcloudio)/uni-app": "3.0.0-3090620231104002"
- Android: 使用的 SDK-Android@3.96-20231106 相关aar文件

更多关于uni-app部分华为鸿蒙手机回退后页面不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

vueper 1楼•8 天前作者

已解决！

更多关于uni-app部分华为鸿蒙手机回退后页面不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

bupafengyu 2楼•8 天前

可以说下解决思路吗，方便后续遇到相似问题的用户排查问题

itying888 3楼•8 天前

在 uni-app 开发中，部分华为鸿蒙手机在页面回退后出现页面不显示的问题，可能是由于以下原因导致的。以下是一些可能的原因和解决方案：

1. 页面生命周期问题

原因：在鸿蒙系统中，页面回退时，uni-app 的生命周期可能没有正确触发，导致页面没有重新渲染。

解决方案：

在 onShow 生命周期中手动刷新页面数据或重新渲染页面。

示例：

onShow() {
    this.loadData(); // 重新加载数据
    this.$forceUpdate(); // 强制更新页面
}

2. 页面缓存问题

原因：uni-app 默认会缓存页面，回退时可能直接从缓存中读取页面，导致页面内容没有更新。

解决方案：

在 pages.json 中禁用页面缓存：

{
    "path": "pages/yourPage",
    "style": {
        "navigationBarTitleText": "Your Page",
        "disableScroll": false,
        "enablePullDownRefresh": false,
        "onReachBottomDistance": 50,
        "disableSwipeBack": false,
        "navigationBarShadow": false,
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "backgroundColor": "#ffffff",
        "backgroundTextStyle": "dark",
        "enableCache": false // 禁用页面缓存
    }
}

3. 鸿蒙系统兼容性问题

原因：鸿蒙系统与 uni-app 的某些 API 或渲染机制可能存在兼容性问题。

解决方案：

确保 uni-app 和 HBuilderX 是最新版本，以获得最新的兼容性修复。

在 manifest.json 中检查并调整鸿蒙系统的配置：

"app-plus": {
    "distribute": {
        "android": {
            "minSdkVersion": 21,
            "targetSdkVersion": 30
        }
    }
}

4. 页面堆栈问题

原因：页面回退时，页面堆栈可能没有正确清理，导致页面无法正常显示。
解决方案：
- 使用 uni.navigateBack 时，确保 delta 参数正确设置。
- 示例：
```
uni.navigateBack({
    delta: 1 // 回退到上一页
});
```

5. 样式或布局问题

原因：页面回退后，样式或布局可能没有正确应用。
解决方案：
- 检查页面样式，确保没有使用可能导致布局异常的样式。
- 使用 uni-app 提供的 rpx 单位，确保布局在不同设备上适配。

6. 调试与日志

原因：问题可能由于某些隐藏的逻辑错误导致。

解决方案：

在页面生命周期中添加日志，检查页面回退时的执行流程。

示例：

onShow() {
    console.log('页面显示');
}
onHide() {
    console.log('页面隐藏');
}