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();//添加代码    });  }