移动端多端框架选型

DATE: 2020/02/09

---

通过下面两篇文章整理：

• taro：小程序多端框架全面测评
• uni-app：跨端开发框架深度横评

摘要

底层级别

提供底层渲染引擎布局引擎、中层 DSL (Domain-specific Language)、上层框架。

性能高，渲染一致，跨系统平台，也能编译运行于浏览器；

需要学开发语言；

不支持小程序；

• Flutter / 译，Hummingbird
• Qt，Qt for WebAssembly

Web 技术

没有 DOM，没有 BOM，通过贴近前端生态技术，自研布局引擎处理 CSS，使用 JavaScript 写业务逻辑，使用流行的前端框架作为 DSL，各端分别使用各自的原生组件渲染；通过注册、调用模块来实现调用移动设备原生 API；

为了保持框架的通用性，内置的原生模块有限；

无渲染引擎，渲染一致性不高；

业务逻辑运行在 JavaScript Thread，与 Native 频繁通信，性能不高，容易掉帧卡顿。

• React Native，react-native-web
• Weex

编译型

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

遵循 React、Vue 语法规范，作为多端的上层应用语言，编译到不同平台，开发一次，到处运行，开发一次，到处调错。

• JD/Taro，React 语法
• Dcloudio/uni-app
• DiDi/chameleon，多态协议针对多端开发
• Tencent/wepy: 小程序组件化开发框架，多端支持不完善
• Meituan-Dianping/mpvue

taro/(React Native，expo)、chameleon/(Weex)、uni-app/(Weex，nvue) 框架支持 APP 端。

跨 APP 端时兼容性较差，问题根源难以定位（运行时、编译时、组件库、依赖库）；

chameleon，有一套 SDK 配合多端协议与原生语言通信，多端支持度好；代码和测试用例非常规范。

结论 (TL;DR)

追求性能，跨平台、无中国特色小程序，Flutter

遵循 React 语法规范，taro；

遵循 Vue 语法规范、组件多，uni-app；

遵循 Vue 语法规范、架构设计合理、多端支持度好，chameleon。