要了解移动端跨平台框架，我们还是先要问下，什么是跨平台。
最常见的定义是：跨平台就是开发就是一套代码写完以后可以多端发布运行到各个平台，比如：iOS、安卓、web。
而wiki上，是这么定义的。
In computing, cross-platform software (also multi-platform software or platform-independent software) is computer software that is implemented on multiple computing platforms.
按照跨平台实现的方式可以分为两类：
- 一类是需要为每一个平台进行单独的构建或者编译
- 另一类，是可以直接在多个平台运行
移动端跨平台框架
对于移动端，常见跨平台框架如下表所示。其中React Native就是需要对IOS和Andriod平台分别编译。
近年移动端跨平台框架热度分布，如图所示。图片引用自Cross-platform mobile framworks used by developers worldwide 2019 and 2020
常见移动端跨平台框架对比
发现React native，Flutter， Cordova较为流行。我们也这三个框架进行对比。
| 对比维度 | Apache Cordova | Ract Native | Flutter |
|---|---|---|---|
| 背后支持 | apple | ||
| 开发语言 | 使用标准的html语言开发（HTML5, JavaScript and CSS3.），运行在特定平台的native wrappers上。 | 采用JS语言开发，基于React | Dart语言开发，Flutter runs in the Dart virtual machine, which features a just-in-time (JIT) execution engine. |
| 支持平台 | （依赖web view component的多平台支持） mobile – Android, iOS, Windows Phone; desktop – OS X, and Electron (which can be run on Windows, Linux, and OS X). 但也导致跨平台或者跨设备的issue，需要特殊处理 |
Android and iOS | iOS and Android, web (beta), and desktop (technical preview) |
| 学习门槛 | low entry threshold （仅需要html，css，js知识） |
基于React，对前端工程师更友好，学习曲线低 | “everything is a widget” 的理念与react.js和component-based JS frameworks相似，对于熟悉这类开发工作的程序员有较浅的学习曲线 Dart需要重新学习，但是与typescript类似 |
| UI design | 支持UI custom design | RN可以利用原生已有的优秀UI RN控件转换为对应平台原生控件的过程，IOS和Android存在一定的差异 |
UI在IOS和Android基本一致。支持Material, Cupertino or fully custom design. 但是Material, Cupertino UI的细节调整，较难实现 |
| 组件 | 大多数能够找到，少部分需要原生定制开发 | 大多数能够找到，customized widgets需要自己实现，可以使用Dart开发或者在原有widgets上开发 | |
| performance and responsiveness | heavily loaded interfaces can lead to performance bottlenecks | 有效率问题,RN的渲染机制是基于前端框架的考虑,复杂的UI渲染是需要依赖多个view叠加 | 使用高性能渲染引擎来绘 制 widget，有更好的可控性,native-like performance |
| 与原生服务通信方式 | 在JavaScriptCore（js虚拟机）基础上，封装各平台的应用层接口，定义了 Javascript 和封装后的接口之间的通信协议。以RN的桥接方式和原生服务通信 | Flutter在跟系统service通信时，通过 Skia 和各平台的底层图形库对接，同时提供丰富的基于 Skia 的控件，来实现跨平台的开发。 | |
| 安装包 | iOS空项目 3M左右，Android20M左右 | iOS空项目 30M左右，Android空项目 7M左右 | |
| 启动速度 | 与原生相差无几 | 较慢 | |
| 是否支持热更新 | 支持 | 不支持 | |
| 是否支持混编 | 支持 | 支持 |
网友评论