学习
实践
活动
专区
工具
TVP
写文章
专栏首页极乐技术社区小程序框架选型必看:Taro vs uni-app选型经历!

小程序框架选型必看:Taro vs uni-app选型经历!

公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我一起入坑:)

背景

最近老板不知怎的很重视各种小程序平台,感觉要靠小程序完成今年大半kpi。产品和运营自然找我们要方案,一方面要快速铺开各种小程序,另一头hr又不给前端团队加headcount。

目前几杆枪,主要在微信和H5上,若按照各家规范进行原生小程序开发,肯定是不够的;

所幸业内有人在做跨各种小程序的框架,趁机研究一番,看看到底做的怎么样。

可选的小程序框架

我们主要分析了如下小程序开发框架(应该差不多全了),主要包括:

框架

技术栈

案例

微信小程序

支付宝小程序

百度小程序

头条小程序

H5

App

Taro

React

丰富

娜娜奇

React

⭕️

⭕️

⭕️

⭕️

wepy

Vue

丰富

mpvue

Vue

丰富

⭕️

uni-app

Vue

丰富

⭕️

⭕️

⭕️

megalo

Vue

⭕️

⭕️

OKAM

Vue

Mpx

Vue

Tips:如上表格包含了各框架在微信、支付宝、百度、头条、H5、App多平台的支持情况。

我们的筛选权重:

  • 跨端:权重最高,毕竟第一诉求就是覆盖各家小程序,故wepy、mpx这种针对微信小程序的增强型开发框架首先排除,其次mpvue虽支持 H5 平台代码复用,但未跟进其它几家小程序,也放弃;
  • 案例:权重次之,案例多说明使用者多,坑应该都踩得差不多了,有坑也应该是明坑;案例少的话,就要自己上去踩,暗坑多少不清楚;从官网公开案例来看,taro、uni-app公开展示的案例是最多的(mpvue、wepy虽案例也很多,但已被权重最高的跨端能力给淘汰了)
  • 技术栈:权重再次之,我们团队对于react、vue技术栈都有涉及,只是使用深度问题上有差异

最后,我们决定把taro、uni-app两个框架作为候选,做进一步对比。uni-app其实内置了mpvue,感觉是个加强版,拓展到多端了。其实这2个框架的github star差的有点多,taro远超uni-app,但不能根据这个直接做决定,对比报告还是得做的,果然最后发现不能以star取人。

Taro VS uni-app

看了几天文档对2个框架大概摸到门道,理了下对比思路,还是认真从如下几个维度比较下taro、uni-app两个框架:

  • 跨端程度:真实运行项目到各平台,对比平台差异抹平程度
  • 运行性能:框架是否带来了额外的性能开销,降低用户体验
  • 开发体验:是否支持现代开发流程,是否对工程师提供高效友好的协助
  • 社区生态:社区是否繁荣,是否有大量可用轮子?

跨端

数量对比

双方都宣传能支持微信、百度、支付宝、今日头条等小程序,H5,以及iOS和Android的App。看起来都不错。

质量对比

为验证最终跨端效果,我们分别下载 taro、uni-app的示例项目,体验编译到不同平台的运行效果。

首先选择 taro 官方账号下的知乎小程序示例(github地址),运行到各端后的效果:

从如上截图来看,taro成功实现了多端编译;我们接着更细致的对比了一下各端运行,发现taro在如下方面存在问题:

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

之后点击二级页、三级页,发现H5端的其它问题:

  • 所有页面缺少导航栏,小程序端导航栏是原生控件,taro在H5端未对应生成
  • 跳转到二级页后,底部选项卡依然不消失,难道所有页面都要包含选项卡?如下图所示,不合理

针对这些问题,我们复查了一遍taro官网,官网倒是明确说明部分事件函数在H5端不生效,主要包括:

方法

作用

onPullDownRefresh

页面相关事件处理函数--监听用户下拉动作

onReachBottom

页面上拉触底事件的处理函数

onShareAppMessage

用户点击右上角转发

onPageScroll

页面滚动触发事件的处理函数

onTabItemTap

当前是 tab 页时,点击 tab 时触发

