使用Capacitor启动屏插件如何彻底避免启动后短暂白屏问题

问题原因 #

你当前逻辑的问题在于platform.ready()仅代表Capacitor原生层初始化完成，此时WebView内的Angular应用还未完成根组件、首屏页面的渲染工作，提前隐藏启动屏就会暴露还未加载完成的白色WebView背景，出现短时间白屏。

修复方案 #

1. 调整启动屏隐藏时机

不要在platform.ready()回调中直接隐藏启动屏，改为等待Angular首次路由加载完成、首屏渲染结束后再执行隐藏操作，修改后的app.component.ts参考代码如下：

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { StatusBar, Style } from '@capacitor/status-bar';
import { SplashScreen } from '@capacitor/splash-screen';
import { Router, NavigationEnd } from '@angular/router';
import { filter, take } from 'rxjs';

export class AppComponent {
  constructor(
    private platform: Platform,
    private router: Router
  ) {
    this.initializeApp();
  }

  async initializeApp() {
    await this.platform.ready();
    // 状态栏配置保持不变
    StatusBar.setStyle({ 
      style: Style.Dark 
    });
    StatusBar.setBackgroundColor({
      color: '#4c9caf'
    });

    // 监听首次路由加载完成事件，确认首屏渲染后再隐藏启动屏
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      take(1)
    ).subscribe(async () => {
      // 可选：增加100ms以内的短延时，确保首屏渲染完全，可根据实际效果调整
      setTimeout(async () => {
        await SplashScreen.hide();
      }, 50);
    });
  }
}

2. 统一WebView背景色

在capacitor.config.ts中新增原生WebView背景色配置，和启动屏、状态栏颜色保持一致，即使出现极短的切换间隙也不会显示白色：

const config: CapacitorConfig = {
  appId: 'com.ionic.io',
  appName: 'Example App',
  webDir: 'www',
  bundledWebRuntime: false,
  // 新增WebView背景色配置
  ios: {
    backgroundColor: '#4c9caf'
  },
  android: {
    backgroundColor: '#4c9caf'
  },
  plugins: {
    SplashScreen: {
      launchAutoHide: false,
      // launchAutoHide为false时launchShowDuration配置不生效，可保留或删除
      launchShowDuration: 3000,
      showSpinner: false,
    }
  },
};

3. 增加前端兜底配置

在项目根目录的index.html中给body和根元素设置和启动屏一致的背景色，避免WebView初始加载阶段的白色闪烁：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 原有head内容 -->
  <style>
    body, ion-app {
      background-color: #4c9caf !important;
    }
  </style>
</head>
<body>
  <app-root></app-root>
</body>
</html>

修改完成后重新执行ionic build，再同步Capacitor原生项目即可生效。

内容的提问来源于stack exchange，提问作者zeropsi