uni-app 再次打开切换白屏

uni-app 再次打开切换白屏

# 产品分类
uniapp/App

# PC开发环境
| 操作系统 | 版本号 |
|----------|--------|
| Windows  | 10     |

# 手机环境
| 系统   | 版本号   | 厂商 | 机型 |
|--------|----------|------|------|
| iOS    | iOS 15   | 苹果 | 12   |

# 开发工具
| 工具     | 类型   | 版本号   |
|----------|--------|----------|
| HBuilderX| 正式   | 3.2.15   |

# 页面相关信息
| 类型 | 版本 |
|------|------|
| vue  | vue2 |

# 打包与项目创建
| 方式 | 创建工具 |
|------|----------|
| 云端 | HBuilderX |

## 操作步骤
- 打开app后放置等会再打开

## 预期结果
- 每次打开app切换其他tabbar都应该有数据，不应该白屏

## 实际结果
- 打开app切换其他tabbar白屏

## bug描述
- app再次打开时，除了当前打开页面，切换其他tabbar 都是白屏 

![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20211129/cb17e5203fc71c2c02753e1ec4ff5b8b.png)

更多关于uni-app 再次打开切换白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

@DCloud_heavensoft

更多关于uni-app 再次打开切换白屏的实战教程也可以访问 https://www.itying.com/category-93-b0.html


@@DCloud_iOS_WZT

appid私发我下

这是一个典型的uni-app应用在iOS平台上的页面缓存与生命周期管理问题。当应用进入后台再返回时，某些页面可能出现白屏，通常与以下原因有关：

  1. 页面未正确销毁与重建：应用进入后台后，系统可能回收部分内存，导致页面实例被销毁。再次返回时，如果页面依赖的组件或数据未重新初始化，就会白屏。

  2. Vue实例未正常恢复：在iOS上，应用从后台恢复时，Vue组件的activated生命周期可能未被正确触发，导致页面渲染失败。

解决方案：

方法一：强制页面刷新 在tabbar页面的onShow生命周期中，重新加载关键数据或强制更新DOM：

onShow() {
  // 重新获取数据
  this.loadData()
  // 或强制更新视图
  this.$forceUpdate()
}

方法二：使用uni.onAppShow全局监听 在App.vue中监听应用从后台返回的事件，并通知当前页面刷新：

onLaunch() {
  uni.onAppShow((res) => {
    // 应用从后台返回时，通知页面更新
    uni.$emit('appShow')
  })
}

在tabbar页面中监听该事件：

onLoad() {
  uni.$on('appShow', () => {
    this.loadData()
  })
}

方法三：禁用页面缓存 对于需要实时数据的页面，可以在pages.json中配置页面禁用缓存：

{
  "path": "pages/tabbar/page",
  "style": {
    "navigationBarTitleText": "页面标题",
    "enablePullDownRefresh": false,
    "disableScroll": false,
    "app-plus": {
      "bounce": "vertical",
      "titleNView": false,
      "scrollIndicator": false,
      "popGesture": "close",
      "animationType": "slide-in-right",
      "animationDuration": 200,
      "background": "#efeff4"
    }
  }
}

方法四：检查组件异步加载 确保页面中的异步组件加载有正确的错误处理和回退机制：

// 使用v-if控制组件渲染
<template>
  <view v-if="dataLoaded">
    <!-- 页面内容 -->
  </view>
  <view v-else>
    <!-- 加载状态 -->
  </view>
</template>
回到顶部