【技巧】ionic3优雅解决启动前、后黑白屏问题

这里只说明androd和ios的情况。

1、启动前黑白屏

启动前黑白屏问题，仅存在于android，是android应用的通病，ionic表示这锅它不背。

具体操作时，当我们点击桌面图标启动APP时，有时会闪一下黑色背景，有时黑色背景时间还比较长。原因是：

黑色背景：其实是在我们看到首页第一帧之前，看到的默认的背景色，黑、白色对应的就是黑白背景。 那解决方法是：让这个黑色的背景变成用户喜欢看到的画面或者让它透明化。

所以解决方式有好几种，可以看这两篇文章：

Android启动页优化，去黑屏实现秒启动

Android启动页黑屏及最优解决方案

具体应用在ionic上可以参照这个：

快速解决ionic安卓主题启动时短暂的黑屏或白屏问题

然而个人建议不要直接操作platform里面的项目文件，因为当移除再添加android平台时，复制修改很麻烦，而且容易遗忘。

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

a. 创建一个主题，修改其背景为透明，或者和启动屏图片一致； b. AndroidManifest.xml文件，把主题改为上述主题。

原理很简单，但实际操作起来需要调整，因为默认没有主题文件styles.xml的，我们需要创建，具体改造步骤如下（下面的1、2步是为了实现上述a，3、4步是为了实现上述b）：

1）创建styles.xml文件——注意：文件名固定不能变，因为是android特有文件名

<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>

原理是继承一个主题，修改其背景。我这里定义了两个样式，来满足不同喜好，使用时二选一就行了：第一个样式，screen.png作为ionic或cordova默认生成的启动屏图片，于是使用screen.png为背景图；第二个样式为透明主题。

2）创建一个cordova插件，啥逻辑都没有，只是利用配置把styles.xml复制到项目中——plugin.xml唯一重要配置：

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

我曾想通过配置的方式复制styles.xml文件，但是没有解决到，所以还是选用插件方式； 关于自定义插件可以参考此文：自定义Cordova插件详解； 上述两步的可以直接下载已放到github上的插件cordova-fix-blackscreen。

然后安装该插件：

ionic cordova plugin add 本插件本地或远程路径

验证一下，会发现在platform目录android里的res/values里会多出styles.xml文件。

3）安装cordova-custom-config——用于修改启动页Activity的主题样式为上述的自定义样式**WelcomeStyle**或**Appwelcome**。

ionic cordova plugin add cordova-custom-config

这个插件和普通插件不同，并不会增加项目大小，它是注册Cordova的钩子，利用Cordova命令修改自定义配置。这是一个很强大的插件，能满足很多定制化的需求，建议有空时了解一下。

4）应用项目的config.xml文件添加下面一句，指定使用的主题（2选1），这样在cordova build时，cordova-custom-config插件会执行并修改这句里的文件参数。

<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后变得更为简单，添加了config-file和edit-config两个标签项，连cordova-custom-config插件都不用安装，就可以修改AndroidManifest.xml文件，在此文Cordova@6.4.0以上灵活修改配置有描述。

这样就大功告成了！

我们可以验证一下，执行命令运行看效果：

ionic run android

2、启动后黑白屏

ionic启动页使用了cordova-plugin-splashscreen这个插件，插件配置在应用的config.xml可设置：

    <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——是否显示启动屏转圈圈那个 Spinner； AutoHideSplashScreen——是否自动隐藏SplashScreen； FadeSplashScreen——是否逐渐消失SplashScreen； SplashScreenBackgroundColor——背景颜色； SplashMaintainAspectRatio——如果值设置为 true，则图像将不会伸展到适合屏幕。如果设置为 false ，它将被拉伸； FadeSplashScreenDuration——逐渐消失SplashScreen的动画时延； SplashShowOnlyFirstTime——是否只第一次显示； SplashScreen——它是 platform / android / res / drawable - 文件夹中的图像的名称。Cordova默认生成 screen.png 图片; SplashScreenDelay——SplashScreen显示的延时时间

这Splashscreen插件其实是个dialog，默认在配置的延时时间(SplashScreenDelay)显示，延时时间到就关闭，这样就会出现一个bug：

延时时间短，应用资源未加载完成，在dialog关闭后到首页显示这段过程中就会显示黑屏。就算使用--prod参数进行AOT编译能提高加载速度，但不同机子性能不同不能完全保证加载时间少于延时时间，问题依然会存在。

解决的方法有：

1）设置较长的延时时间（配置改SplashScreenDelay），用于超过应用资源加载时间

这样dialog一关闭就看到已加载完的首页了，但是这种方式的缺点是：延时时间不可判，设长了，给人感觉启动太慢，设短了，应用还是没有加载完。

2）一直显示，直到应用加载完成后调用关闭

打开config.xml，主要添加或修改下面语句即可：

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

然后打开app.component.ts，发现下面代码，这里就是手动关闭了，所以我们不需要改动。

  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参数后build出现的，先看命令行的输出提示，若无有效信息，再网页调试，若也没错误，那就基本是原生插件问题，进行真机调试。加与不加这参数的区别其实是AOT（Ahead-of-time，提前编译）和JIT（Just-in-time，即时编译）的区别，使用参数后使用AOT，若代码存在不规范的地方，如缺文件使得应用报错而无法启动。