Cordova设置iOS App启动页

前言

iOS13推出后要求开发者必须在今年4月之前使用LaunchScreen.storyboard启动，不能再使用之前Image.asset中的LaunchImage方式了。
对于使用原生iOS的开发者来说，操作起来就是在xcode里面点点点，控件拖一拖设置一下.但是对于我们使用cordova开发混合App的开发者来说，不熟悉xcode的话，操作起来会很懵。（我硬是在那搞了两个小时也没搞好！）

看下Cordova 官方对于这两种方式的解释： 官方地址

There are two mechanisms for displaying a launch screen on iOS:

1. Legacy launch images: images are sized exactly for the device’s screen size. Does not support the iPad Pro 12.9’s native resolution or split-screen/slide-over multitasking.
2. Launch storyboard images: Images are sized based on scale, idiom, and size classes. Supports all devices, and can be used with split-screen/slide-over multitasking.

翻译一下：
第一种是launch image方式：
图像的大小完全符合设备的屏幕大小。不支持iPad Pro12.9的原生分辨率或分屏/滑屏多任务处理。
这种方式是根据每个版本iphone、ipad的屏幕尺寸，提供对应分辨率的图片。比如ipone8对应某张图，iphonex对应某张图。但是每次苹果新出机型都要新加一张图片用于适配该机型的启动页。

第二种是使用storyboard方式：
图像的大小取决于规模、习惯用法和大小类。支持所有设备，可以使用分屏/滑屏多任务处理。也就是说不是每个机型都对应一张图片了，现在使用storyboard。

什么是storyboard？如下图

关键字：iOS 13使用LaunchScreen.storyboard适配各尺寸启动图

我去谷歌了一下，ios原生开发者的解决方法 ，大概有如下三种：

1. 只用一张图片，分辨率很高的图片。然后对不同尺寸的型号，进行拉伸操作。
   我试了下，缺点很明显：以iphone为基准操作完之后，在ipad上根本没法用，大部分直接显示空白，因为你的拉伸是针对所有机型的，并不是每个机型对应一个拉伸结果。具体的你实际操作一遍就知道了。如果不考虑兼容ipad可以使用这种方法，简单便捷。
2. 抛弃启动图是张图片的概念，直接把启动图的核心内容抠下来，用多个image控件去拼凑成启动图。
   我表示玩不来xcode的控件（虽然很像winform但还是操作不顺畅），而且暂时没时间去学 这个。
3. 新建一个image set，更改Content.json文件，填入对应分辨率的图片，之后巴拉巴拉此处省略。建议直接去看文章，对着图更好理解。

下面是我谷歌到的其中一篇文章 传送门，大概就是这样子了。
Cordova splashscreen插件的实现方式，选择了上述的第三种。

正文

老规矩，还是需要用到下面这个插件

cordova plugin add cordova-plugin-splashscreen

跟之前使用的区别在于config.xml里的配置有所变化：
之前的

    <splash src="res/screen/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/screen/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/screen/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/screen/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/screen/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/screen/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/screen/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/screen/ios/Default-Landscape-736h.png" width="2208" height="1242"/>

现在的

    <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comany.png" />
    <splash src="res/screen/ios/Default@2x~universal~comcom.png" />
    <splash src="res/screen/ios/Default@3x~universal~anyany.png" />
    <splash src="res/screen/ios/Default@3x~universal~anycom.png" />
    <splash src="res/screen/ios/Default@3x~universal~comany.png" />

或者可以设置的更细致一点：

    <splash src="res/screen/ios/Default@2x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~iphone~comcom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anyany.png" />
    <splash src="res/screen/ios/Default@3x~iphone~anycom.png" />
    <splash src="res/screen/ios/Default@3x~iphone~comany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~anyany.png" />
    <splash src="res/screen/ios/Default@2x~ipad~comany.png" />

记得把图片放进项目

之后正常执行cordova build，然后打开xcodeproj文件，在 Lanuch Screen File中选择 CDVLaunchScreen，也就是cordova帮我们生成的storyboard文件。然后就可以正常打包看看效果了。

ios上架参考：传送门