cordova-plugin-splashscreen先黑屏再闪图解决方案（Android、IOS），兼容iPhone X处理示例

混合开发使用cordova-plugin-splashscreen插件在Android和IOS设备上会出现先黑屏再闪图的情况，下文对两种设备的短暂黑屏问题进行处理，处理方案使用图片遮盖黑屏。造成黑屏的原因有两部分：a、加载cordova ； b、cordova加载web页面。cordova-plugin-splashscreen解决的是cordova加载web页面时的黑屏，还有前面的加载cordova所以有短暂的黑屏。

一、Android处理

Android通过主题进行修改，推荐文章：https://segmentfault.com/a/1190000014539200

1、在shell\platforms\android\res\values中创建主题文件style.xml

设置主题背景图片为splash.png，无标题，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="Theme.AppStart"  parent="android:Theme">
		<item name="android:windowBackground">@drawable/splash</item>
		<item name="android:windowNoTitle">false</item>
	</style>
</resources>

2、在\drawable中放入闪图

3、修改shell\platforms\android\AndroidManifest.xml文件

修改主题为自定义的android:theme="@style/Theme.AppStart"

4、这时候改完就不会出现启动黑屏，然后再出闪图了，但是会出现图片缩小再放大，这是什么原因呢？这是因为第一种闪图全屏没有statusbar，而第二种图有statusbar导致。这里说一个简单的改法：

修改文件shell\plugins\cordova-plugin-splashscreen\src\android\SplashScreen.java（保险起见shell\platforms\android\src\org\apache\cordova\splashscreen\SplashScreen.java一起修改），将第二个闪图改为全屏，粗暴的方式直接屏蔽代码

小注：这样改闪图没问题了，但是状态栏还有问题，还要改改SplashScreen.java文件，

 

5、如果安卓出现“黑屏——闪图——黑/白屏——web页面”

第一个黑屏按照上面说的处理，第二个黑/白屏怎么处理？

在config.xml中设置闪图时间，默认是3秒，延长下，然后在web页面中通过js代码进行关闭闪图

 

 

二、IOS处理

1、新建一个storyboard文件，起名appStart.storyboard，放入控制器，然后去掉use Safe Area Layout Guides

2、修改plist文件，Main interface修改为appStart.storyboard

source code显示内容

	<key>UIMainStoryboardFile</key>
	<string>appStart</string>

 

3、还是在plist中，指定Launch Images Source ，没有的话new一个，然后改名为Default，经过测试如果Launch Screen File存在则Launch Images Source不生效

在Default文件中设置不同分辨率的闪屏图片，注意图片命名，看下一步

4、选择设备，根据不同的设备增加不同的图片

需要准备的png闪图类型：640x960    320x480      640x1136    750x1334   1242x2208   1125x2436  

图片命名注意使用Default-，如：Default-812h.png   ，表示iphoneX  屏幕1125x2436

为什么这么写，因为在CDVSplashScreen.m中这样写的

所以将名字全部命名为Default，这样闪图会很平滑的过渡到我们写的主页面

5、部分机型出现白屏，并且中间有旋转加载的图片

这是因为该型号的手机没有相应的图片，这么处理呢？以iphoneX为例

在CDVSplashScreen.h中，增加iphoneX的枚举变量

 

然后在CDVSplashScreen.m中初始化

接下来在还是在CDVSplashScreen.m中修改

这里代码就修改完了，再扔一张图片就可以了，图片名字要Default-812h.png   ，分辨率 1125x2436 ，为啥叫这么名字上面说明了，也可以不叫自己改代码吧

这样iPhone X就不会出现闪图后再白屏啦