背景

首先，小生从事于H5游戏开发，目前工作内容主要是开发指定的H5游戏嵌入到app包里面(比如：直播间里的小游戏)。不可避免需要与原生开发进行频繁的人际交互和代码交互，特别是对于一些安卓低端机的适配问题，更是占用了一定程度上的开发时间。比如：在某安卓5.1.1手机中打开H5游戏，creator直接抛出“This device does not support webgl”；或者是某安卓低端机打开后游戏动效播放不流畅等(以上低端机某宝人均售价688元/部)。其实，以上这类问题主要与原生开发这边所弹出的webview属性和内核有关。所以，该篇文章主要讨论ios和android的webview内核问题。

注：侧重讨论android，ios目前还没遇到过渲染方面的什么问题。

IOS

从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，是手机默认的webview，及Google的Android system webview，它自带于手机rom中，所有依赖系统webview的应用都调用这个webview。在安卓系统4.4以前，安卓手机自带webview的内核是Android webkit 浏览器内核，很多HTML5标准语法都不支持，比如indexeddb、webgl等，canvas性能也非常差。

从安卓系统4.4起，webview内核变成了chromium内核，内核版本是chrome30，性能和现代语法支持大幅提升。从安卓系统5开始，webview脱离rom可单独更新，伴随着chrome的发版，google会在google play store上同步更新Android system webview。但随着google play store被墙，国内用户可通过华为应用市场的镜像下载安装最新版Android system webview。

由于安卓系统源码开源，也存在个别国产rom改坏了这块的机制，使得自身的system webview无法独立安装升级。所以，目前国内的Android5以上手机webview版本差异很大，从chrome37一直跨度到60，手机用户侧使用了到底是哪个版本是不一定的。

那这跟我一个H5游戏开发者有什么关系呢？

答案：有，掌握这方面的知识，当测试说游戏在低端机上没办法玩时、原生这边想往你这边甩锅时，用你的知识存储量，给他漂亮的甩回去。正所谓：知识就是力量也！！！咳咳，玩笑玩笑，毕竟大家都是打工人，和气生财，和气生财。

android手机自带的默认浏览器和webview的区别

安卓手机大致分两类：国内品牌、国外品牌。国外品牌的安卓手机，自带浏览器基本就是chrome。而国内安卓手机，自带浏览器大多数是QQ浏览器、UC浏览器的贴牌，极个别是自己改造过的chromium。

所以，手机自带浏览器并不等于webview，在自带浏览器里能运行的H5游戏(相当于在QQ浏览器或UC浏览器中运行)，在webview中并不一定兼容。除此之外，QQ、UC、360等浏览器也基本都是基于chromium做改造，不同版本的浏览器其使用的chromium内核版本也不一样。具体内核版本多少，需要打印ua查看。

备注：夜神等安卓模拟器的Android版本是4.4，很多H5新语法都不支持。所以，如果想对H5游戏(或H5页面)进行安卓低端机的适配调试，那么请找真机进行测试。

安卓低端机适配

1、引导用户更新Android system webview

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

2、有人问可否在打包时直接集成新版Android system webview，减少浏览器兼容问题？

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

3、腾讯的x5内核

3.1 使用x5能解决什么问题

3.1.1、x5适配了rom的自定义主题字体，与原生字体保持一致。不会出现一个界面部分字体为原生字体、部分字体为webview字体的问题。之前系统webview在部分手机上不能适配rom自定义主题的字体。

3.1.2、系统的webview有浏览器兼容问题，低端Android的webview有很多新语法都不支持。使用x5可以拉齐webview内核。对于5+App和wap2app，可以全部拉齐。对于uni-app，由于uni-app自带js引擎，在js和组件层面本身就不存在浏览器兼容问题，只有vue页面的css涉及浏览器兼容问题。如果你想使用比如sticky等新css语法，此时可通过x5拉齐。如果开发者比较注意，不使用太新的语法的话，其实此时x5在这方面没有用处。

3.1.3、x5内核自带的video实现强于html的video，支持视频格式更多。（这个只能用于5+app和wap2app的html里的自带video，以及uni-app的web-view组件里的video。uni-app默认的video组件本身就是原生的，和x5无关）

3.1.4、远程web页面防劫持是x5内核的一大亮点。

3.2 集成X5内核的注意事项

3.2.1、x5没有64位so库，无法提交Google Play。

3.2.2、x5不支持在PC模拟器上运行。一切真机为主。

3.2.3、x5内核对webview嵌套支持的不友好。使用x5渲染的页面尽量不要使用webview嵌套（父子页面等）容易出现动画卡顿等现象。

