多端框架uni-app和Taro选型对比

一. 背景

小程序原生开发有不少槽点：

1.原生wxml开发对Node、预编译器、webpack支持不好，影响开发效率和工程构建流程。所以大公司都会用框架开发
2.微信定义的这套语法，wxml、wxs，以及wx:if等语法，私有化太强。不如正经学vue或react，学会了全端通用，而不是只为微信小程序
3.vue或react生态里有太多周边工具，可以提高开发效率，比如ide、校验器、三方库。。。而微信的开发者工具和专业编辑器相比实在不好用，个性化设置也非常少

作为前端工程师，除了微信小程序，还要开发web、其他小程序甚至App，人们不喜欢来回切换开发工具和变更语法思考方式。

一些多端框架uni-app或taro可以解决这些问题，但开发者又经常有些顾虑：

1.怕使用框架后，微信小程序里有的功能无法实现，受制于uni-app的更新
2.怕性能不如原生WXML
3.怕框架不成熟，跳到坑里
4.担心社区生态不完善

本文从开发者关心的功能、性能、学习门槛、开发体验、生态、可扩展性等维度对uniapp和taro进行了分析测评。

二. uni-app和Taro的介绍

1.### uni-app：uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

详细介绍见官方文档:uniapp.dcloud.io/

1.### taro：taro是多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动小程序、H5、React Native 等的应用.

详细介绍见官网:nervjs.github.io/taro/

三.uni-app和Taro的特点

1.### 官网介绍uni-app的特点：* 跨端数量更多；一套代码，可以发布到IOS，Android，小程序，H5等多个平台。

平台能力不受限：在跨端的同时，通过推荐编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台；支持原生代码编写和原生sdk生成。
性能体验优秀：体验更好的Hybrid框架，加载新页面速度更快
周边生态丰富：支持NPM包管理，兼容微信小程序自定义组件及JS，SDK，支持mpvue项目及组件，APP端支持和原生混合编码；相当于微信小程序中丰富的三方sdk克直接用于跨平台开发。
学习成本低：基于通前端技术栈，采用vue语法+微信小程序api,无额外学习成本。
开发成本低：人力成本大幅度节省，招聘，人力，管理，研发，测试各方面成本大幅度下降；HbuildX是高效开发利器，熟练掌握后研发效果至少翻倍（即便值开发一个平台）。

2.### 官网介绍taro的特点：* 多端运行：一键生成可以在微信小程序/H5/ReactNative等端运行的代码。

语法风格：采用React语法标准，支持JSX书写，让代码更具表现性。
组件化：支持组件化开发，让代码可以复用，让功能开发更加清晰。
TypeScript：全面支持TypeScript，提供更强大的生产力。
现代开发流程：配套的开发工具Taro CLI让开发流程自动化，一切都从一行命令开始

四. 内容测评比较

	uni-app	taro	原生
1.功能	相同，不限制底层API 调用	相同，不限制底层API 调用	相同
2.性能	常规场景更优	常规场景更优	需要自己编写复杂代码才能提高性能（setData）
3.社区生态	丰富，更多高性能组件（uni-ui，插件市场）	丰富（taro-ui）	丰富
4.开发体验	纯vue体验，高效、统一，上手快；工程化能力强(双向绑定)	遵循React语法，对于 `JSX` 的语法支持相对完善，taro3开始支持vue	语法私有化；工程化能力弱
5.多端能力	同时支持H5、多家小程序、跨平台App；官方提供了`uni ui`，可全端运行	同时支持H5、多家小程序、跨平台App；官方提供了`taro ui`，只支持微信小程序和H5两端，不支持App	只能用于单个平台小程序
6.学习资料完善度	官方视频教程，基础文档和各种使用专题内容丰富，问题搜索效果较好，示例demo功能完备，并发布为7端上线。详见。 30多个QQ群，微信群，气氛活跃	基础API文档完整，具体使用问题资源较少，问题搜索效果一般，示例demo只包含基础功能，仅发布了微信一端。详见。 9个微信群，气氛活跃	官方文档
7.UI组件库	uView UI (vue2 丰富，持续更新中)	Nut UI (vue2/vue3. 丰富，持续更新中)Taro UI（react. 丰富，不支持抖音小程序，已两年未更新）	- WeUI组件库

具体分析对比详细情况可参考：

ask.dcloud.net.cn/article/364… 或者 ask.dcloud.net.cn/article/371…

五. 总结

