WKWebView微信适配

时间 2019-12-13

标签 wkwebview 微信适配繁體版

原文原文链接

WKWebView

背景是微信webview将要从UIWebView切换成WKWebView，前端的web页面须要进行适配。javascript

什么是WKWebView

官方的解释：WKWebView是一个显示交互式Web内容的对象，例如浏览器内的应用程序。您可使用WKWebView在您的应用程序中嵌入Web内容。为此，建立WKWebView对象，将其设置为视图，并向其发送加载Web内容的请求。html

为何要用WKWebView

首先来看下UIWebView的槽点，一般的iOS App用UIWebView加载网页，这个自iOS2开始使用的网页加载器一直是开发的心病：加载速度慢，占用内存多，优化困难。若是加载网页多，还可能由于过量占用内存而给系统kill掉。前端

那wk有什么特色：
一、在性能、稳定性、内存占用有很大提高。有的文章说4倍的渲染性能，不知真假，从体验上来看，很是流畅。
二、容许JavaScript的Nitro库加载并使用（UIWebView中限制）；
三、支持了更多的HTML5特性；
四、高达60fps的滚动刷新率以及内置手势；滚动刷新频率，从实际体验看，确实流畅。java

总得来讲更快，更少，更完善，iOS 的最佳选择。web

Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView。浏览器

iOS 8.0后的版本开始支持，目前已经都10.+了，能够大胆的用。微信

对H5页面的影响

一、点击事件，300ms的延迟还存不存？app

使人高兴的是，300ms的这个问题在wkwebview获得了解决。前提是须要设置user-scalable=0 的页面，WKWebView将会移除 300ms 的 click 事件延迟。函数

var t;
document.getElementById('j_click').ontouchstart = function(){
   t = +new Date();
};
document.getElementById('j_click').onclick = function(){
   alert(+new Date() - t);
};

// 若是UIWebview 或者没有设置user-scalable的wk页面，t 大概是400ms+
// WKWebView t能够到40ms左右

fastclick这类兼容库以及用touch事件模拟的click，能够说再见了。性能

二、滑动页面JS挂起的问题还有吗？

答案是没有了，即便滑动页面，js照旧执行。因此节流函数仍是颇有必要，减小没必要要的大量计算。

以往在作滚动加载的组件时，微信内的翻页的时候总是要等待下一页加载，如今终于不用等了。

<body style="height:1000px;">
   <ul id="add"></ul>
</body>
<script type="text/javascript">
window.onscroll = function(){
       var ol = document.createElement('ol');
       ol.innerHTML = new Date();
       document.getElementById('add').appendChild(ol)
}
</script>

目前就发现这两点比较明显的改善，若是后续发现了再补充。固然wkwebview也有坑，具体微信内要怎么兼容看文档。

iOS微信在6.5.1，已经开始灰度了，后续版本会全量。兼容wkwebview须要关注的点请参考官方文档。

参考
https://zhuanlan.zhihu.com/p/...
http://www.layabox.com/news/2...
http://nshipster.cn/wkwebkit/

本文地址：http://www.iamaddy.net/2017/0...，未通过容许，禁止一切形式的转载