一套代码跨8端，Vue3恐怖如斯？详解跨端框架到底香不香

腾讯云开发者

发布于 2025-11-13 18:53:35

2600

应用终端的种类越来越多，为了节省人力，提高开发效率，越来越多的跨端框架出现了。本文介绍了目前大部分的跨端框架，并分析了其中的原理。最后，分享了用一套代码，借由 Vue3 的纽带作用，实现横跨八端的应用系统：腾讯视频搜索系统，希望能够给大家在跨端实践上有所启发。

关注腾讯云开发者，一手技术干货提前解锁👇

01、起源

说到跨端框架，我们不得不说说它的起源。

从有不同的操作系统开始，就有跨平台应用的概念。像最开始的 Windows 操作系统，Linux 操作系统到近期出现的 Mac 操作系统。这些不同的操作系统，它们底层的运行逻辑不一样，故在上面运行的各个软件系统就需要符合该操作系统底层逻辑，跟操作系统适配。同一个软件系统，要想在不同的操作系统上运行，就需要分别适配不同的操作系统。

目前，所有的软件开发商，同一个软件，都需要开发支持不同操作系统平台的软件安装包。放弃某一个操作系统，就意味着放弃了该操作系统上的所有用户。最典型，最常用的跨操作系统应用软件就是浏览器，不同的操作系统，就有不同的浏览器软件安装包。因为应用软件跟操作系统的强相关性，很多软件开发商为了抢占市场，跟电脑厂商合作。很多新电脑买回来后，电脑的操作系统，以及跟该操作系统相匹配的应用软件都安装好了，用户只需要使用就行。甚至很多软件厂商还想方设法把自己的应用软件内置在操作系统安装包中，只要我们把操作系统安装完，这些基础的软件应用自动就安装好了。

为什么我们用户感受不到这些基础应用软件的跨端需求？因为是有软件开发商在背后的默默付出，他们提前就把这些所谓的十分复杂的屏蔽操作系统差异性的工作都做完了，这些工作对我们普通用户都是透明的。

随着互联网的飞速发展，C/S 应用的普及，很多用户或企业都开始使用ERP软件来办公，这些软件都是 Web 应用，它们运行在浏览器之中。由于浏览器软件服务商提前就支持了浏览器软件的跨操作系统安装使用，故，普通用户根本不用操心这些基础软件需要支持不同的操作系统，只用关心自己的 Web 应用系统就可以啦。所以，在很长一段时间里，普通用户只负责开发各种各样的 Web 端应用系统，根本不用操心如何让自己的应用去支持不同的操作系统。

随着智能手机的出现，彻底打破了这一局面。

智能手机操作系统，芯片越来越强大，手机存储空间越来越大，能够支持的应用越来越多，很多公司都想在手机上开发一套自己的应用系统。但是，手机操作系统又分为两大阵营：iOS 操作系统和 Android 操作系统。所以，很多公司的应用系统就必须分别在 iOS 操作系统上开发一套，在 Android 操作系统上开发一套。

什么？在手机上开发一个应用，需要分别开发两套？iOS 操作系统一套，Android 操作系统一套？这下软件的开发费用和后续的维护费用一下子就“翻倍”啦！刚才不是说了可以用 C/S 应用吗？手机上没有浏览器？为啥不接着用 Web 应用在手机上运行？

答案当然是可以的！但是，由于我们手机的性能，完全没办法跟我们的电脑和服务器相提并论，所以，在手机浏览器中运行一些复杂的应用，非常卡顿，用户操作起来，非常不灵敏，常常卡死。用土话来说，就是“不好用”！中国人不骗中国人，在网上搜索一下，吐槽声一片，如下图。

那么，有没有什么办法，既能够让应用在手机上运行非常流畅，而且只用开发一次，两个手机端都可以应用呢？于是，混合应用（Hybrid App）应运而生。

下面，我把上面的发展过程用一张图来清晰描述。

从这张图可以看到，手机上的原生应用（Native 应用）它的性能是最好的，也是最流畅的，但是，它需要在 iOS 操作系统和 Android 操作系统上各自开发一套。Web 应用天然支持跨平台，只要有浏览器，就可以运行，但是它们的性能和用户体验非常不好。混合应用，就是将 Web 应用和原生应用两者相结合，取各自的优点，就是采用类似于开发 Web 应用的技术来开发应用系统，然后通过跨端技术将 Web 应用转化为类似于原生的应用一样，在原生的框架中来运行。这样，应用本身只用开发一次，又能获得类似于原生应用流畅的体验效果。

02、“多端统一”应用是什么

多端统一应用，就是用一套代码开发的应用，能够以最好的用户体验在各个平台上来运行。