3.2.4、因x5加载内核机制问题，云打包APK第一次安装运行可能x5还没有下载，此时不是x5内核渲染页面，而是系统webview渲染页面。但x5下载完毕后，杀掉进程重新运行，就会使用x5内核渲染页面。

3.2.5、并非所有手机都有x5内核，当手机端没有时x5内核时，App启动后会先下载内核，在x5加载成功前，调用webview仍然是系统webview。

3.2.6、html5 嵌入iframe视频fixed定位会导致应用闪退

3.2.7、部分系统(华为)修改字体后不会重启系统。导致x5页面不能够立即更换字体库重新进行渲染。需要杀掉进程重新启动应用（back退出应用无效）才可以重置字体库进行页面渲染。

3.2.8、APK本身已经集成了X5才能通过wgt升级。如果apk本身没集成X5则不可以通过WGT升级支持X5。需要改为APK升级！

3.2.9、可通过plus.navigator.getUserAgent判断UA中是否包含MQQBrowser关键字判断当前webview是否为X5渲染。 HX2.6.16+支持

3.2.10、x5内核渲染页面的滚动条。会随着页面内容的长短显示滚动滑块。可按住滚动滑块拖动实现快速滚动。与普通webview滚动条有差异。

参考文档：

真机运行和打包的差异

DCloud App集成 X5 内核（腾讯浏览服务TBS）说明

Appstore审核反馈废弃UIWebview APIs问题的说明

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

原生webview内核对于H5页面渲染兼容性相关推荐

微信小程序webview内嵌H5页面缓存
微信小程序webview内嵌H5页面缓存参考链接: link. 问题描述: 公司项目已经开发了一个移动端的vue项目,以微信小程序作为一个入口,节省资源去原生开发,webview成了最好的选择.vu ...
微信小程序webview内嵌h5页面
微信官方文档web-view | 微信开放文档正式上线前准备(前期开发调试可以忽略) 首先登录小程序管理后台,把 web-view 直连的 h5 页面地添加到配置域名白名单中比如我想要小程序直连地 ...
flutter 中使用 WebView加载H5页面异常net:ERR_CLEARTEXT_NOT_PERMITTED
最近有个flutter项目中根据搜索结果跳转到相应的H5页面发现老是报错,曾现在闲暇拉出来解决哈先来看一个搜索功能的测试已进入详情页面就提示错误,尴尬了. 只有去检测代码了撒 Search.dar ...
小程序接入h5页面_原生小程序接入H5页面，请求后台接口，获取数据
项目开发中赶上三端接入h5的需求,因此本身动手作h5页面,可是在作的过程当中也赶上了许多的问题javascript 小程序端不支持在本地引入,因此须要将h5发布服务器,以请求接口的形式进行访问html ...
关于WebView加载H5页面下载文件和下载完毕后自动打开文件
前段时间有个项目需要在H5页面里下载文档文件,由于项目需求这里采用Android系统自带DownloadManager来进行后台自动下载管理,我们只需要稍微设置几个参数就进行文件下载了,并且下载进行时 ...
webView加载H5页面出现空白页的解决办法
最近在做一个理财的项目,其中用到的H5页面比较多,在项目后期出现了很多bug,今天介绍下webView加载H5出现空白的解决办法首先介绍下出现问题的场景,我们在一个Activity中镶嵌了一个H5的 ...
鸿蒙系统中的 WebView 加载H5页面出现net::ERR_CLEARTEXT_NOT_PERMITTED的解决方法
目前在学习鸿蒙系统开发相关的应用,在加载H5页面的时候,在页面上显示出现这也错误提示 net::ERR_CLEARTEXT_NOT_PERMITTED,百度了一番,显示的结果都是在安卓系统上的解决办法 ...
小程序web-view跳转H5页面，H5页面通过事件返回小程序页面
小程序页面: //url为H5页面路径 H5页面跳转小程序页面 npm install weixin-js-sdk 在使用的vue单页面内引入:import wx from 'weixin-js-sd ...
MuMu模拟器+Edge浏览器：Android原生APP嵌入的H5页面元素定位
前提条件: 1.已安装MuMu模拟器 2.已配置adb环境 adb链接MuMu模拟器 C:\Users\shenyf>adb connect 127.0.0.1:7555 connected t ...

原生webview内核对于H5页面渲染兼容性

背景

IOS

Android

安卓系统自带webview

安卓低端机适配

原生webview内核对于H5页面渲染兼容性相关推荐

最新文章

热门文章