多个前端开发框架对比

前端多端开发框架对比

一、常见的多端小程序开发技术框架：

框架	技术栈	H5	IOS	Andriod	微信小程序	支付宝小程序	百度小程序
Mpvue	vue	✅	❌	❌	✅	❌	❌
Taro	react	✅	✅	✅	✅	✅	✅
uni-app	vue	✅	✅	✅	✅	✅	✅
wepy	vue	❌	❌	❌	✅	❌	❌
megalo	vue	❌	❌	❌	✅	✅	✅

1、Taro vs Uni-app

1.1多端效果对比：

Taro在H5端显示的效果明显多于微信小程序，同时Taro提供的组件在H5中会出现很多坑，如input输入框输入验证效果、焦点获取事件等问题 （项目中遇到过这些问题）。Uni-app在各端小程序显示正常，h5端显示也正常问题没有Taro的多。

1.2 性能对比：

想要性能优秀就尽量减少setData的使用和setDate时数据的量。Taro在这方面是优于uni-app的。毕竟uni还集成了mpvue和megalo。

1.3开发体验：

Taro项目在开发过程中打包运行的dist文件夹中不区分编译平台，在开发中想要多端小程序同时开发并不能实现。只能运行一个，想要运行另一个只能重新run dev。
Uni-app的dist中是区分编译平台的，故在开发中能够编译多个平台，在开发过程中对比查看不同平台运行效果，体验比Taro好，更有跨段开发的感觉。
同时uni-app的开发公司Dcloud自己的开发软件HBuilderX针对uni-app内置了开发环境，只要下载就能使用。

1.4 网络资源对比：

网上寻找Taro开发的小程序微信端的占大多数，几乎很少有别的端。而且Taro的文档完全是按照微信小程序开发文档编写的。而uni-app就可以说丰富多彩，在要找自己想要的资源组件效果时uni-app相对友好。

2、小结：

在想要同时开发能够在多个平台运行的小程序时，使用uni-app相对Taro来说更加的友好，性能方面只要在开发过程中注意下够好了。而且两者的技术栈Vue相对于React更加易学，能够在多端开发这种快速开发效率的基础上更加快一点。

二、常见的多端原生开发框架：

对比	Flutter	Weex	React Native
平台实现	Dart虚拟机编译成机器码	1、vue编写的web页面编译成js bundle 2、Native端解析DOM，生成真实的Native控件 3、Android平台通过ART虚拟机编译成机器码	1、React编写js文件 2、通过C++编写的Bridge调用原生的API，控件则是根据DOM映射到原生的View 3、Andriod平台通过ART虚拟机编译成机器码
核心语言	Dart	Vue	React
上手难度	中	低	高
框架程度	高	低	中
支持	Andriod、ios、web	Andriod、ios、web	Andriod、ios、web
社区	丰富、谷歌团队支持	较小、阿里支持	活跃、facebook支持
性能	自带绘制引擎，接近原生开发，但实际效果还是有差距。	多了js解析，渲染较慢	多了js解析，渲染较慢
TV交互支持	不太友好，需要开发这做大量焦点处理和按键分发工作，有文档但资料少	不太友好，需要开发者做大量焦点处理和按键分发工作，没有文档	明确支持，有相关文档

在开发原生APP时由于Taro（内置了React native），uni-app（内置了weex）都是内置了其他的开发框架，性能等方面不如直接使用其开发框架。同时开发过程中遇到的坑相对较多，并且对应的资源在网上、社区也相对较少。

1、常见使用场景：

Flutter使用跟系统交互少，页面不太复杂的场景。
weex适用于电商类App，业务场景不复杂、需要动态更新的场景
RN适合业务不太复杂，页面简单的小项目

2、小结：

weex最大的优势是入门简单，前端和移动端容易上手代码结构清晰，但是目前版本迭代较慢，原版人马已经不再维护，阿里自己的产品也在去weex化采用Hybird或RN代替，该框架前景堪忧，存在一定风险。
Flutter是谷歌公司强推的产品，即将推出的Fuchsia新系统打算统一桌面端、移动端、网页端，并且会采用Flutter框架，值得关注。
RN成熟度高，明确支持TV端交互，体系已经完善，但是上手门槛高，开发难度大，天花板低可以小范围使用。