最近前端界多端框架频出，各巨头公司纷纷造出各家的轮子，例如滴滴的Chameleon、美团的Mpvue、京东的Taro、DCloud的uni-app、腾讯的WePY。

不少有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？我到底该选哪个呢？

1

多端

现在流行的多端框架可以分为三类：

1. 全包型

这类框架最大的特点就是从底层的渲染引擎、布局引擎，到中层的 DSL，再到上层的框架全部由自己开发，代表框架是 Qt 和 Flutter。

优点：性能的上限高，各平台渲染结果一致。

缺点：需要完全重新学习 DSL（QML/Dart），难以适配小程序。

这类框架是最原始也是最纯正的的多端开发框架，由于底层到上层每个环节都掌握在自己手里，也能最大可能地去保证开发和跨端体验一致。但它们的框架研发成本巨大，渲染引擎、布局引擎、DSL、上层框架每个部分都需要大量人力开发维护。

2. Web 技术型

这类框架把 Web 技术（JavaScript、CSS）带到移动开发中，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染。

代表框架是 React Native 和 Weex。

优点：

开发迅速。

复用前端生态。

易于学习上手。

缺点：

交互复杂时难以写出高性能的代码，这类框架的设计就必然导致 JS 和 Native  之间需要通信，类似于手势操作这样频繁地触发通信就很可能使得 UI 无法在 16ms 内及时绘制。React Native 有一些声明式的组件可以避免这个问题，但声明式的写法很难满足复杂交互的需求。

由于没有渲染引擎，使用各端的原生组件渲染，相同代码渲染的一致性没有第一种高。

3. JavaScript 编译型

这类框架有：Taro、WePY 、uni-app、Mpvue、 Chameleon。

它们的原理是：先以 JavaScript 作为基础选定一个 DSL 框架，以这个 DSL 框架为标准在各端分别编译为不同的代码，各端分别有一个运行时框架或兼容组件库保证代码正确运行。

优点：

为了小程序而生。

对了，第一第二种框架除了可以跨系统平台之外，也都能编译运行在浏览器中。(Qt 有 Qt for WebAssembly, Flutter 有 Hummingbird，React Native 有 React-Native-Web, Weex 原生支持)

在移动端一般会编译到 React Native/Weex，所以它们也都拥有 Web 技术型框架的优点。

这看起来很美好，但实际上 React Native/Weex 的缺点编译型框架也无法避免。除此之外，编译型框架的抽象也不是免费的：当 Bug 出现时，问题的根源可能出在运行时、编译时、组件库以及三者依赖的库等等各个方面。

在 Taro 开源的过程中，我们就遇到过 Babel 的 Bug、React Native 的 Bug，JavaScript 引擎的 Bug，当然也少不了 Taro 的 Bug。相信其它原理相同的框架也无法避免这一问题。

但这并不意味着这类为了小程序而设计的多端框架就都不堪大用。

现在各巨头超级 App 的小程序百花齐放，框架会为了抹平小程序做了许多工作，这些工作在大部分情况下是不需要开发者关心的。而且许多业务类型并不需要复杂的逻辑和交互，没那么容易触发到框架底层依赖的 Bug。

那么当你的业务适合选择编译型框架时，在笔者看来首先要考虑的就是选择 DSL 的起点。因为有多端需求业务通常都希望能快速开发，一个能够快速适应团队开发节奏的 DSL 就至关重要。

不管是 React 还是 Vue（或者类 Vue）都有它们的优缺点，大家可以根据团队技术栈和偏好自行选择。

如果不管什么 DSL 都能接受，那就可以进入下一个环节：

2

生态

以下内容均以各框架现在已发布稳定版为标准进行讨论。

开发工具

就开发工具而言 uni-app 应该是一骑绝尘，它的文档内容最为翔实丰富，还自带了 IDE 图形化开发工具，鼠标点点点就能编译测试发布。

其它的框架都是使用 CLI 命令行工具，但值得注意的是 Chameleon  有独立的语法检查工具，Taro 则单独写了 ESLint 规则和规则集。

在语法支持方面，Mpvue、uni-app、Taro 、WePY 均支持 TypeScript，四者也都能通过 typing 实现编辑器自动补全。

除了 API 补全之外，得益于 TypeScript 对于 JSX 的良好支持，Taro 也能对组件进行自动补全。

CSS 方面，所有框架均支持 SASS、LESS、Stylus，Taro 则多一个 CSS Modules 的支持。

所以这一轮比拼的结果应该是：

uni-app  > Taro >  Chameleon  > WePY、Mpvue

多端支持度

只从支持端的数量来看，Taro 和 uni-app 以六端略微领先（移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序），Chameleon 少了头条小程序紧随其后。

但值得一提的是 Chameleon 有一套自研多态协议，编写多端代码的体验会好许多，可以说是一个能戳到多端开发痛点的功能。

uni-app 则有一套独立的条件编译语法，这套语法能同时作用于 JS、样式和模板文件。Taro 可以在业务逻辑中根据环境变量使用条件编译，也可以直接使用条件编译文件（类似 React Native 的方式）。

在移动端方面，uni-app 基于 Weex 定制了一套 Nvue 方案 弥补 Weex API 的不足；Taro