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?如下图
Cordova设置iOS App启动页_第1张图片
关键字: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" />

Cordova设置iOS App启动页_第2张图片

Cordova设置iOS App启动页_第3张图片
或者可以设置的更细致一点:

    <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设置iOS App启动页_第4张图片
记得把图片放进项目
Cordova设置iOS App启动页_第5张图片
之后正常执行cordova build,然后打开xcodeproj文件,在 Lanuch Screen File中选择 CDVLaunchScreen,也就是cordova帮我们生成的storyboard文件。然后就可以正常打包看看效果了。
Cordova设置iOS App启动页_第6张图片
ios上架参考:传送门

你可能感兴趣的:(前端,ios,cordova,native,web,app)