uniapp跳转新页面返回白屏怎么解决

1. 问题描述

笔者最近在开发uniapp项目时，遇到了一个常见的问题，就是当从当前页面跳转到新页面后，再返回时会出现白屏。这种情况一直困扰着开发调试过程，下面将详细介绍这个问题的原因以及如何解决。

2. 问题原因

造成这个问题的原因是uni-app采用了多页面的方式实现单页面应用，而且每次切换页面时，都会调用新页面的生命周期函数来加载页面。当我们从一个页面跳转到另一个页面后，如果在新页面中进行了DOM操作，这样会增加页面加载时间，影响用户体验。

而当我们从新页面返回到原页面时，原页面的生命周期函数并没有被调用，导致无法正确地加载DOM。这就是出现白屏的原因。

3. 解决方案

3.1 利用vue的keep-alive组件

可以使用vue的keep-alive组件来缓存页面，避免页面被销毁，加快页面的加载速度。该组件可以保存页面状态和数据，从而提升了用户体验。

在uniapp中，使用keep-alive组件的方式如下：

// 在App.vue中注册keep-alive组件
<template>
  <keep-alive>
    <router-view />
  </keep-alive>
</template>

注意，在使用keep-alive组件时，需要将其放在App.vue文件中，并且包裹<router-view>组件。

3.2 利用uni-app提供的页面缓存机制

uni-app提供了页面缓存机制，可以缓存页面的状态和数据，避免页面被销毁，加快页面的加载速度，从而提升了用户体验。

在uni-app中，可以在页面配置文件page.json中设置页面缓存方式：

{
  "usingComponents": {},
  "navigationBarTitleText": "Page",
  "enablePullDownRefresh": false,
  "backgroundTextStyle": "dark",
  "backgroundColor": "#f8f8f8",
  "usingComponents": {},
  "disableScroll": false,
  "enableShareAppMessage": false,
  "navigationStyle": "default",
  "app-plus": {
    "nvue": true,
    "bounce": "none",
    "titleNView": false,
    "uniNView": false,
    "style": {},
    "subNVues": []
  },
  "style": {},
  "pageOrientation": "portrait",
  "pageMeta": {},
  "pageCaches": true  // 设置页面缓存方式为true
}

在page.json中，将pageCaches设置为true即可启用页面缓存机制。

4. 总结

对于uniapp页面跳转返回白屏的问题，上述两种方法都可以有效地解决。如果是对所有页面都使用缓存机制，更适合使用第二种方法。否则，可以使用vue的keep-alive组件来缓存需要缓存的页面。开发者需要根据具体需求来选择适合自己的方法。