先说一下项目背景,项目是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可取的值是mobiledesktop

装载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升级攻略

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