DCloud_heavensoft
DCloud_heavensoft
  • 发布:2017-04-21 06:01
  • 更新:2022-02-09 15:34
  • 阅读:101936

关于手机webview内核、默认浏览器、各家小程序的渲染层浏览器的区别和兼容性

分类:HTML5+

浏览器兼容性是前端常见问题,经常有人会问:我的代码在xx浏览器上可以用,为什么在HBuilder真机运行或打包的就有问题?

先说iOS。

iOS的webview有uiwebview和wkwebview的区别

从iOS8起,Apple推出了wkwebview,Safari默认使用wkwebview。
由于iOS13将uiwebview列入非公开api,并说明未来会禁止使用uiwebview的应用上架。所以从HBuilderX 2.2.5起,默认使用的是wkwebview,如果要切换为uiwebview,需要在manifest里或创建webview时的参数里指定kernel。
uni-app的app端视图层固定使用wkwebview。这个和微信小程序的策略一样,它在iOS上也是只能渲染在wkwebview下。
这两种webview各有利弊。
wk的问题是:不支持websql(iOS8、9上不支持,iOS10恢复支持)、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、在联网及本地文件读取等有各种跨域限制、wk第一次渲染速度略慢于uiwebview;(uni-app的js本来也不运行在webview里,所以无所谓这些限制)
但wkwebview的好处是:节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示(滚动前就加载图片不受影响)、wkwebview的video播放支持AirPlay(uni-app的video组件是原生的,暂不支持ariplay)。
如果同时在一个app里使用ui和wk两种webview,注意2种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。
详细的wkwebview的使用注意参考:https://ask.dcloud.net.cn/article/36348

Android手机的webview,分系统webview和x5两种

Android系统webview

系统webview,是默认的webview,及Google的Android system webview,它自带于手机rom中,所有依赖系统webview的应用都调用这个webview。
在Android4.4以前,webview是Android webkit 浏览器内核,很多HTML5标准语法不支持,比如indexeddb、webgl等,canvas性能也非常差。
Android4.4起,变成了chromium内核,内核版本是chrome30,性能和现代语法支持大幅提升。
从Android5开始,webview脱离rom可单独更新,伴随着chrome的发版,google会在google play store上同步更新Android system webview。
由于google play store被墙,国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。http://a.vmall.com/app/C10730262
也有个别国产rom改坏了这块的机制,使得自身的system webview无法独立安装升级。
目前国内的Android5以上手机webview版本差异很大,从chrome37一直跨度到60,手机用户侧使用了到底是哪个版本是不一定的。
所以HBuilder的开发者需要注意,尽量不要使用chrome40以后的新增的语法,使用普通常规的写法完成业务开发。

关于如何查看Android手机端webview的版本:

  1. 日志里查ua
  2. 在系统设置里找到所有应用,显示隐藏系统进程,在里面找到Android system webview,显示的版本即为chrome版本。
  • Android手机默认浏览器和webview的区别
    国外品牌的安卓手机,自带浏览器就是chrome。而国内安卓手机,自带浏览器大多是QQ浏览器、UC浏览器的贴牌,极个别是自己改造chromium。
    所以手机自带的浏览器并不等于webview,在一个平台可运行,不代表另一个平台可兼容。
    QQ、UC、360等浏览器也基本是基于chromium做改造,不同版本的浏览器其使用的chromium内核版本也不一样。具体可以打印ua查看。
    注意夜神等安卓模拟器的Android版本是4.4,很多新语法都不支持。

  • 如果你有影响用户的能力,为了给用户更好的体验,可以引导Android用户安装最新版Android system webview。应用宝、华为、金立等应用市场均可下载这个apk,或者翻墙到google play store。
    在华为、小米、金立手机上,wifi下会自动更新Android system webview。
    尤其是有些Android5用户使用的Android system webview 37版本,有硬件加速bug,闪屏花屏,此时升级webview即可解决。

  • 有人问可否在打包时直接集成新版Android system webview,减少浏览器兼容问题?
    webview体积至少50M起,体积实在太大了。有兴趣的开发者可以自己研究离线打包。
    倒是可以这样:js里判断当前手机是Android5以上,且webview版本过低,比如低于40(ua可以判断),可以提醒用户是否升级webview,然后引导用户去之前贴出的地址下载更新webview。
    但不管怎么样,尽量少写可能遇到兼容性问题的代码。

