uniapp 页面切换闪屏

### 解决 UniApp 页面切换时的闪屏问题

#### 原因分析

在 UniApp 开发过程中，页面切换时出现闪屏现象的原因主要有两个方面：

1. **NVue 页面背景设置不当**：当从 Vue 页面跳转到 NVue 页面时，如果 NVue 页面的初始背景颜色不是黑色或其他深色，则会短暂显示白色背景，造成视觉上的白屏效果[^1]。

2. **TabBar 页面渲染机制**：对于 TabBar 类型的应用，在切换至未缓存的新 Tab 页时，由于新页面尚未被加载和渲染完成，因此会产生一瞬间的空白状态，即所谓的“闪白”。这是因为 App 端处理多页面架构的方式所致——只有当前激活的页面才会立即呈现给用户；其他非活跃页面则需等待实际访问才开始初始化并绘制界面[^2]。

#### 解决方案

针对上述两种情况，可采取以下措施来减少或消除闪屏现象：

##### 设置 NVue 页面默认背景色

通过修改 `manifest.json` 文件中的配置项，指定 NVue 页面启动时使用的背景色为较暗的颜色（如黑色），从而避免过渡期间暴露白色的底层窗口。具体做法是在项目的根目录下找到该文件，并按如下方式调整路径对应的样式属性：

{
  "path": "pages/nvuePage/index",
  "style": {
    "app-plus": {
      "background": "#000"
    }
  }
}

此方法适用于所有类型的 NVue 组件，能够有效改善首次进入此类页面时可能出现的瞬态白屏状况。

##### 预加载 TabBar 子页面

为了防止频繁切换不同标签栏下的子页面引发不必要的重绘操作而导致的卡顿感以及伴随而来的短暂停滞感（表现为轻微的闪烁），建议启用预加载功能。这允许开发者提前准备好即将展示的内容，使得整个过程更加流畅自然。实现上可通过设置全局参数控制是否开启此项特性：

// main.js 中加入如下代码片段
import Vue from 'vue'
Vue.config.productionTip = false;
const appOptions = {};
if (process.env.NODE_ENV === 'production') {
  Object.assign(appOptions, {
    preloadPages: true,
  });
}
new Vue(Vue.merge({
  ...App,
}, appOptions)).$mount();

另外还可以考虑利用 uni-app 提供的相关 API 对特定场景做进一步优化，比如监听 tab 切换事件并在适当时候触发异步数据请求等逻辑，确保每次交互都能获得最佳性能表现。