探究2022年跨平台（iOS/Android）解决方案

需求

找一个靠谱的 Ios/Android 跨端开发的解决方案。

APP的开发形式

1、原生开发：

传统的原生开发使用Native语言和Platform进行交互，通过调用平台API来实现App的功能。主要用到的技术ios的object-c，Android的java

2、套壳应用WebApp：

移动端的网站，常被称为H5应用，说白了就是特定运行在移动端浏览器上的网站应用。一般泛指 SPA(Single Page Application)模式开发出的网站，与MPA（Multi-page Application）对应。其实就是给web 页面套个 app的壳子。

3、Hybrid App-webview渲染：

Hybrid是指介于 Web App（套壳）、Native App（原生）这两者之间的 app ，兼具“ Native App 良好用户交互体验的优势 ”和“ Web App 跨平台开发的优势 ”。Hybird 是利用 native 作为宿主环境既底层框架，通过原生应用打开 webview 的方法实现 H5 的上层开发。技术：PhoneGap，AppCan，Wex5，APICloud等

这种开发模式既有原生代码，又有web应用代码，因此又被称为Hybrid开发模式。

基于Webview UI的基础方案。市面上主流，例如微信SDK，通过JsBridge完成H5和Native的双向通讯，从而赋予H5一定的原生能力。

4、Hybrid App-native渲染：

基于Native UI的方案，例如React-native、Weex等。在赋予H5原生API能力的基础上，进一步通过JsBridge将js解析成虚拟dom传递到native，并使用原生渲染。

5、自绘引擎渲染

Flutter渲染引擎依靠跨平台的Skia图形库来实现，Skia引擎会将使用Dart构建的抽象的视图结构数据加工成GPU数据，交由OpenGL最终提供给GPU渲染，至此完成渲染闭环，因此可以在最大程度上保证一款应用在不同平台、不同设备上的体验一致性。

而开发语言选用的是同时支持JIT（JustInTime，即时编译）和AOT（AheadOfTime，预编译）的Dart，不仅保证了开发调试效率，也提升了执行性能。

目前流行的框架解决方案有

以下括号里的 github star 数为 2020.7.13 日数据
flutter（95.8k）：

• 高性能
• 新语言 Dart，学习成本
• 生态不如 RN

React Native（88.6k）：

• 要求最好整个项目都用它改造，现有项目重构改动大。他里面自带了android/ios目录 ，有项目结构，必须按照它的写法。
• 写法更贴近原生。
• 原生也可以封装方法和组件 ，供页面调用。
• 也可以引用三方组件。
• React Native相比较ionic等混生应用，还是有着出色的性能体验的

Ionic（41.3k）：

• 目前 angular 版本和 react 版本都有，angular 要考虑学习成本

uni-app（23.4k）：

• 使用 Vue 语法开发小程序、H5、App的统一框架

Weex（17.6k）：

• 目前 vue 版本和 react 版本都有
• 对现有项目兼容性较好，入侵性较低，weex允许项目里面部分页面使用weex；也可以整个项目都使用，而且它自带webview,tab, navigator…
• 写法更贴近前端(单位用px)。
• 原生可以封装方法和组件 ，供weex页面调用。
• 可以引用三方组件。

其他的可能或多或少都不够成熟，基本可以在以上几个中选择

对比RN和flutter这两个比较火的方案

工程技术	React Native	Flutter
首次发布	2015年1月	2017年5月
公司	Facebook	Google
编码语言	JavaScript	Dart
Github Stars(2022.2.12)	101k	136k
学习难度	React或Javascript经验丰富的开发人员易于学习	对于新手相对较难，但对于经验丰富的C++和JAVA专家来说，这很容易学习
主要架构	Flux & Redux	bLoC
组件	有些是自动适应的	非适应性，需要手动配置
生态	成熟	还未成熟
热更新	支持	支持
UI 组件	操作系统的原生组件	Flutter
文档	相对完整	相对混乱
性能原理	通过js桥接原生控件	有一套自己的渲染机制，理论上性能要比React Native好，但肉眼所看的性能体验基本没区别
原生性能	好	很好
主要用户	Facebook, Instagram, Pinterest，特斯拉，优步，沃尔玛，Wix.com	阿里巴巴，Google Greentea，谷歌搜索引擎，App tree，腾讯
issues	1.8k+	5k+（这代表 flutter 还有很长的路要走）

RN通过JS访问平台UI组件，所以需要通过Bridge桥接器将JS转换到原生，在UI被频繁操作时可能导致性能问题。

为避免JS桥接器的性能问题，Flutter采用Dart语言，Dart使用预编译的方式编译多个平台的原生代码，这允许Flutter直接与平台通信，而不需要通过执行上下文切换的JS桥接器。

Flutter的UI组件和渲染器都从平台中移到了到用户的应用程序，所以虚拟机中的控件树是真实的控件树，渲染速度快。

Dart程序和执行数据编解码的平台之间仍然有个接口，但这个接口的速度比JSBridge高出几个数量级。

最后个人看法

对于原生开发人员：
推荐使用 flutter，易上手

对于前端开发人员：
推荐使用 RN，然后可以去了解 flutter（因为我觉得flutter还得再发展几年才能成熟）

毕竟是前端技术栈，一个体系的东西，就算以后 RN 不行了，也可以积累很多技术，但是 flutter 要是不行了，你学到的肯定没有 RN 性价比高，当然有空还是要去了解一下像 flutter 这种新技术的，可以学到一些不一样的思想。

但是作为一个前端工程师，想要用RN或者flutter做跨端app的时候，还是需要去学习原生的知识，了解原生开发的流程。

补充一个大家都在用的跨平台桌面应用

这里所说的桌面应用指的是在Windows、OSX及Linux系统上运行的程序。
electron（84.4k）
github
文档

参考文档

腾讯云：跨平台技术演进
腾讯云：跨平台技术演进及Flutter未来
https://cloud.tencent.com/developer/article/1485193