Android App也可以使用x5 webview

从HBuilderX 2.5.3起,支持使用腾讯的x5内核,详见文档https://ask.dcloud.net.cn/article/36806

各小程序平台的webview内核说明

  • 各家小程序,在iOS上大多使用的是wkwebview内核,已知仅百度小程序是uiwebview。wkwebview是iOS的一部分,其版本根据iOS版本的不同而不同。可以在caniuse直接看到iOS版本对应的浏览器兼容问题。
  • Android上各家小程序使用的是基于chromium改造的浏览器内核。具体如下:
    • 微信:老版微信使用的是x5,ua特征字符串有Chrome/66.0.3359.126 MQQBrowser/6.2 TBS/044903;后来微信团队自研了MWEB内核,ua特征字符串有Chrome/67.0.3396.87 XWEB/882 MMWEBSDK/190506
    • 百度小程序:ua特征是Chrome/63.0.3239.83,并且包含baiduboxapp字符串
    • 支付宝小程序:根据支付宝版本,chrome有57和69等版本,ua特征字符串有NebulaSDK
    • QQ小程序:根据QQ版本,chrome有66和68等版本,ua特征字符串有QQ/MiniApp
    • 头条小程序:ua特征是Chrome/62,ua特征字符串有ToutiaoMicroApp

uni-app中,js方面不存在浏览器兼容问题,因为js都使用的是独立的js引擎,与webview无关,API也是仅小程序支持的API才可以使用。所以uni-app的浏览器兼容性问题,主要是css。注意不要使用太新的css就可以。

如果要查阅真机运行和打包的区别,访问此文:http://ask.dcloud.net.cn/article/1322

22 关注 分享
lhyh 菜鸡 Trust n***@gmail.com 秋天无风 杨婆婆管家家 xiaoxiyao kaiven 1***@qq.com g***@gmail.com lifeng_dev skysowe 睡不醒哎 7***@qq.com 风之影0539 3***@qq.com h***@163.com Feelec 2***@qq.com 1***@qq.com z***@protonmail.com hechenghuan

要回复文章请先登录注册

machi的奶茶

machi的奶茶

回复 老哥教教我 :
可通过F墙,https://mobile.softpedia.com/apk/android-system-webview/ 去下载,各个版本都有
2022-02-09 15:34
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 1***@qq.com :
WKWebview与UIWebview有部分区别,包括更严格的联网或canvas跨域限制,详见:https://ask.dcloud.net.cn/article/36348
2020-10-11 17:13
1***@qq.com

1***@qq.com

回复 virtualTurth :
老哥,有解决方案了吗?
2020-10-11 09:20
老哥教教我

老哥教教我

Android system webview 各大应用市场怎么没有这个软件是不是过时了?
2020-06-14 13:20
大逗逗

大逗逗

请问大佬,使用微信小程序web-view嵌套H5页面,H5页面的title可以展示在微信小程序顶部与右边两按钮同栏里吗?
2020-06-12 14:43
virtualTurth

virtualTurth

回复 DCloud_heavensoft :
大佬,问下我的app切换成wk后,引入的js文件里的方法不会执行,并且报script line0,自己在本页面纯原生js写的就可以,所有引入的外部js文件都不执行,是怎么回事,我是写在plusReady里的
2020-05-18 15:42
3***@qq.com

3***@qq.com

回复 wanghui :
题主解决了吗
2019-11-21 19:45
全栈

全栈

回复 全栈 :
终于在找到:http://ask.dcloud.net.cn/article/12807
2019-04-13 14:19
全栈

全栈

请问谁知道 “创建webview时的参数里指定kernel” 怎么指定?看文档暂时找不到,乱测试也无效果
2019-04-13 14:12
wanghui

wanghui

回复 DCloud_heavensoft :
我使用的vue框架,发现切换到wkwebview后,mounted里的代码就都不执行了,这是怎么回事?
2018-12-10 11:39