• 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.维度考量:

    • 技术栈:使用的技术框架,对比技术上的差异
    • 开发工具:适合开发人员的工具,能为开发带来锦上添花的效果
    • 跨端程度:真实运行项目到各平台,对比平台差异抹平程度
    • 运行性能:框架是否带来了额外的性能开销,降低用户体验
    • 开发体验:是否支持现代开发流程,是否对工程师提供高效友好的协助
    • 社区生态:社区是否繁荣,是否有大量可用轮子?
    • 质量对比:通过一些案例进一步了解两者开发功能上的优劣
    特点描述tarouni-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端:选项卡高亮状态错误,如上图,内容显示的是第二个选项卡,但底部高亮的依然是第一个选项卡
    • H5端:下拉刷新不生效
    • 百度小程序端:下拉刷新触发后,回弹失败;若页面同时存在下拉刷新和上拉加载,则和页面滚动冲突

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

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

      针对这些问题,我们复查了一遍taro官网,官网倒是明确说明部分事件函数在H5端不生效,主要包括:
    方法作用
    onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作
    onReachBottom 页面上拉触底事件的处理函数
    onShareAppMessage 用户点击右上角转发
    onPageScroll 页面滚动触发事件的处理函数
    onTabItemTap 当前是 tab 页时,点击 tab 时触发
    不过进一步仔细发现,taro文档里大量存在只有微信平台打勾的情况,H5和App侧大量的X。这说明跨其他平台很难平滑迁移。

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

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

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

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

    从两个项目的实际运行来看,uni-app的跨端效果更好,特别是在H5平台相比taro要完善不少。

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

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


    案例对比 两个框架都在官网放上了众多案例,只是taro案例清一色是微信小程序,没看到其他端 uni-app的案例什么平台都有,很多App做了多个平台(特别强调跨iOS,Android)

    四.总结

    综合考量,决定选择uni-app,具体原因如下:

    1.uni-app在不同平台的运行效果更好;

    2.uni-app有它自带的IDE,能够帮助我们快速构建项目和打包项目;

    3.如何在有限前端团队人数下搞定更多平台,是我们的首要考虑,没有人想踩太多坑导致任务完不成,并且跨端方面uni-app更成熟;

    4。学习uni-app(vue)的学习成本更低,开发时间和风险更低。

  • 相关阅读:
    百度地图定位经纬度返回4.9E-324有关问题
    急!JDBC问题,发生通信错误。错误位置:Reply.fill()。消息:数据不足。 ERRORCODE=-4499, SQLSTATE=08001
    Android 图片添加水印图片或者文字
    查询出多条记录,取最大或最小的某条件的记录,取唯一记录
    listView获取item的Edit内容,listView中的edit内容在滚动时自动赋值了前面的内容
    ListView中的item的按照和item点击事件并存
    update select
    db2 怎么计算两个时间相差多少个月。如2015-10-10 和2014-1-12
    解决AndroidADT自带Eclipse编辑器不能自动代码提示的问题
    python协程详解,gevent asyncio
  • 原文地址:https://www.cnblogs.com/yjiangling/p/10788910.html
Copyright © 2020-2023  润新知