Taro vs uni-app：跨端小程序开发框架对比分析

Taro vs uni-app：跨端小程序开发框架对比分析

引用

简书

1.

https://www.jianshu.com/p/03e08399587e?utm_campaign=shakespeare&utm_content=note&utm_medium=reader_share&utm_source=weixin

随着小程序平台的日益重要，企业需要在有限的前端团队规模下快速覆盖多个小程序平台。本文详细对比了Taro和uni-app两个主流的跨端小程序开发框架，从跨端能力、运行性能、开发体验和社区生态等多个维度进行了深入分析，并结合实际业务需求和团队技能做出了最终选择。

背景

最近，公司领导层对各种小程序平台给予了高度重视，似乎要依靠小程序完成今年的大部分KPI。产品和运营部门要求前端团队快速开发并发布到多个小程序平台，但人力资源部门又不增加前端团队的人数。目前团队主要负责微信和H5的开发工作，如果按照各家小程序的原生规范进行开发，显然人手不足。

幸运的是，业内已经有一些开发者在研究跨小程序平台的开发框架。趁此机会，我们对这些框架进行了研究，以评估它们的实际效果。

可选的小程序框架

我们主要分析了以下几款主流的小程序开发框架：

我们的筛选权重如下：

• 跨端能力：权重最高，因为首要需求是覆盖多个小程序平台，因此wepy、mpx这种针对微信小程序的增强型开发框架首先被排除。mpvue虽支持H5平台代码复用，但未跟进其他小程序平台，也被放弃。
• 案例数量：权重次之，案例多说明使用者多，遇到的问题可能已经被解决。从官网公开案例来看，Taro和uni-app展示的案例最多。
• 技术栈：权重再次之，团队对React和Vue技术栈都有涉及，只是使用深度上有差异。

经过初步筛选，我们决定将Taro和uni-app作为候选框架进行进一步对比。

Taro VS uni-app

我们从以下几个维度对Taro和uni-app进行了对比：

• 跨端程度
• 运行性能
• 开发体验
• 社区生态

跨端能力

数量对比

双方都宣称支持微信、百度、支付宝、今日头条等小程序，以及H5和iOS/Android App。从理论支持上看，两者都表现良好。

质量对比

我们分别下载了Taro和uni-app的示例项目，测试它们在不同平台上的运行效果。

Taro的测试结果

我们选择了Taro官方账号下的知乎小程序示例进行测试。运行结果显示：

从截图可以看出，Taro确实实现了多端编译，但存在以下问题：

• H5端：选项卡高亮状态错误，内容显示的是第二个选项卡，但底部高亮的依然是第一个选项卡
• H5端：下拉刷新不生效
• 百度小程序端：下拉刷新触发后，回弹失败；若页面同时存在下拉刷新和上拉加载，则与页面滚动冲突

进一步测试发现：

• 所有页面缺少导航栏，小程序端导航栏是原生控件，Taro在H5端未对应生成
• 跳转到二级页后，底部选项卡依然不消失

Taro官网明确说明部分事件函数在H5端不生效，主要包括：

• onPullDownRefresh：页面相关事件处理函数-监听用户下拉动作
• onReachBottom：页面上拉触底事件的处理函数
• onShareAppMessage：用户点击右上角转发
• onPageScroll：页面滚动触发事件的处理函数
• onTabItemTap：当前是tab页时，点击tab时触发

进一步检查发现，Taro文档中大量存在只有微信平台支持的情况，H5和App侧有大量的不支持标记。这说明跨其他平台很难平滑迁移。

uni-app的测试结果

我们选择了uni-app官方账号下的看图App模板进行测试。运行结果显示：

从截图可以看出，uni-app同样实现了多端编译，但存在以下问题：

• 支付宝平台：下拉刷新、上拉加载无效

进一步测试发现，uni-app在H5平台的表现优于Taro，特别是在导航栏和页面跳转方面。uni-app的条件编译功能也比较完善，有助于处理平台差异。

案例对比

Taro的案例清一色是微信小程序，没有看到其他平台的案例。而uni-app的案例涵盖了多个平台，包括App的多端部署。

综合来看，uni-app在跨端质量和实际案例数量上表现更优。

运行性能

有人认为Taro的运行性能优于mpvue，而uni-app集成了mpvue，因此需要重点关注性能问题。不管是Taro还是uni-app，setData的优化都是小程序性能优化的关键。优化主要有两个方向：

• 尽可能减少setData调用的频次
• 尽可能减少单次setData传输的数据

在调研中发现，uni-app集成了megalo框架，megalo做了差量数据更新，理论上性能应该不错。我们自己动手写了一个长列表测试，发现：

• 前几页数据滚动时，Taro和uni-app表现差不多
• 滚动到7、8页时，uni-app加载新页面时有变慢的感觉
• 通过改进代码，滚动下面时把前面几页的数据干掉，性能差异就消失了

总结：Taro在性能优化上做的更细致，使用uni-app需要自己注意代码优化。

开发体验

Taro和uni-app的环境搭建及项目创建、运行编译都比较简单。

Taro的安装及使用

# 全局安装 @tarojs/cli
$ npm install -g @tarojs/cli
# 创建 taro 项目
$ taro init myApp
# 进入项目目录
$ cd myApp
# 运行到微信小程序，调试模式
$ npm run dev:weapp
# 发行到微信小程序
$ npm run build:weapp

uni-app的安装及使用

# 全局安装 vue-cli
$ npm install -g @vue/cli
# 创建uni-app项目
$ vue create -p dcloudio/uni-preset-vue my-project
# 进入项目目录
$ cd my-project
# 运行到微信小程序，调试模式
$ npm run dev:mp-weixin
# 发行到微信小程序
$ npm run build:mp-weixin

开发流程方面，两者都支持：

• 使用npm/yarn安装管理第三方依赖
• 使用ES6甚至更新的ES规范
• 使用less/scss/ts等预编译器
• 应用状态管理（Taro支持Redux/Mobx，uni-app支持Vuex）

开发工具方面：

• Taro官方未特别推荐IDE，但提供了vscode支持的d.ts
• uni-app推荐使用自家的HBuilderX，它提供了开箱即用的体验
• HBuilderX的markdown支持不错，但对不熟悉的开发者有一定适应成本
• HBuilderX自带编译器，与cli装在项目下的编译器是两个，新人需要注意区分

社区生态

学习交流

• Taro通过GitHub Issues+微信群方式交流，微信群活跃，贡献代码的人也多
• uni-app有专门的论坛，还有视频教程，QQ群微信群都活跃
• uni-app的文档比Taro更完善，交流群的数量也更多

生态

• Taro官方发布了Taro-UI库，第三方组件不多
• uni-app官方发布了uni-ui库，还有插件市场，轮子很多，做业务可以很快拼轮子

基于公司业务及团队人员技能考虑

我们根据业务需求和团队技能做出了以下选择：

• 跨端能力：uni-app更成熟
• 技术栈：团队熟悉Vue技术栈，全员培训React的风险较高
• 培训时间：使用uni-app内部培训时间短、风险低

因此，我们团队最终决定使用uni-app作为新项目的开发框架。