uniApp App端跳转到深色页面闪白记录及优化处理方法

此方法仅针对App端 (IOS 未测试)。

问题产生

从亮色页面切换到深色页面，切换过程中会先出来白底（闪一下），然后才会出现页面内容。
一般首次打开深色页面时候不会出现，二次进入深色页面才会出现以上情况。

解决办法与猜测

方法

1. 在app.vue中设置 page{ minheight:100% }
2. 在深色页面中设置页面背景颜色，style中不能带scope：
   <style>page {background-color: #051922;}</style>
3. 在深色页面中添加以下处理

<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
	<!--     开始先把内容隐藏掉，页面 ready 后再渲染 -->
    <template v-if="pageOpc">
			<!--     页面内容  -->
    </template>
  </view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app';
import { ref } from "vue"

const pageOpc = ref(0)
onReady(() => {
	setTimeout(() => {
		pageOpc.value = 1;
    // 这个 100 根据页面动画时间来定（页面动画效果默认300，我修改成了100，所以这里延时100处理）
    // 页面动画时间可以在 page.json 里面修改 animationDuration
	}, 100)
})
</script>

<style>
  page {background-color: #051922;}
   /*   加个动画掩饰加载过程 */
	.page-fade-in{
    opacity: 0;
		transition: all 0.3s;
  }
</style>

解释

观察到这个闪白的时间跟页面的复杂程度有一定的影响：跳转到一个非常简单甚至空白的深色页面这个闪白的过程甚至没有，而对于那些越复杂的这个过程就越长，由此猜测是因为渲染的阻塞导致闪白。

经过简单的测试的确可以从这方面入手去思考：

1. page 设置高度 100% 确保页面背景完整覆盖。
2. 将页面元素的渲染放到页面 ready 之后去做，这样虽然牺牲了一定的时间，但是可以大大提升用户体验
3. 在onReady中再加一个 100 （页面切换动画时间）的延时，是因为观察到：如果不加的情况下动画过程会出现卡顿，并且偶尔会出现闪白的现象。
4. 配合透明过渡，减少用户视觉上的僵硬感，也算是一种提升体验感的优化

还有一种方法

用 uni.reLaunch 跳转不会闪白，不过操作起来比较麻烦，而且没有页面切换的动画。

一些无用的话

1. 网上很多文章说可以在 page.json 中设置背景色解决：

"app-plus":{
  "background": "#262626"
}

2. 还有一些简单的在页面上设置 page 背景色的处理方法 都没啥作用。