目前主流跨端技术对比

78 阅读2分钟

#三端技术方案:

技术方案

  1. hybrid(webview加jsbrige) : 原生(0c,Java)+JS Start:9.2K
  2. uniapp :Vue.js Start:37.7k
  3. Flutter: Dart+MPFlutter Start:1.2k(MPFlutter) Start:150k(Flutter)
  4. React Native:JavaScript 非开源

原理

hybrid

基于 WebView UI 的基础方案,通过 JSBridge 完成 H5 与 Native 的双向通讯,赋予H5一定程度的原生能力

image.png

uniapp :

基于Vuejs的前段框架

image.png

Flutter

重写跨平台的UI框架,包括UI控件、渲染逻辑,渲染引擎依靠跨平台的Skia图形库来实现,依赖系统的只有图形绘制相关的接口,保证不同平台、不同设备的体验一致性,

image.png

React Native

基于 JavaScript 框架框架,用 JavaScript 和 React 来开发跨平台的移动应用

image.png

##优点

hybrid

支持热更,jsbrige开源,包体较小。部分原生可解决 机型适配问题和性能功能问题

uniapp :

支持热更,开源,多端生成成熟,组件丰富

Flutter

性能相对较好,路由设计突出,动画设计流畅,Google 开源,社区成熟度高

React Native

Android支持热更,多平台生成较好,社区较为成熟,三方库丰富,性能较好;


##缺点

hybrid

使用浏览器内核,稳定性比较差,受到网路影响较大, 加载较慢,容易出现卡顿;受浏览器内核限制,小程序和app 部分功能存在差异;

uniapp :

编辑器bug多,官方社区不活跃存在一定的bug,项目打包后文件偏大,需要适配国内多家手机厂商

Flutter

不支持热更,不支持热更,原生双端支持较好,小程序需要MPFlutter 开源项目支持,生成的app 最终需要WebView 的支持;

React Native

IOS不支持热更,Facebook 公司不开源项目,项目停止维护,原生平台存在个别api差异化,编译速度较慢,


性能比较

Flutter(兼顾小程序,性能会有折扣=hybrid)>React Native>uniapp>hybrid


学习成本

  • hybrid 5个工作日 对js 的学习;
  • uniapp 7个工作日 对js+Vue.js的学习
  • Flutter 5个工作日 对 Dart+MPFlutter 的学习
  • React Native 7个工作日 对JavaScript+ React的学习