混合开发使用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就不会出现闪图后再白屏啦