橱窗里的衣服再漂亮，适合自己的才有用，开发框架亦是如此。基于公司业务及团队人员技能考虑，经过开会综合考量，决定选择uni-app，具体原因如下:

1.uni-app在不同平台的运行效果更好；
2.uni-app有它自带的IDE,能够帮助我们快速构建项目和打包项目；
3.如何在有限前端团队人数下搞定更多平台，是我们的首要考虑，没有人想踩太多坑导致任务完不成，并且跨端方面uni-app更成熟；
4.学习uni-app（vue）的学习成本更低，用户体量大，社区生态完整，开发时间和风险更低。

App端框架选型：

现在我们做的项目主要以小程序为主，但既然选择了跨端框架，就必然要考虑到后续如果开发app的情况。下列对一些热门的跨端app框架包括flutter，react native，uniapp，taro做了分析对比。

一. 各框架优劣分析

	优势	劣势
1.flutter	- UI性能可以比肩原生，编译出来的程序可以达到60bps的高性能。 Dart在 JIT模式下，速度与 JavaScript基本持平。但是 Dart支持 AOT，当以 AOT模式运行时，JavaScript便远远追不上了。	优点即缺点，Dart 语言的生态小，精通成本比较高。- 不支持热更新，嵌套地狱，代码难看难维护。 UI控件API设计不佳，不适合国情，学习成本高- 应用场景有限，dart未来扑朔迷离
2.react native	现成的组件，社区驱动，热加载。可以通过 JSBundle 即时更新 App。相比原来冗长的审核和上传过程，发布和测试新功能的效率大幅提高。纯单页的，嵌入原生App比较灵活	需要具备react、原生开发能力，学习、用人成本高。官方文档中可以发现仍有部分组件和API都区分了Android和IOS 版本，也就是说仍不能真正实现严格意义上的“一套代码，多平台使用”。缺乏很多基本控件，第三方开源质量良莠不齐。。 rn是纯单页应用，如果一个应用的页面很多，用rn写会很崩溃，变量污染和干扰严重。
3.uni-app	性能体验优秀，平台能力不受限。学习成本低，效率高。社区活跃，生态好，组件丰富，国内应用生态丰富度高。支持多页面，页面之间上下文隔离，写页面较多的大型应用更合适。支持热更新，APP最新修改可以动态发布，而不需要提交APP市场审核	产品少，成熟度不高。 nvue原生开发有局限性，特别是样式方面限制比较严重，定制化程度低。 APP端文档松散，api众多
4.taro	平台能力不受限。采用热加载的即时编译方式，使得App UI的开发体验得到改善。摆脱了WebView的交互和性能问题，同时可以直接套用网页开发中的css布局机制。可以通过 JSBundle 即时更新 App。	产品少，成熟度不高。在动画效率和性能的支持还存在一些问题，性能上不如原生Api。官方文档中可以发现仍有部分组件和API都区分了Android和IOS 版本，也就是说仍不能真正实现严格意义上的“一套代码，多平台使用”。缺乏很多基本控件，第三方开源质量良莠不齐。需要具备react、原生开发能力。

二. 总结

以下是论坛中一些使用过uniapp开发app的意见，仅作为参考：

1.个人感觉uniapp是数字天堂完成度较低，较不成熟的产品。来源：知乎
2.uni-app看似完美，小问题确实太多来源：知乎
3.uni-app和taro 推荐用在跨端小程序中。跨平台的app不建议使用，可以考虑react native(产品成熟度高，体验性好),和 flutter(热度高，ui和性能接近原生)

目前的市面上多端应用开发主要还是小程序 + H5 的形式比较多，app的相对很少。一套代码横跨 iOS Android Web 和小程序比较复杂，可能会存在大量兼容性问题。uniapp开发的app目前来看没有大型的成熟案例，使用的话踩坑会比较多，所以综合考虑暂不使用uniapp去开发app应用。

uniapp语法选择

跨平台小程序的框架已选定uniapp，众所周知uniapp支持的是vue语法，vue3自出世以来备受好评，那么unipp是否要用vue3去开发呢，他对vue3的支持度是否良好，学习资料是否完善，还需深入研究。

一、uniapp对vue3的更新史

uni-app对vue3 & Vite的升级，是一个渐进式过程：

2020年9月：小程序平台支持 vue3 开发，小程序平台编译器依然使用webpack；
2021年5月：H5平台支持 vue3 开发，H5平台编译器升级为 Vite；
2021年8月：App平台支持 vue3 开发，App平台编译器升级为 Vite；
2021年11月：小程序平台编译器升级为 Vite；

