关于手机webview内核、默认浏览器、HBuilder边改边看浏览器的区别和兼容性

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

  • iOS的webview有uiwebview和wkwebview的区别
    先说iOS。
    从iOS8起,Apple推出了wkwebview,Safari默认使用wkwebview。
    5+默认使用的是uiwebview,如果要切换为wkwebview,需要在manifest里或创建webview时的参数里指定kernel。
    uni-app则固定使用wkwebview。这个和微信小程序的策略一样,它在iOS上也是只能渲染在wkwebview下。
    这两种webview各有利弊。
    wk的问题是:不支持websql(iOS8、9上不支持,iOS10恢复支持)、不支持plus.navigator.setCookie、不支持webview的overrideresource方法、不支持js原生加密、wk第一次渲染速度略慢于uiwebview;
    但wkwebview的好处是:节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示(滚动前就加载图片不受影响)、wkwebview的video播放支持AirPlay。
    如果同时在一个app里使用ui和wk两种webview,注意2种webview之间的cookie、localstorage、session不共享,但plus.storage是共享的。

  • Android手机的webview,是Google的Android system webview,也是5+引擎所依赖的。
    在Android4.4以前,webview是Android webkit 浏览器内核,很多HTML5标准语法不支持,比如indexeddb、webgl等,canvas性能也非常差。
    Android4.4起,变成了chromium内核,性能和现代语法支持大幅提升。
    从Android5开始,webview脱离rom可单独更新,伴随着chrome的发版,google会在google play store上同步更新Android system webview。
    由于google play store被墙,国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。http://a.vmall.com/app/C10730262
    目前国内的Android手机webview版本差异很大,从chrome37一直跨度到60,手机用户侧使用了到底是哪个版本是不一定的。
    所以HBuilder的开发者需要注意,尽量不要使用chrome35以后的新增的语法,使用普通常规的写法完成业务开发。
    特别的,阿里云OS的手机,虽然能支持Android程序运行,但其标称的Android5或更高版本,均不支持独立安装Android system webview来升级Webview引擎。

  • HBuilder边改边看浏览器的chrome版本是35。HBuilderX是chrome49
    不少开发者抱怨HBuilder为何不升级边改边看的浏览器,原因就是上一条,如果你使用了chrome35以后新增的语法,在边改边看环节就会直接报错。提醒你使用了可能造成兼容性的写法。
    很多开发者自己电脑上使用的chrome是最新版,有些代码在chrome最新版没问题,但跑到HBuilder边改边看就有问题,其实这是好事,要知道即使pc用户也很容易使用着低版本浏览器,你写的代码总要为用户服务,避免你这里写的没问题,用户那里出了问题你却不知道。
    更新:目前国内Android的主流webview版本已经升级到49,HBuilderX的边改边看内置浏览器也升级到了49。大部分es6的语法可以直接运行。但仍然强烈建议发布时把es6的代码编译为es5。

  • Android手机默认浏览器和webview的区别
    国外品牌的安卓手机,自带浏览器就是chrome。而国内安卓手机,自带浏览器大多是QQ浏览器、UC浏览器的贴牌,极个别是自己改造chromium。
    所以手机自带的浏览器并不等于webview,在一个平台可运行,不代表另一个平台可兼容。
    QQ、UC、360等浏览器也基本是基于chromium做改造,不同版本的浏览器其使用的chromium内核版本也不一样。具体可以打印ua查看。

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

  • 最后,有人问可否在打包时直接集成Android system webview,减少浏览器兼容问题?
    最新的webview体积高达55M,DCloud的云打包是不支持超过30M的打包请求的。手机用户也比较难接受这种体积。有兴趣的开发者可以自己研究离线打包。
    我的建议倒是这样:js里判断当前手机是Android5以上,且webview版本过低,比如低于40,可以提醒用户是否升级webview,然后引导用户去之前贴出的地址下载更新webview。
    但不管怎么样,尽量少写可能遇到兼容性问题的代码。

\n

目前HTML5中国产业联盟在推动国内各手机厂商都在wifi下自更新webview,以减少浏览器兼容性问题,目前已经推动金立完成此事,其他厂商有成果后会继续公布。

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


9 分享 关注
lhyh 菜鸡 DCloud_客服_Trust nearwmy@gmail.com 秋天无风 yangmapo@qq.com xiaoxiyao kaiven 1432077958@qq.com
wanghui

wanghui 回复 DCloud_heavensoft

我使用的vue框架,发现切换到wkwebview后,mounted里的代码就都不执行了,这是怎么回事?
0 赞 23 小时前
wanghui

wanghui 回复 2352645907@qq.com