不过进一步仔细发现,taro文档里大量存在只有微信平台打勾的情况,H5和App侧大量的X。这说明跨其他平台很难平滑迁移。

接着运行uni-app示例项目,选择官方账号下的看图App模板测试,运行到各端后效果:

从上图来看,uni-app 同样成功的实现了多端编译;我们接着更细致的对比了一下各端运行,发现如下问题:

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

之后点击二级页、三级页,没再发现明显问题。

从两个项目的实际运行来看,uni-app的跨端效果更好(其实不止对比了官方demo,我们自己也写了小demo),特别是在H5平台相比taro要完善不少。

另外,在进行两个框架的发行编译时,我们还发现了一个差异点:

  • taro 的 dist 目录下不区分编译平台,同一时间仅可编译到一个平台,不支持多个平台对比查看运行效果;
  • uni-app 的 dist 目录区分编译平台,故支持同时编译到多个平台,可同时对比查看不同平台运行效果,这个体验是不错的,更有跨端开发的感觉 另外uni-app的条件编译比较完善,这个在处理平台差异时很有用。

案例对比

  • 两个框架都在官网放上了众多案例,只是taro案例清一色是微信小程序,没看到其他端,难道大家使用taro,只是为了用react开发微信小程序,不需要跨端?
  • uni-app的案例什么平台都有,很多App做了多个平台。说起来我们领导还问过跨iOS、Android 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加载新页面时有变慢的感觉。推测uni-app的长列表没有recycle机制,花了点时间把demo改进了下,滚动下面时把前面几页的数据干掉,然后再滚动就感受不到流畅度的差别了。

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

开发体验

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

taro的安装及使用:

uni-app的安装及使用:

开发流程方面,taro和uni-app均是以微信小程序为基础,也都针对小程序的开发弊端,提供了更优秀的体验,比如:

  • 均支持使用 npm/yarn 安装管理第三方依赖
  • 均支持使用 ES6 甚至更新的ES规范
  • 均支持使用 less/scss/ts 等预编译器
  • 均支持进行应用状态管理,taro 支持 Redux/Mobx,uni-app 支持 vuex

开发工具方面,taro官方未特别推荐IDE,但提供了vscode支持的d.ts;uni-app推荐的开发工具是他自家的HBuilderX,用它可以不配环境,开箱即用;hbuilder以前接触过,当时没深研究,新版还挺让我意外,真没想到国人的开发工具可以做到这样,尤其是他家的markdown支持真心不错,于是本文就是在hbuilder里写的(已经有情感分了哈哈)。

总结:两个框架都支持现代前端开发流程。hbuilder对uni-app提供了优化定制,但对不熟悉的开发者有一定适应成本。另外hbuilder自带一个编译器,和cli装在项目下的编译器是2个,这个坑不少新人要注意别踩。

社区生态

学习交流

  • Taro通过Github Issues+微信群方式交流,微信群活跃,贡献代码的人也多。
  • uni-app有专门的论坛,还有视频教程,QQ群微信群都活跃。
  • 另外文档角度,uni-app的文档比taro要完善,数了数交流群的数量,也是uni-app多不少。

生态

  • taro官方发布了taro-ui库,awesome里三方组件不太多。
  • uni-app官方发布了uni-ui库,还有个插件市场,里面轮子很多,做业务应该可以很快拼轮子做出来。

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

橱窗里的衣服再漂亮,适合自己的才有用,开发框架亦是如此。

我们根据业务需求及团队成员现状,形成如下对比:

  • 如何在有限前端团队人数下搞定更多平台,是我们的首要考虑,我们可不想踩太多坑导致任务完不成,跨端方面uni-app更成熟;
  • 团队里熟悉vue技术栈的同学多一点,全员培训react的风险还是略高,使用uni-app内部培训时间短、风险低。

因此,最后决定使用uni-app作为新项目的开发框架。但挺诚心感谢其他开源框架的作者。