如果，没有多端统一应用，会是什么样子的呢？我们以搜索系统作为实例，如下图：

各个平台，我们都需要单独构建一套系统，各个系统都需要单独维护。上面，我们有6个端，那么，我们就需要分别构建6套系统，来分别支持不同的平台。分别需要投入的人力，物力，财力都扩大好几倍。

那么，如果用多端统一框架来构建应用，会是什么样子的呢？，如下图：

在多端统一应用框架中，我们不再为每个平台都单独创建一套独立代码库，独立开发一套系统，而是通过一个中间语言，只开发一套，然后，针对不同的平台，书写不同平台的差异代码，并且接入对应平台的跨端框架进行代码转化，从而转化为能在该平台运行的代码。说白了，就是一套代码，能够适配多端，能够以最佳用户体验在各个端来运行。

03、常见的多端统一框架

3.1 基于 WebView 容器

基于 WebView 容器的跨端方案如下：

这里面有许多流行框架，比如 Lonic, Cordova 等。记得当时笔者还亲自用 Cordova 编写过自助开便利店的跨 App 应用，开发体验还算丝滑，但是流畅度跟原生相比，还是有差距。

本文这里想重点介绍一下 Taro。公司有许多需要支持多端小程序的业务场景应该都使用过 Taro 框架吧。它能够通过一次代码编写，自动打包生成各个不同平台的小程序，在小程序跨端上使用非常广泛。Taro 框架有自己的语法规则，也有自己的 UI 组件库和自己的事件处理机制，它是一个纯前端的代码转换中间件，具体原理如下图所示。

3.2 基于泛 WebView 容器

所谓基于泛 WebView 容器的跨端，核心是没有借助 WebView 容器来运行应用实现跨端，而是转化为 Native 组件来进行 Native 层级的渲染。

也有文章称该分类为基于 GPL 的 Native 增强。

这些文章的分类划分，其实都只是说了 iOS 端，Android 端和 Web 端之间如何跨端兼容，忽略了 PC 客户端的 Win 端和 Mac 端。本文将会把 PC 客户端补齐。

基于 App 端的跨端框架

App 端的跨端框架很多，其中比较出名的有 React Native 和 Hippy。

React Native

React Native 框架是脸书推出的一个用于构建移动应用的开源框架。它的创新点在于：允许开发者使用 JavaScript 和 React 来构建自己的应用，同时，应用并不是在 Web View 中来运行的，而是转化为 App 端原生的组件，并且使用原生的渲染引擎来完成渲染上屏。具体架构如下图所示：

由于 ReactNative 中，采用 JS Bridge 来跟底层通信，通信代价非常大，新一代的 Next ReactNative 框架在这里进行了优化，封装了 JSI，它提供 JS 层和 C++/OC 层相互通信的能力。具体可以参考 RN 的官网：https://reactnative.cn/docs/0.70/the-new-architecture/pillars

Hippy 是腾讯自研的跨端框架，并且在腾讯各个业务中心广泛使用，对外已经开源，官网为：https://openhippy.com/

Hippy 框架从 Hippy2.0 升级到了 Hippy3.0 之后，使框架变得更加灵活。这里直接来分享 Hippy3 框架，Hippy2.0 需要了解的也可以直接看 Hippy 官网：https://doc.openhippy.com/#/architecture/introduction?id=hippy-2x-%E6%9E%B6%E6%9E%84

Hippy3 的亮点之处：

引入了 JS 引擎中间件，让用户根据使用场景灵活选择 JS 引擎。因为业务方在接入 Hippy 的时候，可能业务方已经有 JS 引擎了，就不需要再使用 Hippy 框架的 JS 引擎；
跨平台布局引擎中间件。在 Hippy3 框架中，也是允许接入自己的布局引擎的。比如 Yoga，或者腾讯自研的 Taitank；
渲染引擎扩展中间件。在 Hippy3 中，默认用 Native 渲染，但是也允许用户扩展自己的渲染引擎来完成渲染。

基于 PC 客户端跨端框架

基于 PC 客户端的跨端框架也有许多，比如 Flutter， Electron 等。这里重点介绍的 PC 客户端跨端框架是 EVO，它的架构图如下图所示。

EVO 跨端框架的出现，让我们写客户端应用，就像写 Web 应用一样简单，它支持 Vue3，JS 爱好者们可以继续使用 JS/TS 和 CSS 来开发客户端应用。

EVO 框架的优点有以下这些：

