uni-app iOS机型长时间后台运行后tab页面变空白

uni-app iOS机型长时间后台运行后tab页面变空白

开发环境 版本号 项目创建方式
Windows 11.5.2 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：11.5.2

HBuilderX类型：正式

HBuilderX版本号：3.2.5

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone12 pro max

页面类型：vue

打包方式：云端

App下载地址或H5网址：[https://apps.apple.com/cn/app/%E6%A4%B0%E5%AD%90-%E8%BF%90%E5%8A%A8-%E5%BF%85%E5%A4%87/id1481428043](https://apps.apple.com/cn/app/%E6%A4%B0%E5%AD%90-%E8%BF%90%E5%8A%A8-%E5%BF%85%E5%A4%87/id1481428043)

### 操作步骤：
iOS 机型 app 长时间后台，大概 过了几个小时之后 再打开页面 这个时候 有的tab页面会变成空白

### 预期结果：
iOS 机型 app 长时间后台，大概 过了几个小时之后 再打开页面 这个时候 有的tab页面正常使用

### 实际结果：
iOS 机型 app 长时间后台，大概 过了几个小时之后 再打开页面 这个时候 有的tab页面会变成空白

### bug描述：
【报Bug】iOS 机型 app 长时间后台，大概 过了几个小时之后 再打开页面 这个时候 有的tab页面会变成空白

更多关于uni-app iOS机型长时间后台运行后tab页面变空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我也遇到这个问题了

更多关于uni-app iOS机型长时间后台运行后tab页面变空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我也遇到了，后面怎么解决的

看下这个 https://ask.dcloud.net.cn/article/39255

这个问题通常是由于iOS系统在应用长时间后台运行时，为节省内存而主动清理了部分页面资源导致的。当应用从后台恢复时，部分页面（尤其是非活动状态的tab页）可能因资源被回收而无法正常渲染，出现空白。

主要原因：

  1. iOS系统内存管理机制会在应用进入后台一段时间后，自动清理非活动页面的WebView实例以释放内存。
  2. 应用从后台恢复时，部分tab页的WebView可能未被正确重建或重新渲染。

解决方案：

1. 监听应用状态变化 在App.vue中监听应用从后台恢复的事件，主动触发页面刷新：

onShow: function() {
    // 应用从后台恢复时，检查并刷新当前页面
    if (this.$scope && this.$scope.$getAppWebview) {
        const webview = this.$scope.$getAppWebview();
        if (webview) {
            webview.reload();
        }
    }
}

2. 优化页面生命周期管理 在tab页组件中，确保onShow生命周期能正确处理页面恢复：

onShow() {
    // 页面显示时检查数据状态，必要时重新加载数据
    if (!this.dataLoaded || this.pageData.length === 0) {
        this.loadPageData();
    }
}

3. 使用uni-app的页面缓存策略 在pages.json中配置页面缓存：

{
    "path": "pages/tab/tabPage",
    "style": {
        "navigationBarTitleText": "页面标题",
        "enablePullDownRefresh": true,
        "app-plus": {
            "keepAlive": true  // 启用页面缓存
        }
    }
}
回到顶部