在iOS中，现在已经有两个网页浏览器，UIWebView和WKWebView。Ionic应用程序已经在历史版本中使用UIWebView，但之后不再使用。 Ionic现在在构建iOS时默认使用WKWebview。
我们坚信，WKWebview是任何应用程序的最佳选择，因为它具有对旧版本的Webview（UIWebView）的许多改进。 这些功能包括：
- JIT将JS代码转换为机器代码，运行速度更快
- 改善了渲染性能
- 减少内存消耗
- 更好地遵守网络标准
- 可靠的滚动事件（对虚拟列表很重要）
首先升级Ionic cli
WKWebView 插件需要最新的Ionic CLI才能正常工作。
如果你的ionic cli低于3.x,那么先升级到3.x以上。
npm uninstall -g ionic
npm install -g ionic
CORS（跨域资源共享）
UIWebView从来没有执行CORS，但WKWebView有。
不幸的是，没有API禁用此功能，因此您需要确保您的应用程序使用的任何远程API，正确实现CORS。 CORS MDN Docs
CORS 清单:
Whitelist Origin: http://localhost:8080
Whitelist Methods
Whitelist Header
CORS preflight request (OPTION)
重写 file://
如果您正在使用本地文件（文本文件，图像，视频），则需要确保文件的路径在其前面没有file：//。
例如:
file:///usr/home/dev/app/index.html
应该重写为:
/usr/home/dev/app/index.html
从Ionic 3.2.0开始添加了自动重写file：// URLs的内置函数：
import { normalizeURL } from 'ionic-angular';
let path = cordova.file.dataDirectory;
console.log('Original: ' + path);
path = normalizeURL(path);
console.log('Fixed: ' + path);
输出:
Original: file:///Users/manuelmartinez-almeida/Library/Developer/CoreSimulator/Devices/94646EFE-DE04-46BD-AFC1-B4F312BA06CB/data/Containers/Bundle/Application/6AD1018C-6836-4BF9-83DA-4430392D10D5/ionic-wk-test.app/www/index.html
Fixed: /Users/manuelmartinez-almeida/Library/Developer/CoreSimulator/Devices/94646EFE-DE04-46BD-AFC1-B4F312BA06CB/data/Containers/Bundle/Application/6AD1018C-6836-4BF9-83DA-4430392D10D5/ionic-wk-test.app/www/index.html
或者在模板中使用:
<img [src]="imagePath" />
takePhoto() {
this.camera.getPicture().then((img)=>{
this.imagePath = normalizeURL(img);
})
}
注意：Core cordova插件还允许您通过cdvfile：//协议引用文件。 不幸的是，我们无法重写此路径，因为它是以本机代码解析的东西。 我们建议，当您引用文件时，请使用完整路径进行重写，而不是cdvfile：//。
升级到WKWebView (仅UIWebView 用户)
ionic cordova plugin add cordova-plugin-ionic-webview --save
详请: https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions
降级到UIWebView
正如我们之前所说，我们强烈建议开发人员升级到WKWebView，但如果您仍然需要使用UIWebView，那么降级的步骤就是：
方案1：强制使用UIWebView
您可以强制cordova使用默认引擎（UIWebView）通过显式地告诉所以：
<preference name =“CordovaWebViewEngine”value =“CDVUIWebViewEngine”/>
方案2：卸载Ionic的WebView插件
$ ion cordova插件删除cordova cordova-plugin-ionic-webview --save
$ rm -rf platforms/
$ rm -rf plugins /
$ ion cordova build ios
常见问题
App数据不会复制
我刚从UIWebView迁移到WKWebView，存储数据丢失。
由于WKWebView本质上是一个新的浏览器，所以在LocalStorage或IndexDB中可以拥有的任何数据都不会被复制。 在这种情况下，建议将数据迁移到本机存储机制SQLite，以确保数据仍然可用。
我们强烈建议您使用ionic-storage，它解决了持久存储的大部分问题。
app无法加载，白屏
代码没有任何报错信息，但是仍然黑屏
大多数时候这个问题来自于Cordova没有正确安装
确保Xcode已经关闭
清楚安装:
rm -rf platforms
rm -rf plugins
重新添加平台
ionic cordova platform add ios
确保允许localhost:
<allow-navigation href="http://localhost:8080/*"/>
确保WKWebView 是默认引擎:
<feature name="CDVWKWebViewEngine">
<param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
构建ionic ios
ionic cordova build ios
打开Xcode 重试.
Malloc: *** error for object 0x1700af180: pointer being freed was not allocated
它看起来像是一个Safari错误，因此只有当您使用Safari调试Webview时才会出现。 在Safari中：Develop - > Your_Device_Name取消选中“自动显示JSContexts的Web检查器”。
这应该可以解决你的问题。
本地资源无法加载
一些<img>/<video>/<audio>无法加载.
确保资源的URL不以file：//开头。 如果是这样，请使用normalizeURL（）重写路径：
import { normalizeURL} from 'ionic-angular';
imageSRC = normalizeURL(url);
配置AVAudioSession不影响WKWebView
WKWebView与您的应用程序分开运行。 它可能与您的应用程序的AudioSession分离了自己的AudioSession。 一个可行的解决方法是允许您的应用程序的AudioSession与其他人混合：
[[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryPlayAndRecord
withOptions:AVAudioSessionCategoryOptionMixWithOthers
error:&error];
幸运的是，Ionic的WebView可以通过将AudioCanMix cordova首选项设置为true来为您做到这一点。
<preference name =“AudioCanMix”value =“true”/>
XHR请求不起作用
我正在尝试使用XHR（或fetch）调用一些远程服务，但它不工作。
如前所述，WKWebView强制执行CORS。 您将需要将http：// localhost：8080列入“Origin”and/or 正确实现CORS。
无法实现CORS
我不控制后端，所以我不能添加CORS，如何使它与WKWebView一起工作？
如果在服务器中不可能实现或配置CORS，则有一个本机插件可以使用本地代码“代理”HTTP请求，因此可以完全绕过CORS：
在这里阅读更多：cordova-plugin-http。
网友评论