WKWebView的使用介绍

技术咨询-Kenny

在iOS系统中，webView分为UIWebView和WKWebView，相比于UIWebView，WKWebView在性能和功能等方面有很大提升，具有Safari相同的JavaScript引擎，支持更多的HTML5特性，并且没有点击事件延迟，滚动时也不会影响页面渲染。

使用方式：

可以在config.xml全局配置useWKWebView字段来使用：

1. <preference name="useWKWebView" value="true" />

复制代码

或者在打开页面时通过useWKWebView参数来使用：

1. api.openTabLayout({
   
2.     name: 'detail',
   
3.     url: './detail.html',
   
4.     useWKWebView: true,
   
5.     bgColor: '#fff',
   
6.     title: '详情',
   
7.     navigationBar: {
   
8.         background: '#fff'
   
9.     }
   
10.     });

复制代码

注意事项和建议：

• 在打开新页面时应尽量使用openTabLayout来代替openWin，使用tabLayout的原生导航栏，加快打开速度。
• 为页面设置合适的背景颜色，以避免在窗口切换过程中闪现黑色背景。
• 使用UIWebView时，若系统内存不足时会直接结束掉应用，而使用WKWebView时则只是结束掉页面的渲染进程，因此会表现为页面白屏。可以在config.xml中配置WKWebViewRecoveryMode来刷新页面或者热重启应用。
• localStorage和UIWebView页面不通用。为避免出现兼容性问题，简单的本地数据存取可以用api对象下的prefs相关接口，而大量的缓存数据则可以使用fs、db来存储。
• 跨域问题。WKWebView中限制了跨域访问，若服务器未设置允许跨域，则无法使用XMLHttpRequest和jQuery的ajax访问，只能使用api.ajax。在canvas中画图片时，除了图片服务器需设置允许跨域外，还需要使用blob的方式来加载图片，可参考附件示例。本地图片则可以转换成base64使用。注：为方便查看js报错信息，在loader和测试版（debug打开）中默认允许跨域，而正式版禁止跨域。
  

• 输入框自动获取焦点问题。为达到更好的体验，如果输入框要在打开页面时自动获取焦点弹出键盘，需使用api.setFocus方法。