ionic2下建立項目後，運作啟動頁後白屏幾秒，解決方案

問題描述

最近在學習過程中發現ionic2項目運作在真機上，啟動頁後會有3-5秒的白屏時間，使用者體驗不是太好。

解決過程

一、安裝Cordova splash screen插件

[html]  view plain  copy

1. $ cd myapp  
2. $ ionic plugin add org.apache.cordova.splashscreen  

二、配置config.xml檔案

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.lishan.sidemenu" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Sidemenu</name>
    <description>test app.</description>
    <author email="[email protected]" href="http://ionicframework.com/" target="_blank" rel="external nofollow" >Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" target="_blank" rel="external nofollow"  />
    <allow-intent href="http://*/*" target="_blank" rel="external nofollow"  />
    <allow-intent href="https://*/*" target="_blank" rel="external nofollow"  />
    <allow-intent href="tel:*" target="_blank" rel="external nofollow"  />
    <allow-intent href="sms:*" target="_blank" rel="external nofollow"  />
    <allow-intent href="mailto:*" target="_blank" rel="external nofollow"  />
    <allow-intent href="geo:*" target="_blank" rel="external nofollow"  />
    <platform name="android">
        <allow-intent href="market:*" target="_blank" rel="external nofollow"  />
         <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
        <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
        <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
        <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
        <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
        <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
        <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
        <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
        <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
        <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
        <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
        <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
        <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
        <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-hdpi"/>
        <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-hdpi"/>
        <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-hdpi"/>

    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" target="_blank" rel="external nofollow"  />
        <allow-intent href="itms-apps:*" target="_blank" rel="external nofollow"  />
    </platform>
    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="android-minSdkVersion" value="16" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />

    <!--添加代碼-->
    <preference name="ShowSplashScreen" value="true"/>
    <preference name="AutoHideSplashScreen" value="false"/>
    <preference name="SplashShowOnlyFirstTime" value="false"/>
    <preference name="FadeSplashScreen" value="false"/>
    <feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
    </feature>
    <!--添加代碼-->

    <feature name="StatusBar">
        <param name="ios-package" οnlοad="true" value="CDVStatusBar" />
    </feature>
    <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
    <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
    <plugin name="cordova-plugin-console" spec="1.0.5" />
    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
    <plugin name="cordova-plugin-device" spec="1.1.4" />
    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
    <plugin name="cordova-sqlite-storage" spec="~2.0.2" />
</widget>
           

三、配置app.component.ts

initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();//添加代碼
    });
  }