至此，uni-app在全平台支持了 Vite 编译及Vue 3.x 运行。

二、vue2和vue3在开发uniapp中的对比

新版 uni-app 框架主要做了三大改进：

重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
新增支持 Vite 构建工具，在H5平台实现秒开预览；
新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；

基于这三大改进，我们从语法支持，编译速度，运行性能，代码体积，学习资料五方面进行分析对比：

1.### 语法支持：新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。

Vue 3.x的一些新增特性，uni-app也已经完全支持，如： - 支持<script setup> - 支持<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind) - 支持jsx、tsx（h5,app 平台支持，小程序不支持）

另外，在小程序平台，新版uni-app也扩展了更多的语法，如： - 更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型） - 更完整的 props 支持（如传递函数） - 更完善的 slot 支持（如作用域插槽）

2.### 编译速度以下挑选了uni-app常用项目模板，在小程序平台编译，测试其编译时间：

从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。

3.### 运行性能开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。界面如下：

进行多次测试，求其平均值，结果如下：

记录条数	200	400	600	800	1000
vue2	30ms	43ms	56ms	72ms	90ms
vue3	8ms	9ms	9ms	8ms	9ms

从表格中可以看出：

随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；
基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。

4.### 代码体积选择uni-app常用项目模板，在小程序平台，分别测试vue 2.6和vue 3.x的编译包大小

从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。

5.### 学习资料* 文档。官网对 vue2和vue3，以及升级迁移都有专门的官方文档，另外也可参考vue3官方文档

视频课程。官方视频教程和大多数视频课程以vue2为主的多，vue3相对较少
插件市场。目前插件市场中vue2的插件数量多于vue3

三、总结

综上，以数字说话，vue3版本uni-app开发的是有诸多好处的

更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
更好的运行性能，用户端响应更快，体验更好；
更小的代码体积，瘦身30%以上，更省体积、更省流量

vue3 2020年09月正式发布，更是有很多优秀的新特性，例如 Composition 组合 API、基于 Proxy 的响应式系统、自定义渲染器等。可以说很好地拥抱了未来，并在新⼿友好度上做到了极致，为开发人员提供了更多的控制。虽然vue2的学习资料和项目经验较多，但随着vue3成为vue的默认版本，越来越多的企业将来肯定会升级到Vue3.0，这是趋势。所以对于新项目而言，使用vue3是最好的建议。

开发跨端微信小程序框架选型指南相关推荐

微信小程序框架——微信小程序前端开发工具
微信小程序框架框架小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务. 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 Java ...
开发小程序用php框架,微信小程序框架目前比较火的是？
微信小程序框架目前比较火的是? 微信小程序框架目前比较火的应该就是uniapp,该框架是一个使用Vue开发的小程序框架,其优势在于开发者只需编写一套代码,即可发布到iOS.Android.H5.以及各 ...
wepy微信小程序框架和wept第三方小程序开发工具
微信小程序框架wepy文档: 参考链接:https://segmentfault.com/a/1190000007580866 点击打开链接点击打开链接微信小程序第三方开发工具wept: 项目地址 ...
【微信小程序开发小白零基础入门】微信小程序框架【建议收藏】
微信小程序框架文章目录微信小程序框架一.逻辑层 1.注册程序 1.App()函数 2.onPageNotFound()函数 3.getApp()函数 2.注册页面 1.初始数据 2.生命周期回调 ...
spring boot开发QQ音乐微信小程序（包含服务端源码）
spring boot+spring mvc+spring整合开发QQ音乐微信小程序(含简单服务端) 项目描述: spring boot+spring mvc+spring代理请求QQ音乐接口获取数据 ...
微信小程序云开发教程-微信小程序框架的介绍
同学们大家好,我是小伊同学,今天我们来学习微信小程序框架. 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的.相同点在于他们使用的开发语言,代码结构以及代码的 ...
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程
王者级微信小程序开发实战教学从零到高手搭建微信小程序框架开发教程小程序进阶王者级微信小程序开发实战教学课程,讲师手把手对同学们进行微信小程序开发的进阶实战,从零开始搭建,从本地到云端开始系统化的 ...
vue+uni-app商城实战 | 第一篇：从0到1快捷开发一个商城微信小程序，无缝接入OAuth2实现一键授权登录
一. 前言本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...

开发跨端微信小程序框架选型指南