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="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="http://ionic.local/*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
         <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:*" />
        <allow-intent href="itms-apps:*" />
    </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" onload="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();//添加代码
    });
  }