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

发布于 1周前 作者 wuwangju 来自 Uni-App

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

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； 但wkwebview的好处是：节省内存、滚动时懒加载的图片也可以实时渲染而uiwebview在滚动停止后懒加载的图片才能显示（滚动前就加载图片不受影响）、wkwebview的video播放支持AirPlay。

如果同时在一个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。 也有个别国产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


Harmonyos Next教程
1 回复

在探讨uni-app关于手机webview内核、默认浏览器、以及各家小程序渲染层浏览器的区别和兼容性时，理解这些环境背后的技术实现是关键。以下是一些代码示例和说明，用于展示如何在uni-app中处理不同环境下的兼容性问题。

1. 手机Webview内核与默认浏览器

手机webview通常基于Chrome或其他浏览器的内核，但可能有所定制。为了处理不同webview内核的兼容性，可以利用条件编译和特性检测。

// 条件编译示例，针对Android和iOS平台分别处理
#ifdef APP-PLUS
// 针对uni-app在App平台（使用webview）的代码
if (window.WebViewJavascriptBridge) {
    // Android平台webview特有的处理
    window.WebViewJavascriptBridge.init(...);
} else {
    // iOS平台webview或其他情况的处理
}
#else
// 针对H5平台（默认浏览器）的代码
console.log('Running in default browser');
#endif

2. 各家小程序渲染层浏览器

小程序通常有自己的渲染层浏览器，如微信小程序使用的是双线程模型（逻辑层和视图层分离），而支付宝小程序、百度小程序等也有各自的实现。为了兼容这些平台，uni-app提供了统一的API，但开发者仍需注意平台差异。

// 示例：获取系统信息，不同小程序平台可能有不同返回
uni.getSystemInfo({
    success: function(res) {
        console.log(res.platform); // 输出平台类型，如'ios'、'android'、'windows'等，或特定小程序平台的标识
        if (res.platform === 'weixin') {
            // 微信小程序特有的处理
        } else if (res.platform === 'alipay') {
            // 支付宝小程序特有的处理
        } else if (res.platform === 'baidu') {
            // 百度小程序特有的处理
        }
        // 其他平台处理
    }
});

3. 兼容性处理

对于CSS和JavaScript特性，可以利用Polyfill和Feature Detection来增强兼容性。例如，对于Promise的支持：

if (!window.Promise) {
    // 引入Promise的polyfill
    document.write('<script src="https://cdn.jsdelivr.net/npm/promise-polyfill/dist/polyfill.min.js"><\/script>');
}

总结

uni-app通过条件编译、平台判断、以及统一的API设计，为开发者提供了跨平台开发的便利。然而，开发者仍需关注不同平台的具体实现细节，利用特性检测和Polyfill等手段来处理兼容性问题。上述代码示例展示了如何在uni-app中针对不同环境进行条件编译和特性检测，以实现更好的跨平台兼容性。

回到顶部