ionic2下创建项目后，运行启动页后白屏几秒，解决方案

最近在学习过程中发现ionic2项目运行在真机上，启动页后会有3-5秒的白屏时间，用户体验不是太好。

查看到了一篇关于这个问题的博客，但是是ionic1版本下的解决方案，有些差异，在查询ionic官方文档后，找到了ionic2版本的解决方案。
ionic1版本解决方案原址：http://blog.csdn.net/dounainaicsdn/article/details/50767667

1.首先我们要先添加这个cordova组件

$ cd 项目根目录
$ cordova plugin add cordova-plugin-splashscreen

2.然后可以更换我们的启动页面，配置config.xml文件（可略过，不更换也可）

在 <platform name="android">标签里面添加下面的代码：

<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>

<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

3.接下来我们就要配置启动页面的一些属性了，在config.xml追加以下属性：

<preference name="AutoHideSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="SplashScreenDelay" value="6000"/>
  <preference name="FadeSplashScreen" value="false"/>

这些属性的名字都很直观，可以大致了解什么意思，官方文档上也有讲这个，不懂可以去看看：

4.最后我们在app.ts文件下，手动调用splashscreen的hide()方法即可

打开app目录下的app.ts文件
首先导入Splashscreen

 import { Splashscreen } from 'ionic-native';

接下来在函数里调用 Splashscreen.hide()

    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();

      setTimeout(function () {
        Splashscreen.hide();
      }, 1000);

    });

5.大工告成，运行一下项目试试吧，just enjoy