多端框架分类

1.多端框架调研 - 图1

React Native

优点

  • 垮平台开发 。相比原生的ios 和 android app各自维护一套业务逻辑大同小异的代码，React Native 只需要同一套javascript 代码就可以运行于ios 和 android 两个平台，在开发、测试和维护的成本上要低很多。
  • 快速编译 。相比Xcode中原生代码需要较长时间的编译，React Native 采用热加载的即时编译方式，使得App UI的开发体验得到改善，几乎做到了和网页开发一样随时更改，随时可见的效果。
  • 快速发布。React Native 可以通过 JSBundle 即时更新 App。相比原来冗长的审核和上传过程，发布和测试新功能的效率大幅提高。
  • 渲染和布局更高效 React Native 可以直接套用网页开发中的css布局机制。脱了 autolayout 和 frame 布局中繁琐的数学计算，更加直接简便。
  • 简单易学。 相比于 iOS 和 Android 的一整套复杂的知识体系，React Native 从本质上来讲就是状态机，对于开发者来讲理解不难，且实际操作可谓入门容易、上手轻松。如果是前端开发者，那么对于 Javascript 本来就有相应了解，用 React Native 开发手机应用更是水到渠成。

缺点

  • 动画性能。React Native 在动画效率和性能的支持还存在一些问题，性能上不如原生Api。
  • 逻辑上的额外开销。直到今天， React Native 依然只是0.52版本，仅仅支持简单的 UI 制作，其不成熟的 API 连复杂的动画都难以实现，更别提 iOS 的底层优化和兼容操作。同时因为操作系统和设备的不同，React Native 得分别进行针对性处理，这对代码库的维护又是一个挑战。
  • 调试的困难。对于原生的 iOS 和 Android App 引入 React Native，会增加整个代码库的复杂度，在深入底层原生代码进行 debug 时也是困难重重，可以说是在开发和维护上的成本都有所增加。
  • 不能完全屏蔽原生平台。 就目前的React Native 官方文档中可以发现仍有部分组件和API都区分了Android 和 IOS 版本,即便是共享组件,也会有平台独享的函数。也就是说仍不能真正实现严格意义上的“一套代码，多平台使用”。另外，因为仍对ios 和android的原生细节有所依赖，所以需要开发者若不了解原生平台，可能会遇到一些坑。


作者：GUTI
链接：https://juejin.cn/post/6844903557607456776
来源：稀土掘金

Flutter

优点

  • 混合开发中，最接近原生开发的框架；
  • 性能强大，流畅；
  • 优秀的路由设计；
  • 优秀的动画设计；
  • 简单易学，Dart语言更具优势；
  • 跨多种平台，减少开发成本；

  • 支持插件，可以访问原生系统的调用。

    缺点

  • 脱离不开原生，开发人员需要具备原生（Android、iOS）基础开发能力；

  • 适配问题，开发工具版本升级后，修改量大；
  • 原生集成第三方SDK后，兼容性适配是个令人头痛的问题；
  • 代码可读性较差，对代码质量和管理要求较高；
  • Widget的类型难以选择，糟糕的UI控件API；
  • Flutter packages和Dart packages上第三方sdk繁杂，适配性差，不可乱用；
  • 目前几乎没有第三方开发者平台开发Flutter能力的SDK，需要原生去集成；
  • 打包后，apk/ipa要大很多。


作者：Flutter曲线路
链接：https://juejin.cn/post/6984978811867627551
来源：稀土掘金

跨端支持度对比

技术栈 案例 微信小程序 支付宝小程序 百度小程序 头条小程序 H5 App
Taro React 丰富 ⭕ ⭕ ⭕ ⭕ ⭕ ⭕
娜娜奇 React 少 ⭕ ⭕️ ⭕️ ⭕️ ⭕️ ❌
wepy Vue 丰富 ⭕ ❌ ❌ ❌ ❌ ❌
mpvue Vue 丰富 ⭕ ❌ ❌ ❌ ⭕️ ❌
uni-app Vue 丰富 ⭕ ⭕️ ⭕️ ⭕ ⭕️ ⭕
megalo Vue 少 ⭕ ⭕️ ⭕️ ❌ ❌ ❌
OKAM Vue 少 ⭕ ⭕ ⭕ ⭕ ❌ ❌
Mpx Vue 少 ⭕ ❌ ❌ ❌ ❌ ❌

性能对比

测试方式：从页面空列表开始，通过程序自动触发上拉加载，每次新增20条列表，记录单次耗时；固定间隔连续触发 N 次上拉加载，使得页面达到 20*N 条列表，计算这 N 次触发上拉 -> 渲染完成的平均耗时（单位：毫秒）。

组件数量 微信原生框架（优化前） 微信原生框架（优化后） uni-app taro
200 770 572 641 752
400 876 688 741 974
600 1111 855 910 1250
800 1406 1055 1113 1547
1000 1690 1260 1321 1878

其他对比

对比内容 Uniapp Taro
核心语法 Vue React（JavaScript）
基础能力 uni-app在基础引擎层面提供了丰富的能力，还提供了丰富的插件市场，可切实提升开发者的效率 taro与原生小程序引擎拉齐度较低，很多功能需要开发者分别在iOS和Android上做原生开发才能实现。比如App端很常见的三方登录、支付、分享等能力，taro并未封装
性能 uni-app的App引擎同时给开发者提供了原生渲染引擎和小程序引擎的双选方案，并且提供了renderjs技术，以及支持wxs、bindingx等技术，解决了js层和视图层的通信损耗问题，在高响应要求的UI操作方面有更好的性能表现。 taro在App端使用了react native的渲染引擎，虽然渲染层ui是原生的，但在实时交互和高响应要求的UI操作方面表现一直不佳，js层和视图层的通信损耗让很多开发者深感无力
开发体验 uni-app可以做到让前端开发者不依赖原生工程师独立完成App。其开发的小程序，可以更平滑的变成可商用的App。
提供开发IDE，大多数操作均可通过可视化页面进行。		 taro的开发者需自行搭建iOS/Android开发环境，比较繁琐。
大多数操作需要使用命令行的方式执行。
生态 插件市场庞大（6500+），uni-app 官网 QQ群有35个，微信群20个，还有十几个专项QQ群，其中有30个QQ群达到2000人，交流群人数： 30 2000 + 5 1000 + 20*500 + 5000 = 90000人 Taro 有16个微信群是根据 Taro 官网上显示Taro 开发交流 15 群 已满推论而出，每个微信群500人，交流群人数： 500*16 = 8000人
缺点 1、开发过程中错误日志定位不是特别明显，对刚开始解除前端开发的人员来说增加了调试的工作量；
2、组件库不像想象中的完善，会有一些bug；
3、由于做了很强的封装，所以遇到底层问题不容排查（周棘陨）；

|
| | 案例分析 | 小程序、H5以及原生APP端案例均比较丰富。 | 小程序案例丰富，APP案例欠缺 |

相关资料

可通过“⌘+K”插入引用链接，或使用“本地文件”引入源文件。

跨端开发框架深度横评之2020版
Uniapp案例
Taro案例