這里只說(shuō)明androd和ios的情況。

1、啟動(dòng)前黑白屏

啟動(dòng)前黑白屏問(wèn)題，僅存在于android，是android應(yīng)用的通病，ionic表示這鍋它不背。
具體操作時(shí)，當(dāng)我們點(diǎn)擊桌面圖標(biāo)啟動(dòng)APP時(shí)，有時(shí)會(huì)閃一下黑色背景，有時(shí)黑色背景時(shí)間還比較長(zhǎng)。原因是：

黑色背景：其實(shí)是在我們看到首頁(yè)第一幀之前，看到的默認(rèn)的背景色，黑、白色對(duì)應(yīng)的就是黑白背景。

那解決方法是：讓這個(gè)黑色的背景變成用戶(hù)喜歡看到的畫(huà)面或者讓它透明化。

所以解決方式有好幾種，可以看這兩篇文章：
Android啟動(dòng)頁(yè)優(yōu)化，去黑屏實(shí)現(xiàn)秒啟動(dòng)
Android啟動(dòng)頁(yè)黑屏及最優(yōu)解決方案

具體應(yīng)用在ionic上可以參照這個(gè)：
快速解決ionic安卓主題啟動(dòng)時(shí)短暫的黑屏或白屏問(wèn)題

然而個(gè)人建議不要直接操作platform里面的項(xiàng)目文件，因?yàn)楫?dāng)移除再添加android平臺(tái)時(shí)，復(fù)制修改很麻煩，而且容易遺忘。

于是，我把上述方法改造一下，改造前，我們了解下原理：

a. 創(chuàng)建一個(gè)主題，修改其背景為透明，或者和啟動(dòng)屏圖片一致；
b. AndroidManifest.xml文件，把主題改為上述主題。

原理很簡(jiǎn)單，但實(shí)際操作起來(lái)需要調(diào)整，因?yàn)槟J(rèn)沒(méi)有主題文件styles.xml的，我們需要?jiǎng)?chuàng)建，具體改造步驟如下（下面的1、2步是為了實(shí)現(xiàn)上述a，3、4步是為了實(shí)現(xiàn)上述b）：
1）創(chuàng)建styles.xml文件——注意：文件名固定不能變，因?yàn)槭莂ndroid特有文件名

<resources>
    <style name="WelcomeStyle" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <item name="android:windowBackground">@drawable/screen</item>
        <item name="android:windowNoTitle">true</item>
    </style>
    <style name="Appwelcome" parent="android:Theme.Translucent.NoTitleBar.Fullscreen">
    </style>
</resources>

原理是繼承一個(gè)主題，修改其背景。我這里定義了兩個(gè)樣式，來(lái)滿(mǎn)足不同喜好，使用時(shí)二選一就行了：第一個(gè)樣式，screen.png作為ionic或cordova默認(rèn)生成的啟動(dòng)屏圖片，于是使用screen.png為背景圖；第二個(gè)樣式為透明主題。

2）創(chuàng)建一個(gè)cordova插件，啥邏輯都沒(méi)有，只是利用配置把styles.xml復(fù)制到項(xiàng)目中——plugin.xml唯一重要配置：

  <source-file src="src/android/styles.xml" target-dir="res/values" />

我曾想通過(guò)配置的方式復(fù)制styles.xml文件，但是沒(méi)有解決到，所以還是選用插件方式；
關(guān)于自定義插件可以參考此文：自定義Cordova插件詳解；

上述兩步的可以直接下載已放到github上的插件cordova-fix-blackscreen。

然后安裝該插件：

ionic cordova plugin add 本插件本地或遠(yuǎn)程路徑

驗(yàn)證一下，會(huì)發(fā)現(xiàn)在platform目錄android里的res/values里會(huì)多出styles.xml文件。

3）安裝cordova-custom-config——用于修改啟動(dòng)頁(yè)Activity的主題樣式為上述的自定義樣式WelcomeStyle或Appwelcome。

ionic cordova plugin add cordova-custom-config

這個(gè)插件和普通插件不同，并不會(huì)增加項(xiàng)目大小，它是注冊(cè)Cordova的鉤子，利用Cordova命令修改自定義配置。這是一個(gè)很強(qiáng)大的插件，能滿(mǎn)足很多定制化的需求，建議有空時(shí)了解一下。

4）應(yīng)用項(xiàng)目的config.xml文件添加下面一句，指定使用的主題（2選1），這樣在cordova build時(shí)，cordova-custom-config插件會(huì)執(zhí)行并修改這句里的文件參數(shù)。

