1. 程式人生 > >ionic2下建立專案後,執行啟動頁後白屏幾秒,解決方案

ionic2下建立專案後,執行啟動頁後白屏幾秒,解決方案

問題描述

最近在學習過程中發現ionic2專案執行在真機上,啟動頁後會有3-5秒的白屏時間,使用者體驗不是太好。

解決過程

一、安裝Cordova splash screen外掛

  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/">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();//新增程式碼
    });
  }