【技巧】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特有文件名

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

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

我曾想通过配置的方式复制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插件会执行并修改这句里的文件参数。

或者

上述两步，在[email protected]后变得更为简单，添加了config-file和edit-config两个标签项，连cordova-custom-config插件都不用安装，就可以修改AndroidManifest.xml文件，在此文[email protected]以上灵活修改配置有描述。

这样就大功告成了！
我们可以验证一下，执行命令运行看效果：

ionic run android

2、启动后黑白屏

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

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，主要添加或修改下面语句即可：

然后打开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，若代码存在不规范的地方，如缺文件使得应用报错而无法启动。