没有,我使用的vue,发现使用wkwebview后,mounted里的代码都没执行
0 赞 23 小时前
2352645907@qq.com

2352645907@qq.com 回复 wanghui

请问你使用wkwebview的问题解决了么
0 赞 1 天前
wanghui

wanghui 回复 DCloud_heavensoft

检查了下,使用wkwebview后,mui.plusReady这个方法失效,里面的方法不会执行了
0 赞 3 天前
DCloud_heavensoft

DCloud_heavensoft 回复 wanghui

单独发帖,提供下HBuilder版本和测试工程,我们看看
0 赞 3 天前
wanghui

wanghui 回复 DCloud_heavensoft

我也是使用了wkwebview,真机运行苹果手机一片空白,难道要重新云打包?
0 赞 3 天前
DCloud_heavensoft

DCloud_heavensoft 回复 2352645907@qq.com

基座肯定是支持wkwebview的,排查其他错误吧。uni-app也是运行在相同基座上,并且默认就是跑在wkwebview里的
0 赞 3 天前
2352645907@qq.com

2352645907@qq.com

为什么我修改了manifest里的kernel为"ios": "WKWebview”,真机运行苹果手机上一片空白呢,"ios": "UIWebview" 运行就是正常的,想改为WKWebview,有什么其他的办法么,还是我写错了?
"kernel": {
// "ios": "WKWebview"
"ios": "UIWebview"
}
0 赞 3 天前
1432077958@qq.com

1432077958@qq.com 回复 DCloud_heavensoft

在这里找到了
http://ask.dcloud.net.cn/article/94
kernel参数
0 赞 2018-08-17 11:01
1432077958@qq.com

1432077958@qq.com 回复 DCloud_heavensoft

没有搜索到,如果手动增加应该在哪个节点下,可以贴下代码么?
0 赞 2018-08-17 10:00
DCloud_heavensoft

DCloud_heavensoft 回复 1432077958@qq.com

看manifest的手册,里面搜wkwebview
0 赞 2018-08-16 18:28
1432077958@qq.com

1432077958@qq.com

5+默认使用的是uiwebview,如果要切换为wkwebview,需要在manifest里或创建webview时的参数里指定kernel。
请问怎么制定?
0 赞 2018-08-16 18:06
1432077958@qq.com

1432077958@qq.com

这就是金立手机倒闭的原因吗?^_!!
0 赞 2018-08-16 18:02
FYC

FYC

额~云打包还有限制 :(
0 赞 2018-06-14 11:14
tiandiweb@qq.com

tiandiweb@qq.com

我在IOS上 使用 plus.navigator.setCookie 没有效果,只能使用 浏览器的 document.cookie= xxx实现,应该者能在这篇文章中找到原因。可能使用了 wkwebview
0 赞 2018-04-13 13:39
DCloud_heavensoft

DCloud_heavensoft 回复 daoket@163.com

后续会提供新版供选择
0 赞 2018-01-24 04:08
daoket@163.com

daoket@163.com

并不是所有人都需要在低版本浏览器上兼容,应该给出一个自定义chrome版本的属性,而不是统一使用35,如果再不升级chrome版本,我想我不会再使用这个编辑器了
0 赞 2018-01-18 09:03
DCloud_heavensoft

DCloud_heavensoft 回复 gaosj1993@foxmail.com

参考:http://ask.dcloud.net.cn/question/22279
0 赞 2017-11-25 20:01
gaosj1993@foxmail.com

gaosj1993@foxmail.com

为什么不集成腾讯的x5webview?
0 赞 2017-11-17 11:03
SDK_骁骑

SDK_骁骑 回复 梁大路

感谢回复,IOS设备上 safari和WKWebview对websql的支持情况是不同的,safari浏览器在各版本上都是支持websql的,
WKWebview和Safari的情况有些不同, 在IOS 8和 IOS 9上 WKWebview不支持websql,IOS 10开始支持websql,
UIWebview在各版本上都是支持websql的
0 赞 2017-07-20 19:11
梁大路

梁大路

https://caniuse.com/#search=websql

这是websql的支持情况。从3.2版本开始一直支持啊,文中所说的“这两种webview各有利弊,wk不支持websql、不支持plus.navigator.setCookie、不支持webview的overrideresource方法,wk第一次渲染速度略慢于uiwebview;”只怕有误吧
0 赞 2017-07-20 09:59
秋天无风

秋天无风

H5+还是得受兼容性困扰
0 赞 2017-06-22 14:33
giddens

giddens

今天上论坛就是为了找这个,刚刚就看到这个。感谢
0 赞 2017-04-21 10:16
菜鸡

菜鸡

厉害了我的哥
0 赞 2017-04-21 09:20

要回复文章请先登录注册