栖霞市寒云科技公司

本文只代表本人观点，在自己的一些实践经验上的出的粗浅结论。也只适合在公司目前业务所得出的方案，仅供参考，可能随着技术的发展，其他框架也会越来越好。

一、背景

        随着移动互联网的百家争鸣，越来越多的“端”如雨后春笋快速兴起，安卓、ios、鸿蒙和各种小程序等。同一个应用，各个“端”独立开发，不仅开发周期长而且人员成本高，不利于团队成员形成合力提高开发效率。这种重复、低效的工作状态直接影响到新品的迭代和发布，在这样的形势下，跨端技术受到越来越多人和企业的关注。

        使用跨端方案进行开发，必然会调整原有平台的技术架构，所以我们在选择跨端方案时，不能只依赖于某几项指标，比如编程语言、性能等，更多的还要考虑学习成本、迁移成本、开发效率、社区支持等方面的指标，适合公司产品和业务需要的架构才是最好的架构。

二、跨平台方案

        目前主流的跨端方案主要分为三种：一种是使用webview方案，代表技术是Hybird混合开发；一种是将JavascriptCore引擎作为虚拟机的方案，代表框架是React Native；另一种是使用自研的dart虚拟机方案，代表框架是Flutter。

（一）、Webview跨平台方案 

(1)Hybrid App开发

        Hybrid混合开发是一种取长补短的开发模式，原生代码利用WebView为H5提供容器，并配合 JSBridge 提供了原生与JS之间的通信链路，基于这个通信基础，原生可以暴露出一些标准服务API提供给JS调用，同样的JS也可以封装一些基础API给原生调用。目前我们采用的就是这种交互方式，还有京东、淘宝、今日头条等APP有部分模块也是基于混合开发模式。

优点：

①开发效率高，节约时间。同一套代码Android和IOS基本上都可使用；

②更新和部署比较方便，每次升级版本只需要在服务器端升级即可，不需要上传到App Store进行审核。

③代码维护方便、版本更新快，节省产品、人力成本；

缺点：

①加载缓慢、网络要求高，混合APP数据需要全部从服务器调取，每个页面都需要重新下载，因此打开速度慢，网络占用高，缓冲时间长，用户体验稍差。

②兼容性差，手机系统更新换代快，需要做比较多的兼容性方案。

③Hybrid App只是提供了一个壳，基座还是需要ios和安卓同事开发和维护的。

(2)Uni-app

        Uni-app是一个开放式跨端跨框架解决方案，使用 Vue框架来开发小程序、H5、APP等应用。uni-app支持webview与weex双重渲染，h5页面使用webview渲染，原生部分采用nvue wewx进行渲染，相当于把h5的技术与rn的技术做了一个结合。由于原生是基于weex的，然后下一层才是通信bridge。多了一层就多了一份性能问题，所以性能方面会比ReactNative略差一点。

优点：

①开发成本、门槛低，开发者编写一套vue.js代码，可发布到IOS、Android、h5、小程序等多个平台。

②社区活跃，生态好，组件丰富，社区有大量的组件提供使用。

③支持热更新，APP最新修改可以动态发布，而不需要提交APP市场审核。

缺点：

①nvue原生开发有局限性，特别是样式方面限制比较严重，定制化程度低。

②部分组件可能需要收费，云打包超过次数需要收费。

③文档松散，api众多。

④主打快速，生成多端代码，许多中小公司在用。

（二）、React Native跨平台方案

（1）react native

       react native是Facebook于2015年4月开源的跨平台移动应用开发框架。RN使用Javascript语言类似于HTML的JSX，JSX 源码通过 React Native 框架编译后，与Native原生的UI组件进行映射，用原生代替DOM元素来渲染，在UI渲染上非常接近Native App。 

（2）京东taro

      Taro 是一个开放式跨端跨框架解决方案，支持使用 React、Vue等框架来开发小程序、H5、APP等应用。APP开发基于 Facebook的开源项目React Native，开发语言可以使用vue,但最终生产的代码是react。开发中不仅需要代码调试而且还有底层交互，所以使用taro需要具备react、原生技能。

优点：

①只需要同一套javascript代码就可以运行于ios和android 两个平台，在开发、测试和维护的成本上要低很多。

②采用热加载的即时编译方式，使得App UI的开发体验得到改善，几乎做到了和网页开发一样随时更改，随时可见的效果。

③可以通过 JSBundle 即时更新 App。相比原来冗长的审核和上传过程，发布和测试新功能的效率大幅提高。

④摆脱了WebView的交互和性能问题，同时可以直接套用网页开发中的css布局机制。

缺点：

①在动画效率和性能的支持还存在一些问题，性能上不如原生Api。

②官方文档中可以发现仍有部分组件和API都区分了Android和IOS 版本,即便是共享组件,也会有平台独享的函数。也就是说仍不能真正实现严格意义上的“一套代码，多平台使用”。

③缺乏很多基本控件，第三方开源质量良莠不齐。

④需要具备react、原生开发能力。

(三)、Flutter

        Flutter是谷歌在2018年发布的移动UI框架，可以快速在APP、web上构建高质量的原生用户界面。它最大的特点是渲染不是基于操作系统的组件，而是直接基于绘图库（skia）来绘制的，这样做到了渲染的跨端。逻辑的跨端也不是基于js引擎，而是自研的dart虚拟机来跨端，通过dart语言来写逻辑，支持AOT和JIT两种编译方式，而没有采用HTML/CSS/Javascript组合方式开发，在执行效率上明显高于React Native所使用的JavascriptCore。

优点：

①UI性能可以比肩原生，编译出来的程序可以达到60bps的高性能。

②Dart在 JIT模式下，速度与 Javascript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，Javascript便远远追不上了。

③组件丰富，社区也相对活跃。

缺点：

①优点即缺点，Dart 语言的生态小，精通成本比较高。

②UI控件API设计不佳。

③与原生融合障碍很多，不利于渐进式升级。

④国内文档较少，需要查阅外文资料。

(三)、各平台参数对比

下面通过表格的形式对比更直观：(数据截止至2021-06-10)