WKWebView微信适配

olle 发布于2019-08-20 14:43 / 600人阅读

摘要：背景是微信将要从切换成，前端的页面需要进行适配。以往在做滚动加载的组件时，微信内的翻页的时候老是要等待下一页加载，现在终于不用等了。当然也有坑，具体微信内要怎么兼容看文档。微信在，已经开始灰度了，后续版本会全量。

WKWebView

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

什么是WKWebView

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

为什么要用WKWebView

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

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

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

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页面的影响

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

令人高兴的是，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，可以说再见了。

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

答案是没有了，即使滑动页面，js照旧执行。所以节流函数还是很有必要，减少不必要的大量计算。

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

目前就发现这两点比较明显的改善，如果后续发现了再补充。当然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...，未经过允许，禁止一切形式的转载

idc机房托管云服务器 WKWebView wkwebview webrtc wkwebview webrtc黑屏 wkwebview没释放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81871.html

CSS-3D 加速导致微信手Q闪退

摘要：笔者经常与微信手平台打交道，偶尔会遇到页面导致下微信手程序闪退崩溃的情况。导致微信手闪退的原因笔者遇到的大概有以下几种加速过多带滚动条的结构过多绘制图像过多本文仅讨论加速造成微信手闪退的必要条件。笔者经常与微信手Q平台打交道，偶尔会遇到 H5 页面导致 iOS 下微信手Q程序闪退（崩溃）的情况。导致微信手Q闪退的原因笔者遇到的大概有以下几种： CSS-3D 加速过多；带滚动条的结...

canopus4u 2019-06-25 16:25 评论0 收藏0
iOS相关

摘要：多线程是通过提高资源网络请求之与的二次封装及意义之后，被苹果抛弃，该来的即便是迟些，但最终肯定会来。注意，不是线程安全的，但是线程安全的。也就是说，因为忙导致的触发时刻超出了的情况下，并不会取消，而不执行回调。超简单！！！ iOS 设置状态栏、导航栏按钮、标题、颜色、透明度，偏移等 // 一行代码搞定导航栏颜色navBarBarTintColor = .white// 一行代码搞定导...

renweihub 2019-06-25 16:37 评论0 收藏0
小程序开发坑点总结

摘要：整个小程序所有分包大小不超过单个分包主包大小不能超过微信小程序主流框架对比应该算是最早发布的小程序开发框架，提供了类的语法风格和特性，现阶段应该也是应用最广泛的框架吧。不过微信官方为了防止下载离线包的时间过程，也严格限制了小程序包的体积。那些年我们踩过的坑css样式不能引用本地图片资源，只能引用线上资源(background-image)，引用本地图片资源只能用标签。{{}}不能执行...

lowett 2019-08-30 15:44 评论0 收藏0
最全的weex踩坑攻略-出自大量实践与沉淀

摘要：如果你对微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少顾虑而准备的技术对比表格，是的，开发钉钉的微应用是如此的简单。访问这个链接阅读钉钉微应用与微信小程序技术对比表格。与内存管理由于运行在中，此与有较大差异。在自己的业务环境中使用，并开放给第三方isv，企业开发者使用，这是一篇有内涵有故事的文章。如果你对weex微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少...

qc1iu 2019-08-20 17:42 评论0 收藏0
最全的weex踩坑攻略-出自大量实践与沉淀

摘要：如果你对微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少顾虑而准备的技术对比表格，是的，开发钉钉的微应用是如此的简单。访问这个链接阅读钉钉微应用与微信小程序技术对比表格。与内存管理由于运行在中，此与有较大差异。在自己的业务环境中使用，并开放给第三方isv，企业开发者使用，这是一篇有内涵有故事的文章。如果你对weex微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少...

leiyi 2019-06-25 11:25 评论0 收藏0