cordova-ios@4.x升级到cordova-ios@6.x

先说一下项目背景，项目是2017年左右开发的ionic3.x的cordova项目，最近对app来了一份安全检测报错，主要是uiwebview的问题。当然也知道了Apple 的最新条例，UIWebView 已全部替换为 WKWebView，UIWebView已废弃，当然相对应的app也不能上架，企业app除外。综合考虑后有以下2个解决方案

1. 升级到5.x版本，使用插件cordova-plugin-wkwebview-engine进行解决
2. 直接升级到6.x版本，当前最新是2年前的 6.2.0

方案1

先说说方案1：
With the versions that are currently released, make sure that you are:

using cordova-ios@5.1.1

add plugin cordova-plugin-wkwebview-engine, preferably the latest version 1.2.1

add the following preference flag WKWebViewOnly to the config.xml iOS platform element.
E.g.

   <platform name="ios">
   <preference name="WKWebViewOnly" value="true" />
   </platform>
   <platform name="ios">
   <feature name="CDVWKWebViewEngine">
   <param name="ios-package" value="CDVWKWebViewEngine"/>
   </feature>
   <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
   </platform>

这是当时出5.x的时候，官方给出的解决方案。但是现在已经有6.x了，所以优先选择方案2，直接升级到6.x解决。

方案2（推荐）

1. 重新生成项目

这操作，相当于把生成的APP项目删了，重新基于6.2.0的版本生成一份新的项目，因此最好提前备份老项目，主要是老项目修改过的文件，到时文件对差异后迁移回新项目中。

ionic cordova platform remove ios
ionic cordova platform add ios@6.2.0

生成完后，对比旧项目修改过的文件差异，迁移文件到6.2.0项目中

2. 升级nodejs

升级nodejs版本大于 10.x ，我当前使用的是10.24.1

3. 升级插件

因为 Splash Screen 已经集成到 cordova-ios@6 了，因此必须升级插件cordova-plugin-splashscreen，已去掉相关ios代码

ionic cordova plugin add cordova-plugin-splashscreen@6.0.2

4. 修复一些小问题

高度差

修复启动后webview占高不能满屏问题(相差状态栏高度)
暂时在业务代码层进行控制状态栏隐藏和显示进行解决。
// todo
最好能在底层进行解决

	statusBar.hide();
    setTimeout(() => {
      statusBar.show();
    }, 100);

ipad加载布局

iPadOS 13 默认使用桌面布局，而不是移动布局。现在，可以在config.xml中配置<preference name="PreferredContentMode" value="xxx" />来控制此行为。
xxx可取的值是mobile和desktop。

装载html方式

cordova-ios@6.2.0 支持配置使用 WKURLSchemeHandler 来加载本地html网页，以绕过 file://.../index.html 访问本地文件的各种限制。

只要在 config.xml 配置如下即可

<preference name="scheme" value="cdv" /> 
<preference name="hostname" value="localhost" />

但是，这样配置之后，cordova 加载本地网页的地址为 cdv://localhost/index.html ，由于“内容安全策略(Content Security Policy)”，这个路径访问的网页下，是无法展示 file:// 路径的图片的，因为会报错

Not allowed to load local resource: file:///var/mobile/Containers/Data/Application/E09B7F43-B170-4435-A850-18277C597062/tmp/cache/avatar/7272b2c7-f7a8-4600-811d-6b7f2a3de3b3.jpg

解决方法
cordova 的 wkwebview 提供了一个方法来将 file:// 路径转为cdv:// 地址（文档中没写）

window.WkWebView.convertFilePath('file:///var/mobile/Containers/Data/Application/E09B7F43-B170-4435-A850-18277C597062/tmp/cache/avatar/7272b2c7-f7a8-4600-811d-6b7f2a3de3b3.jpg')

得到一个如下的url

cdv://localhost/_app_file_/var/mobile/Containers/Data/Application/E09B7F43-B170-4435-A850-18277C597062/tmp/cache/avatar/7272b2c7-f7a8-4600-811d-6b7f2a3de3b3.jpg

这个url就可以放在 <img src>上展示了

此方式引用于文章：https://blog.csdn.net/lovelyelfpop/article/details/112167743

---

参考文章：
UIWebView 全部干掉替换WKWebView之路！
Cordova最新版本6.1.0升级攻略