可选的小程序框架

框架技术栈案例微信小程序支付宝小程序百度小程序头条小程序H5AppTaroReact丰富⭕⭕⭕⭕⭕⭕娜娜奇React少⭕⭕️⭕️⭕️⭕️❌wepyVue丰富⭕❌❌❌❌❌mpvueVue丰富⭕❌❌❌⭕️❌uni-appVue丰富⭕⭕️⭕️⭕⭕️⭕megaloVue少⭕⭕️⭕️❌❌❌OKAMVue少⭕⭕⭕⭕❌❌MpxVue少⭕❌❌❌❌❌

筛选权重：

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

最后把taro、uni-app两个框架作做进一步对比。 uni-app其实内置了mpvue，感觉是个加强版，拓展到多端了。

二.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）的学习成本更低，开发时间和风险更低。

https://www.jianshu.com/p/03e08399587e

参考