公司新产品需要发布到各个小程序，最近研究比较了社区里几个主流的小程序开发框架，自己一个人做总比招别人做要好，分享给大家，欢迎大家加入：）

背景

最近老板很关注各种小程序平台，感觉今年的 KPI 大部分都会靠小程序来完成，产品和运营自然找我们出解决方案，一方面要快速上线各种小程序，另一方面 HR 又不增加前端团队，我只能

目前有好几把枪，主要在微信和H5上，如果按照各个公司的规范去开发原生的小程序，肯定是不够的；

幸好，业界有人在做一套跨平台的小程序框架，我趁这个机会研究了一下，看看它到底是怎么运作的。

可选的小程序框架

我们主要分析了以下几个小程序开发框架（应该已经差不多完成了），主要包括：

框架技术栈案例 微信小程序 支付宝小程序 百度小程序 今日头条小程序

芋头

富有的

⭕

⭕

⭕

⭕

⭕

⭕

奈々吉

很少

⭕

⭕️

⭕️

⭕️

⭕️

❌

韦皮

Vue

富有的

⭕

❌

❌

❌

❌

❌

Vue

富有的

⭕

❌

❌

❌

⭕️

❌

统一应用

Vue

富有的

⭕

⭕️

⭕️

⭕

⭕️

⭕

Vue

很少

⭕

⭕️

⭕️

❌

❌

❌

奥卡姆

Vue

很少

⭕

⭕

⭕

⭕

❌

❌

像素

Vue

很少

⭕

❌

❌

❌

❌

❌

Tips：上表包含了微信、支付宝、百度、今日头条、H5、App平台各框架的支持情况，由于掘金表格版面限制，需要向右滑动才能查看完整的支持对比。

我们的筛选权重：

最后我们决定把 taro 和 uni-app 作为进一步对比的候选。uni-app 其实是内置的，感觉像是可以拓展到多终端的加强版。其实这两个框架的星级评分相差很大，taro 远超 uni-app，但我们不能直接根据这个来做决定，还是要做对比报告。果然，最后我们发现，不能以星来评判人。

Taro VS uni-app

经过几天的文档阅读，对两个框架有了大概的了解，也整理了比较思路，还是从以下几个维度来仔细比较一下taro和uni-app两个框架：

跨终端

数量比较

双方都宣称可以支持微信、百度、支付宝、今日头条等小程序、H5，以及iOS和App，看上去还不错。

质量比较

为了验证最终的跨端效果，我们分别下载了taro和uni-app的示例工程，体验一下编译到不同平台的运行效果。

首先选择taro公众号下的知乎小程序示例（地址），在各个终端运行：

从上面的截图我们可以看出 taro 已经成功实现了多终端编译。接着我们更详细地对比了各个终端的运行情况，发现 taro 在以下几个方面存在问题：

然后再点击二级页面和三级页面，发现H5端还有其它问题：

针对这些问题，我们查看了taro官网，官网上明确写明部分活动功能在H5端无法生效，主要包括：

方法效果

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

页面触底事件的处理函数

用户点击右上角转发

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

当当前页面为标签页时，点击标签页时触发

但进一步调查发现，芋圆文件中，只勾选微信平台的情况很多，H5、App端的X也不少。由此可见，跨其他平台平滑迁移的难度。

然后运行uni-app示例项目，选择公众号下的图片查看app模板（地址）进行测试，在各端运行看看效果：

从上图可以看出uni-app也成功实现了多端编译。我们接着更详细地对比了各个终端的操作，发现存在以下问题：

之后我又点击了二级和三级页面，并没有发现明显问题。

从两个项目的实际运行情况来看，uni-app的跨端效果更佳（其实我们不但把它和官方的demo对比过，而且我们自己也写了一个小demo），特别是在H5平台方面，比taro完善很多。

另外，在编译两个框架的时候，我们发现了一个区别：

案例对比

两个框架官网上都有不少案例，但是Taro的案例全部都是微信小程序，没见到其他终端的，难道大家用Taro就是为了开发微信小程序，不需要跨终端吗？

全平台统一应用的案例都有，很多应用都是跨多个平台的。说到这里我们也问了跨iOS、跨App的问题，但是目前还有另外一个原生团队，我们只是在做备用调研。最后我们决定先把前端技术统一起来，等稳定了再考虑要不要把应用迁移到这种框架上。

综合比较，uni-app的跨端质量更佳，真实的跨端案例也更多。

运营绩效

查阅了网上的一些文章，也有人认为taro的运行性能比 更好，而且集成了uni-app，所以这个性能问题需要特别注意。

不管是taro还是uni-app，优化都是小程序性能优化的重中之重，而优化主要有两个方向：

然后在研究的过程中发现uni-app居然集成了上面说的另外一个框架（不知怎么就集成进去了）

在之前的调查中，我们了解到已经进行了差异数据更新，因此应该不会出现任何重大问题。

我们自己写了个长列表测试，写了taro版、uni-app版、原生小程序版，滚动的时候前几页的数据差不多，但是滚动了7、8页之后发现uni-app在加载新页面的时候变慢了，我们猜测是uni-app没有长列表的机制，于是花了点时间完善demo，向下滚动的时候删掉了前几页的数据，然后再次滚动流畅度就没什么区别了。

总结：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 复制代码

从开发流程上看，taro与uni-app均基于微信小程序，且均针对小程序的开发弊端提供了更好的体验，例如：

开发工具方面，taro 官方没有推荐 IDE，但是提供了支持的 d.ts；uni-app 推荐的开发工具是自带的，开箱即用，不需要任何环境；之前也接触过，当时没深入研究，新版本给了我惊喜，没想到中文开发工具也能做到这一点，尤其是支持得确实不错，所以就写到这了（已经有些感触了，哈哈）。

总结：两个框架都支持现代前端开发流程，uni-app 提供了优化的定制，但对于不熟悉的开发者来说需要一定的适配成本，另外它自带编译器，与 cli 项目安装的编译器不同，这个坑是新手要小心不要踩到的。

群落生态学

学习交流

Taro 通过 + 微信群进行交流，群内活跃度较高，贡献代码的人也很多。

uni-app有专门的论坛、视频教程以及活跃的QQ和微信群。

另外从文档来看，uni-app的文档比taro的要全，算上交流群的数量，uni-app也多了很多。

生态

Taro 官方发布了 taro-ui 库，其中不包含太多第三方组件。

uni-app官方发布了uni-ui库，还有插件市场，轮子很多，应该可以快速把轮子组装起来做业务。

考虑到公司的业务和团队技能

不管橱窗里的衣服有多漂亮，只有适合你才有用，开发框架也是一样。

根据业务需求和团队成员现状，我们形成了以下对比：

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

不过真心感谢其他开源框架的作者们，各位大佬的无私奉献，让我们省了这么多人力，谢谢！喜欢taro的朋友就别批评我了，每个人都有自己的喜好，就不要再继续争论哪个比vue好用了。

肯定会有很多uni-app的坑等着我们去跳，但是我们猿人的命运就是不停地跳坑、爬坑(▔，▔)，等我们项目做完了，我会写一篇《爬进uni-app坑的血泪史》跟大家分享。

=============结束=============