<preference name="android-manifest/application/activity/@android:theme" value="@style/WelcomeStyle" />

或者

<preference name="android-manifest/application/activity/@android:theme" value="@style/Appwelcome" />

上述兩步，在cordova@6.4.0后變得更為簡(jiǎn)單，添加了config-file和edit-config兩個(gè)標(biāo)簽項(xiàng)，連cordova-custom-config插件都不用安裝，就可以修改AndroidManifest.xml文件，在此文Cordova@6.4.0以上靈活修改配置有描述。

這樣就大功告成了！
我們可以驗(yàn)證一下，執(zhí)行命令運(yùn)行看效果：

ionic run android

2、啟動(dòng)后黑白屏

ionic啟動(dòng)頁(yè)使用了cordova-plugin-splashscreen這個(gè)插件，插件配置在應(yīng)用的config.xml可設(shè)置：

    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="AutoHideSplashScreen" value="false" />
    <preference name="FadeSplashScreen" value="true" />
    <preference name="SplashScreenBackgroundColor" value="false" />
    <preference name="SplashScreenDelay" value="3000" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />

ShowSplashScreenSpinner——是否顯示啟動(dòng)屏轉(zhuǎn)圈圈那個(gè) Spinner；
AutoHideSplashScreen——是否自動(dòng)隱藏SplashScreen；
FadeSplashScreen——是否逐漸消失SplashScreen；
SplashScreenBackgroundColor——背景顏色；
SplashMaintainAspectRatio——如果值設(shè)置為 true，則圖像將不會(huì)伸展到適合屏幕。如果設(shè)置為 false ，它將被拉伸；
FadeSplashScreenDuration——逐漸消失SplashScreen的動(dòng)畫(huà)時(shí)延；
SplashShowOnlyFirstTime——是否只第一次顯示；
SplashScreen——它是 platform / android / res / drawable - 文件夾中的圖像的名稱(chēng)。Cordova默認(rèn)生成 screen.png 圖片;
SplashScreenDelay——SplashScreen顯示的延時(shí)時(shí)間

這Splashscreen插件其實(shí)是個(gè)dialog，默認(rèn)在配置的延時(shí)時(shí)間(SplashScreenDelay)顯示，延時(shí)時(shí)間到就關(guān)閉，這樣就會(huì)出現(xiàn)一個(gè)bug：

延時(shí)時(shí)間短，應(yīng)用資源未加載完成，在dialog關(guān)閉后到首頁(yè)顯示這段過(guò)程中就會(huì)顯示黑屏。就算使用--prod參數(shù)進(jìn)行AOT編譯能提高加載速度，但不同機(jī)子性能不同不能完全保證加載時(shí)間少于延時(shí)時(shí)間，問(wèn)題依然會(huì)存在。

解決的方法有：
1）設(shè)置較長(zhǎng)的延時(shí)時(shí)間（配置改SplashScreenDelay），用于超過(guò)應(yīng)用資源加載時(shí)間
這樣dialog一關(guān)閉就看到已加載完的首頁(yè)了，但是這種方式的缺點(diǎn)是：延時(shí)時(shí)間不可判，設(shè)長(zhǎng)了，給人感覺(jué)啟動(dòng)太慢，設(shè)短了，應(yīng)用還是沒(méi)有加載完。

2）一直顯示，直到應(yīng)用加載完成后調(diào)用關(guān)閉
打開(kāi)config.xml，主要添加或修改下面語(yǔ)句即可：

<preference name="AutoHideSplashScreen" value="false" />

然后打開(kāi)app.component.ts，發(fā)現(xiàn)下面代碼，這里就是手動(dòng)關(guān)閉了，所以我們不需要改動(dòng)。

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
    });
  }

3、其它情況

可能加了--prod參數(shù)后build出現(xiàn)的，先看命令行的輸出提示，若無(wú)有效信息，再網(wǎng)頁(yè)調(diào)試，若也沒(méi)錯(cuò)誤，那就基本是原生插件問(wèn)題，進(jìn)行真機(jī)調(diào)試。加與不加這參數(shù)的區(qū)別其實(shí)是AOT（Ahead-of-time，提前編譯）和JIT（Just-in-time，即時(shí)編譯）的區(qū)別，使用參數(shù)后使用AOT，若代碼存在不規(guī)范的地方，如缺文件使得應(yīng)用報(bào)錯(cuò)而無(wú)法啟動(dòng)。