Taro 和 uni-app选型对比
一.Taro和uni-app的介绍
1.taro的介绍
taro是多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用.
详细j介绍见官网:https://nervjs.github.io/taro/
2.uni-app的介绍
uni-app
是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。
详细介绍见官方文档:https://uniapp.dcloud.io/
二.Taro和ni-app的特点
官网介绍:
1.官网介绍taro的特点:
(1)多端运行:一键生成可以在微信小程序/H5/ReactNative等端运行的代码。
(2)语法风格:采用React语法标准,支持JSX书写,让代码更具表现性。
(3)组件化:支持组件化开发,让代码可以复用,让功能开发更加清晰。
(4)TypeScript:全面支持TypeScript,提供更强大的生产力。
(5)开发体验:贴心的代码智能提示,实时代码检查,让开发效率大幅提升。
(6)现代开发流程:配套的开发工具Taro CLI让开发流程自动化,一切都从一行命令开始
2.官网介绍uni-app的特点:
(1)跨端数量更多;一套代码,可以发布到IOS,Android,小程序,H5等多个平台。
(2)平台能力不受限:在跨端的同时,通过推荐编译+平台特有API调用,可以优雅的为某平台写个性化代码,调用专有能力而不影响其他平台;支持原生代码编写和原生sdk生成。
(3)性能体验优秀:体验更好的Hybrid框架,加载新页面速度更快
(4)周边生态丰富:支持NPM包管理,兼容微信小程序自定义组件及JS,SDK,支持mpvue项目及组件,APP端支持和原生混合编码;相当于微信小程序中丰富的三方sdk克直接用于跨平台开发。
(5)学习成本低:基于通前端技术栈,采用vue语法+微信小程序api,无额外学习成本。
(6)开发成本低:人力成本大幅度节省,招聘,人力,管理,研发,测试各方面成本大幅度下降;HbuildX是高效开发利器,熟练掌握后研发效果至少翻倍(即便值开发一个平台)。
三.两者的对比
1.共同点:
(1)两者都是用主流框架开发的
(2)都能支持微信、百度、支付宝、今日头条等小程序,H5,以及iOS和Android的App
(3)均支持使用 npm/yarn 安装管理第三方依赖
(4)均支持使用 ES6 甚至更新的ES规范
(5)均支持使用 less/scss/ts 等预编译器
(6)均支持进行应用状态管理,taro 支持 Redux/Mobx,uni-app 支持 vuex
2.维度考量:
- 技术栈:使用的技术框架,对比技术上的差异
- 开发工具:适合开发人员的工具,能为开发带来锦上添花的效果
- 跨端程度:真实运行项目到各平台,对比平台差异抹平程度
- 运行性能:框架是否带来了额外的性能开销,降低用户体验
- 开发体验:是否支持现代开发流程,是否对工程师提供高效友好的协助
- 社区生态:社区是否繁荣,是否有大量可用轮子?
- 质量对比:通过一些案例进一步了解两者开发功能上的优劣
特点描述 | taro | uni-app | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
技术栈 | 使用react开发的框架 | 使用vue开发的框架 | ||||||||||||
开发工具 |
taro官方未特别推荐IDE,但提供了vscode 支持的d.ts。也可以根据自身情况选择自己习惯的 开发工具开发,可以提高编译代码上的开发效率 (开发工具自由) |
uni-app推荐的开发工具是他自家的HBuilderX,用它可以不配环境,开箱即用。hbuilder对uni-app提供了优化定制,但对不熟悉的开发者有一定适应成本。另外hbuilder自带一个编译器,和cli装在项目下的编译器是2个,这个坑不少新人要注意别踩。(开发工具局限,只能用Hbuild工具开发) | ||||||||||||
跨端程度 | 微信、支付宝、百度、头条、H5、App多平台 | 微信、支付宝、百度、头条、H5、App多平台(官网特别强调支持IOS,Android) | ||||||||||||
运行性能 | taro在性能优化上做的更细致 | uni-app需要自己注意代码优化 | ||||||||||||
开发体验 |
taro的安装及使用: |
uni-app的安装及使用: |
||||||||||||
社区生态 |
1.Taro通过Github Issues+微信群方式交流,微信群活跃,贡献代码的人也多。 2.taro官方发布了taro-ui库,awesome里三方组件不太多。 3.github 上taro的star远超uni-app |
1.uni-app有专门的论坛,还有视频教程,QQ群微信群都活跃。 2.uni-app官方发布了uni-ui库,还有个插件市场,里面轮子很多,做业务应该可以很快拼轮子做出来。 3.uni-app的文档比taro要完善,数了数交流群的数量,也是uni-app多不少。 |
||||||||||||
质量对比 (为验证最终跨端效果,我们分别下载 taro、uni-app的示例项目,体验编译到不同平台的运行效果。) |
首先选择 taro 官方账号下的知乎小程序示例(github地址),运行到各端后的效果: 从如上截图来看,taro成功实现了多端编译;我们接着更细致的对比了一下各端运行,发现taro在如下方面存在问题:
之后点击二级页、三级页,发现H5端的其它问题:
不过进一步仔细发现,taro文档里大量存在只有微信平台打勾的情况,H5和App侧大量的X。这说明跨其他平台很难平滑迁移。 |
接着运行uni-app示例项目,选择官方账号下的看图App模板(github地址)测试,运行到各端后效果: ![]() ![]() 从上图来看,uni-app 同样成功的实现了多端编译;我们接着更细致的对比了一下各端运行,发现如下问题:
之后点击二级页、三级页,没再发现明显问题。 从两个项目的实际运行来看,uni-app的跨端效果更好,特别是在H5平台相比taro要完善不少。 另外,在进行两个框架的发行编译时,我们还发现了一个差异点:
|
||||||||||||
案例对比 | 两个框架都在官网放上了众多案例,只是taro案例清一色是微信小程序,没看到其他端 | uni-app的案例什么平台都有,很多App做了多个平台(特别强调跨iOS,Android) |
四.总结
综合考量,决定选择uni-app,具体原因如下:
1.uni-app在不同平台的运行效果更好;
2.uni-app有它自带的IDE,能够帮助我们快速构建项目和打包项目;
3.如何在有限前端团队人数下搞定更多平台,是我们的首要考虑,没有人想踩太多坑导致任务完不成,并且跨端方面uni-app更成熟;
4。学习uni-app(vue)的学习成本更低,开发时间和风险更低。
Taro 和 uni-app选型对比的更多相关文章
- MQ选型对比RabbitMQ RocketMQ ActiveMQ
原文:MQ选型对比RabbitMQ RocketMQ ActiveMQ 几种MQ产品说明: ZeroMQ : 扩展性好,开发比较灵活,采用C语言实现,实际上他只是一个socket库的重新封装 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni-app,wex5,APPcan,ApiCloud几款国内webapp开发框架的选型对比
框架列表. https://www.cnblogs.com/xiaxiaxia/articles/5705557.html 前言 近期,要开一个新的项目,APP类型.最重要的需求就是能够随时调整APP ...
- 我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比(转载)
转载自:https://www.sojson.com/blog/48.html 前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: ...
- 为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比
原文:https://www.sojson.com/blog/48.html 前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: ...
- ORM选型对比
ORM框架选型 ORM框架选型 jian A YEAR AGO (2017-04-10) orm, database 选型标准:实现O/R mapping,基于promise,支持原生SQL语句,支持 ...
- MQ选型对比ActiveMQ,RabbitMQ,RocketMQ,Kafka 消息队列框架选哪个?
最近研究消息队列,发现好几个框架,搜罗一下进行对比,说一下选型说明: 1)中小型软件公司,建议选RabbitMQ.一方面,erlang语言天生具备高并发的特性,而且他的管理界面用起来十分方便.不考虑r ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- 序列化方案选型对比 - JSON/ProtocolBuffer/FlatBuffer/DIMBIN
4千字长文预警!! 背景 JSON/XML不好吗? 好,再没有一种序列化方案能像JSON和XML一样流行,自由.方便,拥有强大的表达力和跨平台能力.是通用数据传输格式的默认首选.不过随着数据量的增加和 ...
随机推荐
- 达拉草201771010105《面向对象程序设计(java)》第十周学习总结
达拉草201771010105<面向对象程序设计(java)>第十周学习总结 实验十 泛型程序设计技术 实验时间 2018-11-1 第一部分:理论知识 泛型:也称参数化类 ...
- 量化投资学习笔记34——《Python机器学习应用》课程笔记08
岭回归 解决某些训练样本线性相关,导致回归结果不稳定的情况. 它是一种用于共线性数据分析的有偏估计回归方法.是一种改良的最小二乘估计法. 在sklearn中使用sklearn.linear_model ...
- 正式学习MVC 04
1.ActionResult ActionResult是一个父类, 子类包括了我们熟知的 ViewResult 返回相应的视图 ContentResult 返回字符串 RedirectResult( ...
- 用table类型布局一个新闻网页
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- [面试专题]Web缓存详解
Web缓存详解 标签(空格分隔): 缓存 缓存之于性能优化 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影响网站交互的前提下可以大大加快网站加载速度. 降低服务器压力: ...
- 【每日一包0017】pretty-ms
[github地址:https://github.com/ABCDdouyae...] pretty-ms 将毫秒转换为容易读取的时间:1337000000 → 15d 11h 23m 20s 普通用 ...
- seo搜索优化教程09 - seo搜索优化外链优化
为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉科技强势推出seo搜索优化教程.此为seo教程第九课 网络营销推广中有句行话,叫做"内容为王,外链为王",可见外链对于 ...
- seo搜索优化教程10-黑帽SEO
为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉科技强势推出seo搜索优化教程.此为seo教程第十课 学习黑帽SEO并不是教大家如何作弊,而是想让大家避免使用黑帽SEO手法,从而导致被搜 ...
- Linux学习--4.用户和组的管理
用户和组的管理 前言 本篇文章主要讲Linux系统下用户和组的概念,还有添加用户和组,修改用户和组的基本操作,会涉及不少与之相关的配置文件与命令的介绍,几乎所有 正文 首先,简单提下概念,用户是操作系 ...
- 免ROOT卸载手机自带软件详细教程
一.准备条件 1.电脑一台 2.手机一部 3.WiFi 二.下载所需资源 微信扫码进入搜索,选择安卓软件卸载工具 根据图中提示,按照自己的系统进行下载 三.下载完后解压(以Windows为例),解压后 ...