Ionic 3启动后长时间白屏问题及SplashScreen自定义需求咨询

Hey there! Let's break down how to fix your Ionic 3 issues step by step—those long startup white screens, jumping straight to the login page, and either removing the SplashScreen or replacing it with a custom animated one. Here's what works:

That annoying white screen usually comes from slow initialization or misconfigured splash screen settings. Try these fixes:

• Optimize your app's bootstrap process: Cut back on heavy modules loaded in app.module.ts, or move non-critical initialization logic (like API calls or data loading) to after the login page loads. Avoid running big async tasks in app.component.ts before the first page renders.
• Build in production mode: Development mode includes tons of debug code that slows things down. Run this command for an optimized build:

  ionic cordova build [android/ios] --prod --release
  

• Adjust splash screen timing: Sometimes the splash screen hides too early, leaving a white gap. Extend the delay or manually control when it hides (we'll cover this in the custom splash screen section).

Skipping the default root page to land straight on login is straightforward:

• First, set your rootPage in app.component.ts to your LoginPage directly:

  import { Component } from '@angular/core';
  import { Platform } from 'ionic-angular';
  import { LoginPage } from '../pages/login/login';
  
  @Component({
    templateUrl: 'app.html'
  })
  export class MyApp {
    rootPage: any = LoginPage; // Set login as the default root
  
    constructor(public platform: Platform) {
      this.platform.ready().then(() => {
        // Add any necessary platform init here (like status bar config)
      });
    }
  }
  

• If you previously defined a root page in app.module.ts, you can either remove that or update it to point to LoginPage instead.
• Optional: If you need to check authentication state first (like if a user is already logged in), add that logic in the platform.ready() block before setting the root page:

  this.platform.ready().then(() => {
    // Check if user is authenticated (example logic)
    const isLoggedIn = localStorage.getItem('authToken') !== null;
    this.rootPage = isLoggedIn ? HomePage : LoginPage;
  });
  

Option A: Remove the SplashScreen Entirely #

If you don't want a splash screen at all:

• Uninstall the splash screen plugin and its native wrapper:

  ionic cordova plugin remove cordova-plugin-splashscreen
  npm uninstall @ionic-native/splash-screen
  

• Delete all splash screen-related code from app.component.ts (like this.splashScreen.hide() calls).
• Remove all splash screen preferences from config.xml—look for lines starting with <preference name="SplashScreen..." /> and delete them.

Option B: Implement a Custom Animated SplashScreen #

Want a splash screen with your own animation? Here are two approaches:

Basic Animated Splash (Using Default Plugin) #

1. Make sure the splash screen plugin is installed:

   ionic cordova plugin add cordova-plugin-splashscreen
   npm install @ionic-native/splash-screen
   

2. Update config.xml to enable animation and set your custom assets:

   <!-- Base splash screen settings -->
   <preference name="SplashScreen" value="screen" />
   <preference name="SplashScreenDelay" value="0" /> <!-- Let's control hide timing manually -->
   <preference name="SplashBackgroundColor" value="#your-hex-color" />
   <preference name="SplashMaintainAspectRatio" value="true" /> <!-- Keep your image proportionate -->
   
   <!-- Android-specific animation config -->
   <platform name="android">
     <preference name="SplashScreenAnimated" value="true" />
     <preference name="SplashScreenAnimationDuration" value="1500" /> <!-- 1.5 second animation -->
     <!-- Add your custom splash drawable with animation in res/drawable -->
   </platform>
   
   <!-- iOS-specific config -->
   <platform name="ios">
     <preference name="SplashScreenAnimated" value="true" />
     <!-- Edit LaunchScreen.storyboard to add animations to your splash elements -->
   </platform>
   

3. Manually hide the splash screen once your login page is ready. In app.component.ts:

   import { SplashScreen } from '@ionic-native/splash-screen';
   
   constructor(public platform: Platform, private splashScreen: SplashScreen) {
     this.platform.ready().then(() => {
       // Wait for login page to render, then hide splash
       setTimeout(() => {
         this.splashScreen.hide();
       }, 2000);
     });
   }
   

Advanced: Lottie Animated Splash Screen #

For smooth, complex animations (like JSON-based Lottie files), use this plugin:

1. Install the Lottie splash screen plugin:

   ionic cordova plugin add cordova-plugin-lottie-splashscreen
   npm install @ionic-native/lottie-splash-screen
   

2. Configure it in config.xml:

   <preference name="LottieAnimationLocation" value="www/assets/animations/your-splash-animation.json" />
   <preference name="LottieBackgroundColor" value="#ffffff" />
   <preference name="LottieLoop" value="false" /> <!-- Don't loop the animation -->
   <preference name="LottieAutoHideSplashScreen" value="true" /> <!-- Hide when animation ends -->
   

3. Replace the default splash screen logic in app.component.ts with Lottie's methods if you need manual control:

   import { LottieSplashScreen } from '@ionic-native/lottie-splash-screen';
   
   constructor(public platform: Platform, private lottieSplash: LottieSplashScreen) {
     this.platform.ready().then(() => {
       // Optional: Manually show/hide if not using auto-hide
       // this.lottieSplash.show();
       // setTimeout(() => this.lottieSplash.hide(), 3000);
     });
   }
   

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