在基础层引入了 Nodejs，可以方便调用 Native 系统的各种接口；
EVO 框架在组件层也封装了自己的 Native 组件，在渲染的时候，是 Native 渲染，而不是在 WebView 中来渲染，从而让页面的体验无限接近原生开发；
自己封装的 Native 组件，能够确保在 PC Win 端和 PC Mac 组件渲染的一致性；
渲染层采用了胶水层设计，可以非常灵活跟各端的渲染内核交互，跟任何 UI 内核快速衔接，接入和维护的工作量都非常小；
高扩展性。框架支持接入任何的 UI 引擎；

3.3 共享代码

代码共享是终端的开发方案，目前业内熟知的方案是 KMM（Kotlin Multiplatform Mobile），通过 K2 编译器将 kotlin 的源码编译成各个平台的目标代码，从而实现跨端。

共享代码中的典型代表为腾讯的自研框架：Kuikly。

Kuikly（Kotlin UI Kit，发音同 quickly），是 TDF 端框架（Tencent Device-oriented Framework）的一个新成员（Hippy、VL、Kuikly）。一句话介绍的话，就是使用 Kotlin 开发了声明式 UI 框架，映射到系统原生控件做渲染，最终用 KMM（Kotlin Multiplatform Mobile）实现跨端。具体架构图如下：

Kuikly 框架主要优点：

原生的开发体验。Kuikly 框架使用终端原生语言 Kotlin 来进行开发，对终端开发同学十分友好；
原生性能。Kuikly 框架能够把 Kotlin 语言编写的系统分别编译为 AAR 文件和 .framework 文件，分别应用于 Android 系统和 iOS 系统，并且把组件映射到原生的组件来进行渲染，保证了性能；
跨端。一处编写，同时应用到 Android 端和 iOS 端。

04、跨“八”端的真正跨端应用

在上面的介绍中，我们看到：Hippy 跨端框架能够实现 App Android， App iOS 和 PC Web 之间的跨端；Kuikly 是 iOS 端和 Android 端的跨端；EVO 是 PC 客户端 Win 端和 Mac 端的跨端。那么，有没有一种架构，可以用一套代码来实现业务逻辑，然后通过适配最终应用到 App Android 端，App iOS 端，iPad 端，aPad 端，PC Web 端，H5 端，PC 客户端 Win 端，PC 客户端 Mac 端呢？有！腾讯视频搜索多端统一项目就是这样一个系统，通过一套代码，实现了跨“八”大端。

跨端的纽带就是 Vue3。Hippy3 支持 Vue3 语法，通过 Hippy Vue3，我们能够让应用支持 App Android 端，App iOS 端，iPad 端和 aPad 端。EVO 框架也支持 Vue3 语法，通过 EVO Vue3，我们能够让应用支持 PC 客户端的 Win 端和 Mac 端。并且 Vue3 框架天然支持 PC Web 端和 H5 端，从而让一套代码，同时支持“八”大端在技术上是完全可行的。

腾讯视频搜索系统，一套代码支持八端的 PC Web 端体验地址：

https://v.qq.com/x/search/?q=%E7%8C%8E%E7%BD%AA%E5%9B%BE%E9%89%B42&queryFrom=101

App 端和 PC 客户端的体验地址为：下载腾讯视频应用，然后点击搜索框进入搜索页面即可体验！

根据多年的跨端实战经验，下面我们来总结一下跨端平台的香与“不香”。

05、跨端框架优势：香

多平台统一框架，当然是香的。具体体现在以下这些方面：

从业务角度上看：

一套代码适配多端，保证各端系统功能模块和数据的一致性，避免了不同端UI的差异和数据的差异，大大提高了用户的体验度；
系统运营更加方便。系统运营只用在一个运营系统中来运营，避免以前各个平台的系统各自为政的尴尬处境；
产品的需求跟踪更加方面。以前开发一个需求，各个平台单独提单，各个平台单独开发，现在，只用在一个需求单中来跟进某个需求，同时，标记该功能需要应用到哪几个端即可；

从技术角度看：

开发效率大大提升。以前一个需求每个平台单独去开发，现在只需要在一套代码中来适配即可；
便于系统中组件的共享。以前各个系统单独一套代码，现在合并为一套代码来适配多端，很多的公共方法，公共组件都可以共用，便于节省资源；
代码仓库的管理更加方便。以前每端一个仓库，现在只需要一个大仓来维护；
省人！省人！省人！很少有人既会 Android 开发，又会 iOS 应用开发，又会 Web 应用开发，又会 PC 客户端应用开发，故而各个端至少需要一个员工来开发和维护。现在多端统一以后，统一为一套代码，一个技术栈，人力可以在各端共享！省人，意味着能够大大节约开发成本，所以老板们都很喜欢。