文章分享自微信公众号:
极乐技术社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:小程序社区
原始发表时间:2020-05-16
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 小程序技术选型

    由于微信小程序原生开发,和团队技术栈(react)不统一,不支持ES7以上的高级语法,不支持工程化、缺少统一配置等局限性,选型考虑市面上主流小程序框架,期望能够...

    kiki.
  • 真实测评揭秘:开发小程序用原生还是选框架?

    自 2017-1-9微信小程序诞生以来,历经几年的迭代升级,已有数百万小程序上线,成为继Web、iOS、Android之后,第四大主流开发技术。

    极乐君
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • 「Taro开发」前端多端开发,Taro观赏指南

    最近接到多端开发,因为老项目使用的React,考虑到迁移成本,选择了Taro,迁移成本相对较低,且上手较快。

    叶一一
  • 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY

    最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?

    Fundebug
  • vivo悟空活动中台 - 微组件多端探索

    随着小程序、快应用的用户体验越来越友好,用户群体庞大,运营小伙伴开始偏向将营销活动投放至微信、支付宝、快应用等微应用中。

    2020labs小助手
  • 宠汪汪多端(H5和小程序)项目实践

    业务需求需要我们同时在 H5 和小程序开发一套,既保证 App 端入口的功能,也要保证小程序端的功能,还要保证 App 端分享的小程序卡片引导用户进行社交分享,...

    胡哥有话说
  • Kbone原理解析与小程序技术选型

    https://developers.weixin.qq.com/community/develop/article/doc/0006a6326b8d38e56...

    zz_jesse
  • 从0到1构建"跨平台"应用

    大家好,我是来自互联网应用产品部的前端开发,今天给大家分享的主题是 『从0到1构建"跨平台"应用』。国际惯例,首先先自我介绍一下,我叫胡琦,江湖 人称“Copy...

    胡琦
  • Kbone原理解析 & 小程序技术选型

    首先我们来看下普通Web端框架,以Vue框架为例,一份Vue模板对应一个组件,在代码构建阶段编译成调用Dom接口的JS函数,执行此JS函数就会创建出组件对应的D...

    binnie
  • 跨平台之uni-app

    在我司业务不断快速发展的情况下,同时保证成本的增加,而选择考虑跨平台的解决方案。 原本微信小程序其实算是跨平台了,但是近来微信小程序的审核速度堪忧,从最开始的...

    yechaoa
  • vite+vue3搭建uniapp开发环境

    最近想搞个移动端或小程序的 Vue3 项目,所以选择跨端开发平台就显得十分重要。在业内主要有两个跨端开发平台,Taro 与 uniapp,但 uniapp 貌似...

    愧怍
  • 干货 | Taro 开发微信小程序入门与实战

    如果你是 Vue 开发者,但又不想过多的折腾,继续沿用 Vue 的开发方式来开发小程序,那么用 mpvue 将会是你的最明智的选择。同时也支持一些第三方 UI ...

    极乐君
  • Gitter - 高颜值 GitHub 小程序客户端诞生记

    嗯,可能一进来大部分人都会觉得,为什么还会有人重复造轮子,GitHub第三方客户端都已经烂大街啦。确实,一开始我自己也是这么觉得的,也问过自己是否真的有意义再去...

    huangjianke
  • Gitter - 高颜值 GitHub 小程序客户端诞生记

    嗯,可能一进来大部分人都会觉得,为什么还会有人重复造轮子,GitHub第三方客户端都已经烂大街啦。确实,一开始我自己也是这么觉得的,也问过自己是否真的有意义再去...

    程序亦非猿
  • 听说你小程序玩的挺溜?

    最近,因为业务需要,要新启一个小程序项目,于是乎便有了这篇选型的文章,本篇将简单讲述基础框架建设及部分兼容问题和注意事项,欢迎阅完后指点。

    饼干_
  • 三年前端寒冬入大厂,收获蚂蚁、字节 offer 面经分享

    最z近因为一些原因想要换份工作,通过猎头帮我投递了几家公司,收到了蚂蚁、字节和拼多多的面试邀约,先来说下面试的结果

    小丑同学
  • 【开源项目】基于SpringBoot的商城项目,可以拿来接私活用了!

    该项目是一款开源的电商系统,采用现阶段流行技术实现。后台管理系统包含商品管理、订单管理、运费模板、规格管理、会员管理、运营管理、内容管理、统计报表、权限管理、设...

    终码一生

扫码关注腾讯云开发者

领取腾讯云代金券