开发小程序，该用原生还是选择三方框架？|评测

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

开发小程序，该用原生还是选择三方框架？|评测

微信小程序自2017年1月9日诞生以来，经过2年多的迭代升级，已上线数百万小程序，成为继Web、iOS、微信之后的第四种主流开发技术。

随之而来的是，小程序的开发生态也蓬勃发展。 从*初的微信原生开发开始，wepy、mpvue、taro、uni-app等框架相继出现。 从刀耕火种到现代开发，生态系统日益丰富。

有了这么多的选择，问题就来了。 开发小程序时，应该使用原生框架还是选择第三方框架？

首先，微信原生开发的大部分缺点如下：

原生开发对Node、预编译器没有很好的支持，影响开发效率和工程构建流程。 微信定义了一种不伦不类的语法。 不如认真学习Vue和React，学会万能通用，而不是只学小程序。 小程序和类似的模式就像是 React 和 Vue 的混合体，但失去了 React 的灵活性和 Vue 的响应能力。 vue/react 生态中有太多可以提高开发效率的外围工具，比如 IDE、验证器、第三方库等。 。 .微信IDE相比专业编辑器确实不太好用。 它没有严格的状态管理。

同时，开发对于第三方框架始终存在各种顾虑：

恐怕性能还不如原生的。 恐怕有些功能框架无法实现。 我只能用原生的。 就怕框架不稳定跳坑。 有很多第三方框架。 我应该使用哪一个？

面对如此纠结的场景，不少热心的开发纷纷发表评测文章分享经验，但又感觉意见不一，过期信息太多。 缺乏一份非常专业、有深度，或者用当今流行的话来说，“硬核”的评测报告。

制作评估报告与一般的经验分享不同，实际上需要花费大量的时间。 它需要：

换句话说：评价要想真实，就必须做得深入！

uni-app团队花了2周的时间完成了这份报告，并坚持每个季度更新这份评估报告。 目前更新时间为2019年5月。

本文从面向用户和开发两个维度对微信原生和主流的 wepy、mpvue、taro、uni- app开发框架进行横向比较，共有七个细节。 我们希望为开发选择小程序框架提供指导。 一个参考思路。 本文基于各个框架官网可以收集到的公开数据和真实测试数据，希望能客观公正地评价各个框架的现状和优劣。 但由于涉及利益，本文的观点很可能存在偏见。 你可以用批判的眼光来看待它。 如果您发现本文有任何评价歪曲的地方，请在此举报。

面向用户和面向开发维度包括：

用户：提供完整的业务实现，保证高性能体验开发：平坦的学习曲线、现代的开发体验（工程）、高效的社区支持、积极的开发迭代、多终端复用 2、用户 1.1 功能实现

软件开发的首要目标是为用户提供完整、闭环的业务功能。

在Web开发中，如果使用Vue、React等框架让开发无法操作浏览器提供的所有API，那么这样的框架肯定是不成熟的。 小程序开发也是如此。 任何开发框架都无法限制底层API调用。

各种业务功能底层依赖于微信暴露的组件和接口（微信官网引入的组件和API规范，也称为微信原生API）。 三方框架是基于微信原生的二次封装。 开发这个时候往往会遇到问题。 问：小程序在不断迭代升级。 如果某业务依赖了*新的小程序API，但尚未封装第三方框架怎么办？

其实就像web开发中使用vue和react一样，浏览器有了新的API，并不涉及vue和react的升级。 本次评测的所有框架都不会限制开发调用底层能力。 这里详细解释了原因：

注：以上顺序是按照各个框架的诞生顺序，下同。

因此，所有三方框架都可以调用所有小程序API来完成用户的业务需求。 在这个维度上框架之间没有区别。

不过，不同的是表现体验。

1.2 性能体验

大多数第三方框架内部都有层层封装。 这些封装是否会增加运行负载并导致性能下降？ 尤其是与原生微信小程序开发相比性能如何，是大家共同关心的问题。

为了客观比较，我们特意搭建了一个测试模型，具体如下：

我们以上述仿微博小程序为例，测试两个容易出现性能问题的点：长列表加载和大量同类组件的响应。

1.2.1 长列表加载

模仿微博的列表是一个包含很多组件的列表。 这个复杂的列表对性能带来了较大的压力，非常适合性能测试。

从触发上拉加载到数据更新、页面渲染完成，都需要准确的时序。 人类视觉计时肯定是不可能的。 我们利用程序埋点，制定了如下的计时时序：

Tips：回调函数的开始可以认为是页面渲染完成的时间，因为微信定义如下（微信规范）：

测试方法：从页面空列表开始，程序自动触发上拉加载，每次添加20个列表，记录单次耗时； 固定间隔连续触发上拉加载N次，使页面达到20*N个列表。 计算这N次从触发上拉到渲染完成的平均时间。

测试结果如下：

注：以400条微博列表为例，从页面空列表开始，每1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时。 结果微信原生触发了这20次上拉->完成渲染的平均时间是876毫秒。 *快的uni-app是741毫秒，*慢的mpvue是4493毫秒

当你**次看到这些数据时，你可能会感到困惑。 别担心，下面有详细的解释。

注1：为什么mpvue/wepy测试数据不完整？

mpvue和wepy诞生时，微信小程序还不支持自定义组件，无法进行组件化开发。 为了解决这个问题，mpvue和wepy将用户编写的Vue组件编译成WXML中的()，变相实现。 组件开发能力提高了代码的复用性，这在当时的技术条件下是一个很好的技术方案。

但采用这种方案，当页面复杂、组件较多时，会大大增加页面的 DOM 节点数量，甚至超过微信对 DOM 节点数量的限制。 我们在红米手机（红米6 Pro）上进行了测试。 当页面组件数量超过500个时，mpvue和wepy实现的仿微博App会报如下异常并停止渲染。 因此，当组件很多时，这两个测试框架就不起作用了。 ，测试数据不完整。 这意味着当页面组件过多时，这两个框架都无法使用。

dom limit 检查是否有你做过的

Tips1：Wepy官网提到测试版增加了对小程序原生组件的支持。 由于是测试版，官方也在发文中表示不推荐，尚未纳入评测。

Tips2：为什么列表数量小于400时，Wepy的性能比微信原生框架高？ 这与自定义组件管理开销和业务场景有关（Wepy编译成模板，不涉及组件创建和管理开销）。 关注微博。 当涉及到组件数据传输时，微信原生框架的性能优势就显现出来了。 详细请看下面的测试数据。

解释2：为什么测试数据显示uni-app的性能比微信原生框架略好？

事实上，当页面有200条记录（200个组件）时，taro的性能数据要优于微信原生框架。

微信原生框架主要消耗时间在调用上。 如果开发不单独优化，每次都会传输大量数据； 而uni-app和taro在调用前会自动进行diff计算，并且每次只传输变化的数据。

例如当前页面有20条数据。 当触发上拉加载时，会加载20条数据。 此时，当原生框架通过下面的代码测试时，将会传输40条数据。

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    let listData = this.data.listData;  
    listData.push(...Api.getNews());//新增数据  
    this.setData({  
        listData  
    }) //全量数据，发送数据到视图层  
}

使用微信原生框架的开发可以完全优化自身，简化数据传输。 例如修改如下：

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    // 通过长度获取下一次渲染的索引  
    let index = this.data.listData.length;  
    let newData = {}; //新变更数据  
    Api.getNews().forEach((item) => {  
        newData['listData[' + (index++) + ']'] = item //赋值，索引递增  
    })   
    this.setData(newData) //增量数据，发送数据到视图层  
}

经过上述优化修改后，我们再次测试，微信原生框架的性能数据如下：

从测试结果可以看出，经过开发手动优化后，微信原生框架能够取得较好的性能，但相比微信原生，uni-app和taro的性能差距并不大。

这个结果与Web开发类似，开发也包括原生js开发、vue、react框架等。如果不进行专门的优化，原生JS编写的网页性能往往不如Vue、React框架。

正是因为Vue和React框架的优秀、性能和开发经验，原生js开发的使用量逐渐减少。

复杂长列表加载下一页评测结论：微信原生开发手动优化，uni-app>微信原生开发未手动优化，taro>wepy>mpvue

Tips：有些人认为uni-app和mpvue是一样的。 早期uni-app确实是基于mpvue进行修改的，但后来由于性能和Vue语法支持问题而完全开发。

1.2.2同类元件响应速度

长列表中的某个组件，例如点赞组件，是否能够在点击时及时修改不喜欢和喜欢的状态？ 这是本次测试的评价点。

测试方法：

在红米手机（红米6 Pro）上进行多次测试，求平均值。 结果如下：

注意：当列表数量为 400 时，对于微信原生开发应用，点赞按钮从被点击到改变状态需要 111 毫秒。

测试结果数据说明：

组件数据更新性能评估：微信原生开发、uni-app、taro > wepy > mpvue

总结一下，本次性能测试做了两个测试，长列表加载和组件状态更新。 根据两次实验，得出以下结论：

微信原生开发手动优化，uni-app > 微信原生开发未手动优化，taro > wepy > mpvue

2.开发

在满足用户业务需求的前提下，我们来谈谈开发的需求，并从以下几个维度进行比较：

2.1 平坦的学习曲线 2.1.1 DSL 语法支持

选择一个开发团队熟悉、能够快速使用的DSL是团队框架选择的基本点。

首先，微信原生开发语法既像React又像Vue，有点不伦不类。 对于开发来说，这意味着他们必须学习一套新的语法，这大大增加了学习成本。 此举遭到了大家的批评。

其他开发框架基本遵循React和Vue（类Vue）语法。 他们的主要目的是重用工程师现有的技术堆栈并降低学习成本。 这时，框架对原有框架（React/Vue）语法的支持就是一个重要的标准。 如果支持度低，并且语法与原来的框架有很大不同，开发就不得不学习新的框架。 ，成本太高了。

在实际开发过程中，发现各个开发框架并没有完全实现Web上Vue和React的所有语法：

Wepy的开发风格接近Vue.js，是类似Vue的实现。 相对于微信原生开发来说是一大进步，但相对于完整的Vue语法还有很大的差距。 开发时需要单独学习它的规则；

mpvue 和 uni-app 框架基于 Vue.js 的核心。 通过修改Vue.js之和，就可以在小程序端运行了。 mpvue支持的Vue语法稍少，而uni-app基本支持大部分Vue语法，比如复杂表达式等；

taro 对 JSX 的语法支持也达到了大多数人支持的完美程度。

DSL语法支持评测：taro,uni-app > mpvue > wepy > 微信原生

2.1.2 学习材料的完整性

官方文档、问题查找、示例demo的完整性：

教学课程：

学习材料完整性评价：微信原生 > uni-app > mpvue、taro > wepy

2.2 现代前端开发经验

在开发体验上，微信原生开发处于明显劣势。 主要区别是：

其他小程序开发框架都支持cli模式，可以在主流前端工具中开发，而且基本都自带d.ts语法提示库。

由于mpvue、uni-app、taro直接支持vue和react语法，所以支持的IDE工具链比较丰富，着色、验证、格式化功能齐全； wepy 较弱，并且有一些第三方维护的插件。

好的开发工具绝对可以极大的提升开发体验。 在这个维度上开发小程序，该用原生还是选择三方框架？|评测，明显更胜一筹的框架是uni-app，其制作公司也是*好的制作公司，.io。 是四大主流前端开发工具之一（可比）。 它对uni-app做了很多优化，因此uni-app的开发效率和易用性是其他框架无法比拟的。

开发体验维度，对比结果：uni-app > taro、mpvue > wepy > 微信原生

这里可以输出一个结论：如果需要工程能力，微信原生开发就别想了。

2.3 高效的社区支持

在学习和开发中难免会遇到问题。 官方的技术支持和社区活动非常重要。

在本次评测demo开发中，我们的同学（同时掌握了Vue和React）在学习各种多端框架时，真实感受到了语法、学习资料、社区差异带来的学习门槛，并吐槽不少。

综合评价，本次评价的结论：微信原生、uni-app > taro > mpvue > wepy

2.4 积极的开发迭代

开发必须关心一个问题：是否有人会长期维护该项目？

这个问题可以通过频率、产品更新日志（）、百度搜索指数等指标来衡量和比较。

频率

我们收集了2019年4月各项目在分支的天数（时间为4.1~4.30）。 结果如下：

尖端：

从记录来看，taro和uni-app处于更新相对活跃的状态，而wepy和mpvue则相对较弱且无人维护。

产品更新日志

通过浏览产品更新日志，可以确认产品是否在积极迭代、添加新功能、修复用户Bug。

我们来查看各个框架官方链接（）的更新日志。 下面是链接地址：

通过产品更新日志对比，微信原生、taro、uni-app更新频繁，Bug修复和新功能添加处于比较紧凑的状态； 而mpvue和wepy发布时间不长，开发需要谨慎选择。

另外，提供了各个框架的开发团队状况，这也是判断项目生命力的重要参考。

wepy：腾讯员工的兼职作品

mpvue：美团酒旅事业部前端团队制作

芋头：京东实验室

uni-app：一家B轮创业公司，投资数十人和数千万打造uni-app生态系统。

2.5 多端复用

除了微信小程序外，支付宝、百度、字节跳动、QQ等小程序也相继上线。 开发迟早要面对多设备开发。

但每个跨端框架真能像官网宣传的那样，一次性开发并发布到所有小程序平台吗？ 甚至可以在H5平台上复用代码？

我们用事实说话，依然使用上面提到的仿微博App，依次发布到各个平台，并在各个端验证各个框架的兼容性。 结果如下：

测试结果说明：

从这个简单的例子可以看出，跨端支持评测结论：uni-app, taro > mpvue > 原生微信小程序, wepy

但仅靠上面的测试是不全面的，实际业务比这个测试用例复杂得多。 但我们无法开发很多复杂的业务进行评估，所以我们需要通过与每个公司的文件进行比较来补充一些信息。

由于每个框架的文档都描述了对各种组件和API的跨端支持程度。 我们查阅了几家公司的文档，发现各家公司基本都是以微信小程序为基准，然后在其他终端上实现各种组件和API：

对于跨终端框架，一方面要考虑框架提供的通用API跨终端支持，同时还要考虑不同终端的特性差异如何兼容。 毕竟每个端都会有自己的特点，不可能完全一致。

跨端框架也涉及到UI框架的跨端问题。 评价结果如下：

*后添加跨终端的情况：

综合以上信息，本项目*终评估结论为：uni-app > taro > mpvue > 原生微信小程序，wepy

这里可以输出一个结论。 如果需要多端发布，微信原生开发和wepy可以直接淘汰。

结论

真实客观的永远是实验和数据，而不是结论。 不同需求的开发可以根据以上实验数据得出自己的选型结论。

但作为一个完整的评论，我们还必须提供一个总结，尽管它可能包含我们的主观感受：

如果你只开发微信小程序，不做多端，那么使用uni-app和taro是更好的选择。 它们相当于网络世界中的vue和react。 有了这些工具，你不再需要使用原生的wxml开发。

如果开发多端，uni-app和taro都可以。 你可以根据自己熟悉的技术栈来选择。 相对而言，uni-app的多端成熟度更高。

如果任何读者认为本文中的任何评论有歪曲之处，请在此举报。

微信小程序自2017年1月9日诞生以来，经过2年多的迭代升级，已上线数百万小程序，成为继Web、iOS、微信之后的第四种主流开发技术。

随之而来的是，小程序的开发生态也蓬勃发展。 从*初的微信原生开发开始，wepy、mpvue、taro、uni-app等框架相继出现。 从刀耕火种到现代开发，生态系统日益丰富。

有了这么多的选择，问题就来了。 开发小程序时，应该使用原生框架还是选择第三方框架？

首先，微信原生开发的大部分缺点如下：

原生开发对Node、预编译器没有很好的支持，影响开发效率和工程构建流程。 微信定义了一种不伦不类的语法。 不如认真学习Vue和React，学会万能通用，而不是只学小程序。 小程序和类似的模式就像是 React 和 Vue 的混合体，但失去了 React 的灵活性和 Vue 的响应能力。 vue/react 生态中有太多可以提高开发效率的外围工具，比如 IDE、验证器、第三方库等。 。 .微信IDE相比专业编辑器确实不太好用。 它没有严格的状态管理。

同时，开发对于第三方框架始终存在各种顾虑：

恐怕性能还不如原生的。 恐怕有些功能框架无法实现。 我只能用原生的。 就怕框架不稳定跳坑。 有很多第三方框架。 我应该使用哪一个？

面对如此纠结的场景，不少热心的开发纷纷发表评测文章分享经验，但又感觉意见不一，过期信息太多。 缺乏一份非常专业、有深度，或者用当今流行的话来说，“硬核”的评测报告。

制作评估报告与一般的经验分享不同，实际上需要花费大量的时间。 它需要：

换句话说：评价要想真实，就必须做得深入！

uni-app团队花了2周的时间完成了这份报告，并坚持每个季度更新这份评估报告。 目前更新时间为2019年5月。

本文从面向用户和开发两个维度对微信原生和主流的 wepy、mpvue、taro、uni- app开发框架进行横向比较，共有七个细节。 我们希望为开发选择小程序框架提供指导。 一个参考思路。 本文基于各框架官网可以收集到的公开数据和真实测试数据，希望能客观公正地评价各框架的现状和优劣。 但由于涉及利益，本文的观点很可能存在偏见。 你可以用批判的眼光来看待它。 如果您发现本文有任何评价歪曲的地方，请在此举报。

面向用户和面向开发维度包括：

用户：提供完整的业务实现，保证高性能体验开发：平坦的学习曲线、现代的开发体验（工程）、高效的社区支持、积极的开发迭代、多终端复用 2、用户 1.1 功能实现

软件开发的首要目标是为用户提供完整、闭环的业务功能。

在Web开发中，如果使用Vue、React等框架让开发无法操作浏览器提供的所有API，那么这样的框架肯定是不成熟的。 小程序开发也是如此。 任何开发框架都无法限制底层API调用。

各种业务功能底层依赖于微信暴露的组件和接口（微信官网引入的组件和API规范，也称为微信原生API）。 三方框架是基于微信原生的二次封装。 开发这个时候往往会遇到问题。 问：小程序在不断迭代升级。 如果某业务依赖了*新的小程序API，但尚未封装第三方框架怎么办？

其实就像web开发中使用vue和react一样，浏览器有了新的API，并不涉及vue和react的升级。 本次评测的所有框架都不会限制开发调用底层能力。 这里详细解释了原因：

注：以上顺序是按照各个框架的诞生顺序，下同。

因此，所有三方框架都可以调用所有小程序API来完成用户的业务需求。 在这个维度上框架之间没有区别。

不过，不同的是表现体验。

1.2 性能体验

大多数第三方框架内部都有层层封装。 这些封装是否会增加运行负载并导致性能下降？ 尤其是与原生微信小程序开发相比性能如何，是大家共同关心的问题。

为了客观比较，我们特意搭建了一个测试模型，具体如下：

我们以上述仿微博小程序为例，测试两个容易出现性能问题的点：长列表加载和大量同类组件的响应。

1.2.1 长列表加载

模仿微博的列表是一个包含很多组件的列表。 这个复杂的列表对性能带来了较大的压力，非常适合性能测试。

从触发上拉加载到数据更新、页面渲染完成，都需要准确的时序。 人类视觉计时肯定是不可能的。 我们利用程序埋点，制定了如下的计时时序：

Tips：回调函数的开始可以认为是页面渲染完成的时间，因为微信定义如下（微信规范）：

测试方法：从页面空列表开始，程序自动触发上拉加载，每次添加20个列表，记录单次耗时； 固定间隔连续触发上拉加载N次，使页面达到20*N个列表。 计算这N次从触发上拉到渲染完成的平均时间。

测试结果如下：

注：以400条微博列表为例，从页面空列表开始，每1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时。 结果微信原生触发了这20次上拉->完成渲染的平均时间是876毫秒。 *快的uni-app是741毫秒，*慢的mpvue是4493毫秒

当你**次看到这些数据时，你可能会感到困惑。 别担心，下面有详细的解释。

注1：为什么mpvue/wepy测试数据不完整？

mpvue和wepy诞生时，微信小程序还不支持自定义组件，无法进行组件化开发。 为了解决这个问题，mpvue和wepy将用户编写的Vue组件编译成WXML中的()，变相实现。 组件开发能力提高了代码的复用性，这在当时的技术条件下是一个很好的技术方案。

但采用这种方案，当页面复杂、组件较多时，会大大增加页面的 DOM 节点数量，甚至超过微信对 DOM 节点数量的限制。 我们在红米手机（红米6 Pro）上进行了测试。 当页面组件数量超过500个时，mpvue和wepy实现的仿微博App会报如下异常并停止渲染。 因此，当组件很多时，这两个测试框架就不起作用了。 ，测试数据不完整。 这意味着当页面组件过多时，这两个框架都无法使用。

dom limit 检查是否有你做过的

Tips1：Wepy官网提到测试版增加了对小程序原生组件的支持。 由于是测试版，官方也在发文中表示不推荐，尚未纳入评测。

Tips2：为什么列表数量小于400时，Wepy的性能比微信原生框架高？ 这与自定义组件管理开销和业务场景有关（Wepy编译成模板，不涉及组件创建和管理开销）。 关注微博。 当涉及到组件数据传输时，微信原生框架的性能优势就显现出来了。 详细请看下面的测试数据。

解释2：为什么测试数据显示uni-app的性能比微信原生框架略好？

事实上，当页面有200条记录（200个组件）时，taro的性能数据要优于微信原生框架。

微信原生框架主要消耗时间在调用上。 如果开发不单独优化，每次都会传输大量数据； 而uni-app和taro在调用前会自动进行diff计算，并且每次只传输变化的数据。

For , the page has 20 of data. When the pull-up is , 20 of data will be . At this time, when the the code test, 40 of data will be .

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    let listData = this.data.listData;  
    listData.push(...Api.getNews());//新增数据  
    this.setData({  
        listData  
    }) //全量数据，发送数据到视图层  
}

开发 using the can and the data . For , it as :

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    // 通过长度获取下一次渲染的索引  
    let index = this.data.listData.length;  
    let newData = {}; //新变更数据  
    Api.getNews().forEach((item) => {  
        newData['listData[' + (index++) + ']'] = item //赋值，索引递增  
    })   
    this.setData(newData) //增量数据，发送数据到视图层  
}

After the above and , we again and the data of 's are as :

It can be seen from the test that after by 开发 , the can , but the gap uni-app and taro is not large to .

This is to web 开发 , 开发 also js 开发 , vue, react , etc. , the of web pages in JS is often not as good as that of Vue and React .

It is of the , , and 开发 of Vue and react that the use of js 开发 has .

long list next page : 开发 is , uni-app> 开发 is not , taro > wepy > mpvue

Tips: Some think that uni-app and mpvue are the same. In the early days, uni-app was based on mpvue, but later it was 开发 due to and Vue .

1.2.2 Like speed

Can a in the long list, such as the Like , be able to the and liked in time when ? This is the point for this test.

test :

tests on the Redmi phone (Redmi 6 Pro) and find the . 结果如下：

Note: When the of lists is 400, for an 开发 on , it takes 111 for the like to state from being .

Test data :

data : 开发 , uni-app, taro > wepy > mpvue

To sum up, this test did two tests, long list and . Based on the two , the are as :

开发 is , uni-app> 开发 is not , taro > wepy > mpvue

2. 开发

On the of the needs of users, let's talk about the needs of 开发 and them from the :

2.1 Flat curve 2.1.1 DSL

a DSL that is to 开发 team and can be used is the basic point for team .

First of all, 's 开发 is both like React and Vue, which is a bit . For 开发 , it means they have to learn a new set of , which the cost. This has been by .

Other 开发 React and Vue (Vue-like) . Their main is to reuse ' stack and costs. At this time, the 's for the of the (React/Vue) is an . If the is low and the is very from the , 开发 will have to learn a new . ,the cost is too high.

开发 , it was found that each 开发 did not fully all the of Vue and React on the web:

Wepy's 开发 style is close to Vue.js, and it is a Vue-like . It is a big step to 's 开发 , but there is still a big gap to the Vue . You need to learn its rules 开发 ;

The mpvue and uni-app are based on the core of Vue.js. By the sum of Vue.js, they can run on 小程序 side. mpvue less Vue , while uni-app most Vue , such as , etc.;

taro's for JSX has also a level of that is by most.

DSL : taro,uni-app > mpvue > wepy >

2.1.2 of

of , , and demos:

:

Study : > uni-app > mpvue, taro > wepy

2.2 front-end 开发

In terms of 开发 , 开发 is at a clear . 主要区别是：

Other 小程序 开发 all cli mode and can 开发 in front-end tools, and they come with a d.ts .

Since mpvue, uni-app, and taro vue and react , the IDE tool chain is rich, with , , and ; wepy is and has some plug-ins by third .

Good 开发 tools can 开发 . In this , the that is is uni-app, and its is also the best , .io. It is one of the four front-end 开发 tools (). It has made a lot of for uni-app, so 开发 and ease of use of uni-app are by other .

开发 , : uni-app > taro,mpvue > wepy >

A can be here: If you need , just about 开发 .

2.3

It is to in and 开发 . and are very .

开发 this demo, our (who both Vue and React), when multi- , truly felt the by in , , and , and made a lot of .

, the of this : , uni-app > taro > mpvue > wepy

2.4 开发

开发 must be about one : Is there who will the for a long time?

This can be and such as , log (), and Baidu index.

频率

We the of days each was on the in April 2019 (time is 4.1 ~ 4.30). 结果如下：

尖端：

from the , taro and uni-app are in a state of , while wepy and mpvue are weak and .

产品更新日志

By the log, you can the is , new , and user bugs.

Let's check the log of each 's link (). Below is the link :

of logs, , taro, and uni-app are , and bug fixes and new are in a state; while mpvue and wepy have not been for a long time, and 开发 need to .

In , 开发 team of each is , which is also an for the of the .

wepy: a part-time work by a

mpvue: by the front-end team of Wine and

taro: Lab

uni-app:, a B , of and tens of to build the uni-app .

2.5 Multi-

In to 小程序 , 小程序 as , Baidu, , and have been one after . 开发 will have to face multi- 开发 or later.

But can each cross-end be 开发 once and to all 小程序 as on the ? Even reuse code with H5 ?

We speak with facts, still use the above- Weibo App, it to each in turn, and the of each on each end. 结果如下：

Test :

As can be seen from this , the cross- : uni-app, taro > mpvue > 小程序 , wepy

, the above test alone is not , and the is much more than this test case. , we 开发 many for , so we need to some by them with each 's .

Since each 's the of cross-end for and APIs.我们过了几家的文档，发现各家基本是以微信小程序为基线，然后把各种组件和API在其他端实现了一遍：

跨端框架，一方面要考虑框架提供的通用api跨端支持，同时还要考虑不同端的特色差异如何兼容。毕竟每个端都会有自己的特色，不可能完全一致。

跨端框架，还涉及一个ui框架的跨端问题，评测结果如下：

*后补充跨端案例：

综合以上信息，本项的*终评测结论：uni-app > taro > mpvue > 原生微信小程序、wepy

这里可以输出一个结论，如果有多端发布需求，微信原生开发、wepy这两种方式可以直接排除了。

结论

真实客观的永远是实验和数据，而不是结论。不同需求的开发者，可以根据上述实验数据，自行得出自己的选型结论。

但作为一篇完整的评测，我们也必须提供一份总结，虽然它可能加入了我们的主观感受：

如果你只开发微信小程序，不做多端，那么使用uni-app、taro是更优的选择，他们相当于web世界的vue和react酒店小程序开发制作，有了这些工具，不再需要使用原生wxml开发。

如果你开发多端，uni-app和taro都可以，可根据自己熟悉的技术栈选择，相对而言uni-app的多端成熟度更高一些。

如有读者认为本文中任何评测失真，欢迎在这里报。

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

与之相随，小程序的开发生态也在蓬勃发展，从*初的微信原生开发，到wepy、mpvue、taro、uni-app等框架依次出现，从刀耕火种演进为现代化开发，生态越来越丰富。

选择多了，问题也就来了，开发小程序，该用原生还是选择三方框架？

首先，微信原生开发的槽点大多集中如下：

原生开发对Node、预编译器、支持不好，影响开发效率和工程构建流程微信定义了一个不伦不类的语法，不如正经学vue、react，学会了全端通用，而不是只为小程序。小程序的和类似模式像是React和Vue的混合体，却丢了React的灵活和Vue的响应式。 vue/react生态里有太多周边工具，可以提高开发效率，比如ide、校验器、三方库。 . .微信那个ide和专业编辑器相比实在不好用没有正儿八经的状态管理

同时，开发者对三方框架，又总是有各种顾虑：

怕性能不如原生怕有些功能框架实现不了，只能用原生怕框架不稳定，跳到坑里以及诸多三方框架，到底该用哪个

面对如此纠结的场景，不少热心开发者发布评测文章分享经验，但感觉众说纷纭，过期信息太多。缺少一份非常专业的、深度的，或者按如今流行的话来讲，“硬核的”评测报告。

做评测报告这件事，不同于泛泛经验分享，其实非常花费时间。它需要：

换言之：评测要想真，功夫得做深！

uni-app团队花费2个周时间完成本报告，并坚持每个季度更新一次本评测报告。目前更新时间为2019年5月。

本文从面向用户、面向开发者两大维度七大细项，对微信原生及主流的wepy、mpvue、taro、uni- app开发框架进行横向对比，希望给开发者在小程序框架选型时提供一种参考思路。本文基于各框架官网可采集到的公开数据及真实测试数据，希望客观公正地评价各个框架的现状和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光来看待，如发现本文中有任何评测失真，欢迎在这里报。

面向用户、面向开发者维度，具体包括：

用户：提供完整的业务实现，并保证高性能体验开发者：平缓的学习曲线、现代开发体验（工程化）、高效的社区支持、活跃的开发迭代、多端复用2. 用户1.1 功能实现

软件开发，首要目标是向用户提供完整、闭环的业务功能。

在web开发中，如果vue、react等框架的使用，造成开发者无法操作浏览器提供的所有api，那这样的框架肯定是不成熟的。小程序开发也一样，任何开发框架，都不能限制底层的api调用。

而各种业务功能底层依赖微信暴漏的组件和接口（微信官网介绍的组件和API 规范,也即微信原生API），三方框架是基于微信原生进行的二次封装，开发者此时常会有个疑问：小程序在不断的迭代升级，如果某项业务依赖于*新的小程序API，但三方框架尚未封装，该怎么办？

实际上就像web开发中使用vue、react一样，浏览器出了一个新API，并不会涉及vue、react的升级。本评测里的所有框架，都不会限制开发者调用底层能力。这里详细解释下原因：

注：以上顺序，按各个框架的诞生顺序排序，下同。

故，三方框架均可调用所有小程序API，完成用户的业务需求，这个维度各框架是无差别的。

然而有差别的，是性能体验。

1.2 性能体验

三方框架，内部大多做了层层封装，这些封装是否会增加运行负载，导致性能下降？尤其是与原生微信小程序开发相比性能怎么样，这是大家普遍关心的问题。

为客观的进行对比，我们特意搭建了一个测试模型，详细如下：

我们以上述仿微博小程序为例，测试2个容易出性能问题的点：长列表加载、大量点赞组件的响应。

1.2.1 长列表加载

仿微博的列表是一个包含很多组件的列表，这种复杂列表对性能的压力更大，很适合做性能测试。

从触发上拉加载到数据更新、页面渲染完成，需要准确计时。人眼视觉计时肯定不行，我们采用程序埋点的方式，制定了如下计时时机：

Tips：回调函数开头可认为是页面渲染完成的时间，是因为微信定义如下(微信规范)：

测试方式：从页面空列表开始，通过程序自动触发上拉加载，每次新增20条列表，记录单次耗时；固定间隔连续触发N 次上拉加载，使得页面达到20*N 条列表，计算这N 次触发上拉到渲染完成的平均耗时。

测试结果如下：

说明：以400条微博列表为例，从页面空列表开始，每隔1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时，结果微信原生在这20次触发上拉-> 渲染完成的平均耗时为876毫秒，*快的uni-app是741毫秒，*慢的mpvue是4493毫秒

大家初看这个数据，可能比较疑惑，别急，下方有详细说明

说明1：为何mpvue/wepy 测试数据不完整?

mpvue、wepy 诞生之初，微信小程序尚不支持自定义组件，无法进行组件化开发；mpvue、wepy 为解决这个问题，将用户编写的Vue组件，编译为WXML中的模板（)，变相实现了组件化开发能力，提高代码复用性，这在当时的技术条件下是很棒的技术方案。

但如此方案，在页面复杂、组件较多的时，会大量增加页面dom 节点数量，甚至超出微信的dom 节点数限制。我们在红米手机（Redmi 6 Pro）上实测，页面组件超过500个时，mpvue、wepy 实现的仿微博App就会报出如下异常，并停止渲染，故这两个测试框架在组件较多时，测试数据不完整。这也就意味着，当页面组件太多时，无法使用这2个框架。

dom limit check if there's any you've made

Tips1：wepy官网的，提到测试版本添加了对小程序原生组件的支持，因为是测试版，官方在issue 中也表示不推荐使用，暂未纳入评测

Tips2：wepy在400条列表以内，为何性能高于微信原生框架，这个跟自定义组件管理开销及业务场景有关（wepy编译为模板，不涉及组件创建及管理开销），后续对微博点赞，涉及组件数据传递时，微信原生框架的性能优势就提现出来了，详见下方测试数据。

说明2：为什么测试数据显示uni-app 会比微信原生框架的性能略好呢？

其实，在页面上有200条记录（200个组件）时，taro 性能数据也比微信原生框架更好。

微信原生框架耗时主要在调用上，开发者若不单独优化，则每次都会传递大量数据；而uni-app、taro 都在调用之前自动做diff计算，每次仅传递变动的数据。

例如当前页面有20条数据，触发上拉加载时，会新加载20条数据，此时原生框架通过如下代码测试时，会传输40条数据

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    let listData = this.data.listData;  
    listData.push(...Api.getNews());//新增数据  
    this.setData({  
        listData  
    }) //全量数据，发送数据到视图层  
}

开发者使用微信原生框架，完全可以自己优化，精简传递数据，比如修改如下：

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    // 通过长度获取下一次渲染的索引  
    let index = this.data.listData.length;  
    let newData = {}; //新变更数据  
    Api.getNews().forEach((item) => {  
        newData['listData[' + (index++) + ']'] = item //赋值，索引递增  
    })   
    this.setData(newData) //增量数据，发送数据到视图层  
}

经过如上优化修改后，再次测试，微信原生框架性能数据如下：

从测试结果可看出，经过开发者手动优化，微信原生框架可达到更好的性能，但uni-app、taro 相比微信原生，性能差距并不大。

这个结果，和web开发类似，web开发也有原生js开发、vue、react框架等情况。如果不做特殊优化，原生js写的网页，性能经常还不如vue、react框架的性能。

也恰恰是因为Vue、react框架的优秀，性能好，开发体验好，所以原生js开发已经逐渐减少使用了。

复杂长列表加载下一页评测结论：微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

Tips：有人以为uni-app和mpvue是一样的，早期uni-app确实基于mpvue改造过，但后来因为性能和vue语法支持度问题，已经完全重新开发了。

1.2.2 点赞组件响应速度

长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？是这项测试的评测点。

测试方式：

在红米手机（Redmi 6 Pro）上进行多次测试，求其平均值，结果如下：

说明：也就是在列表数量为400时，微信原生开发的应用，点赞按钮从点击到状态变化需要111毫秒。

测试结果数据说明：

组件数据更新性能测评：微信原生开发,uni-app,taro > wepy > mpvue

综上，本性能测试做了2个测试，长列表加载和组件状态更新，综合2个实验，结论如下：

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

2.开发者

在满足用户业务需求的前提下，我们谈谈开发者的需求，从如下几个维度比较：

2.1 平缓的学习曲线2.1.1 DSL语法支持

选择开发团队熟悉的、能快速上手的DSL，是团队框架选型的基本点。

首先微信原生的开发语法，既像React ，又像Vue，有点不伦不类，对于开发者来说，等于又要学习一套新的语法，大幅提升了学习成本，这一直被大家所诟病。

其它开发框架基本都遵循React、Vue（类Vue）语法，其主要目的：复用工程师的现有技术栈，降低学习成本。此时，框架对于原框架（React/Vue）语法的支持度就是一个重要的衡量标准，如果支持度较低、和原框架语法差异较大，则开发者无异于要学习一门新的框架，成本太高。

实际开发中发现，各个开发框架，都没有完全实现Vue、React在web上的所有语法：

wepy开发风格接近于Vue.js，属于类Vue实现，相对微信原生开发算前进了一大步，但相比完整Vue语法还有较大差距，开发时需要单独学习它的规则；

mpvue、uni-app 框架基于Vue.js 核心，通过修改Vue.js 的和，实现了在小程序端的运行。mpvue支持的Vue语法略少，uni-app 则基本支持绝大多数vue语法，如、复杂表达式等；

taro 对于JSX 的语法支持度，也达到了绝大多数都支持的完善程度。

DSL语法支持评测：taro,uni-app > mpvue > wepy > 微信原生

2.1.2 学习资料完善度

官方文档、问题搜索、示例demo的完备度方面：

教学课程方面：

学习资料完善度评测：微信原生> uni-app > mpvue , taro > wepy

2.2 现代前端开发体验

开发体验层面，处于明显劣势的是微信原生开发，主要差距在于：

其它小程序开发框架均支持cli模式，可以在主流前端工具中开发，且基本都带有d.ts的语法提示库。

由于mpvue、uni-app、taro直接支持vue、react语法，配套的ide工具链较丰富，着色、校验、格式化完善；wepy要弱一些，有部分三方维护的插件。

好的开发工具，绝对可以大幅提升开发体验，这个维度上，明显高出一截的框架是uni-app，其出品公司同时也是的出品公司，.io。是四大主流前端开发工具（可对比），其为uni-app做了很多优化，故uni-app的开发效率、易用性非其他框架可及。

开发体验维度，对比结果：uni-app > taro,mpvue > wepy > 微信原生

这里可以输出一个结论：如果你需要工程化能力，那就直接忘了微信原生开发吧。

2.3 高效的社区支持

学习、开发难免遇到问题，官方技术支持和社区活跃度很重要。

本次评测demo开发期间，我们的同学（同时掌握vue和react），在学习研究各个多端框架时，切实感受到由于语法、学习资料、社区的差异带来的学习门槛，吐出了很多槽。

综合评估，本项评测结论：微信原生, uni-app > taro > mpvue > wepy

2.4 活跃的开发迭代

开发者必须关心一个问题：该项目是否有人长期维护？

这个问题可以通过频次、产品更新日志（）、百度搜索指数等指标来衡量和对比。

频率

我们采集2019年4月份（时间为4.1 ~ 4.30），每个项目在上的分支有的天数，结果如下：

尖端：

从的记录来看，taro、uni-app处于更新比较活跃的状态，wepy、mpvue则相对疲软，呈现无人维护之态。

产品更新日志

通过浏览产品更新日志，可确认产品是否在积极迭代、增加新功能、修复用户bug。

我们分别查看各框架官方链接的更新日志（），下方是链接地址：

通过产品更新日志对比，微信原生、taro、uni-app 三者更新频繁，bug修复、新功能补充都处于比较紧凑的状态；而mpvue、wepy则已有长时间没有版本发布，开发者选型需谨慎。

另外提供下各框架的开发团队情况，这也是决定项目生命力的重要参考。

wepy：腾讯一名员工的兼职作品

mpvue：美团酒旅事业部前端团队出品

taro：京东凹凸实验室

uni-app：，B轮创业公司，投入几十人、数千万打造uni-app生态。

2.5 多端复用

除了微信小程序，支付宝、百度、字节跳动、QQ等小程序陆续上线，开发者迟早要面对多端开发。

但每个跨端框架能否真的像官网宣传的那样，实现开发一次，发布到所有小程序平台？甚至和H5平台复用代码？

我们用事实说话，依然使用上述仿微博App，依次发布到各平台，验证每个框架在各端的兼容性，结果如下：

测试结果说明：

通过这个简单的例子可以看出，跨端支持度测评结论： uni-app,taro > mpvue> 原生微信小程序、wepy

但是仅有上面的测试还不全面，实际业务要比这个测试例复杂很多。但我们没法开发很多复杂业务做评测，所以还需要再对照各家文档补充一些信息。

由于每个框架的文档中都描述了各种组件和API的跨端支持程度。我们过了几家的文档，发现各家基本是以微信小程序为基线，然后把各种组件和API在其他端实现了一遍：

跨端框架，一方面要考虑框架提供的通用api跨端支持，同时还要考虑不同端的特色差异如何兼容。毕竟每个端都会有自己的特色，不可能完全一致。

跨端框架，还涉及一个ui框架的跨端问题，评测结果如下：

*后补充跨端案例：

综合以上信息，本项的*终评测结论：uni-app > taro > mpvue > 原生微信小程序、wepy

这里可以输出一个结论，如果有多端发布需求，微信原生开发、wepy这两种方式可以直接排除了。

结论

真实客观的永远是实验和数据，而不是结论。不同需求的开发者，可以根据上述实验数据，自行得出自己的选型结论。

但作为一篇完整的评测，我们也必须提供一份总结，虽然它可能加入了我们的主观感受：

如果你只开发微信小程序，不做多端，那么使用uni-app、taro是更优的选择，他们相当于web世界的vue和react，有了这些工具，不再需要使用原生wxml开发。

如果你开发多端，uni-app和taro都可以，可根据自己熟悉的技术栈选择，相对而言uni-app的多端成熟度更高一些。

如有读者认为本文中任何评测失真，欢迎在这里报。

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

与之相随，小程序的开发生态也在蓬勃发展，从*初的微信原生开发，到wepy、mpvue、taro、uni-app等框架依次出现，从刀耕火种演进为现代化开发，生态越来越丰富。

选择多了，问题也就来了，开发小程序，该用原生还是选择三方框架？

首先，微信原生开发的槽点大多集中如下：

原生开发对Node、预编译器、支持不好，影响开发效率和工程构建流程微信定义了一个不伦不类的语法，不如正经学vue、react，学会了全端通用，而不是只为小程序。小程序的和类似模式像是React和Vue的混合体，却丢了React的灵活和Vue的响应式。 vue/react生态里有太多周边工具，可以提高开发效率，比如ide、校验器、三方库。 . .微信那个ide和专业编辑器相比实在不好用没有正儿八经的状态管理

同时，开发者对三方框架，又总是有各种顾虑：

怕性能不如原生怕有些功能框架实现不了，只能用原生怕框架不稳定，跳到坑里以及诸多三方框架，到底该用哪个

面对如此纠结的场景，不少热心开发者发布评测文章分享经验，但感觉众说纷纭，过期信息太多。缺少一份非常专业的、深度的，或者按如今流行的话来讲，“硬核的”评测报告。

做评测报告这件事，不同于泛泛经验分享，其实非常花费时间。它需要：

换言之：评测要想真，功夫得做深！

uni-app团队花费2个周时间完成本报告，并坚持每个季度更新一次本评测报告。目前更新时间为2019年5月。

本文从面向用户、面向开发者两大维度七大细项，对微信原生及主流的wepy、mpvue、taro、uni- app开发框架进行横向对比，希望给开发者在小程序框架选型时提供一种参考思路。本文基于各框架官网可采集到的公开数据及真实测试数据，希望客观公正地评价各个框架的现状和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光来看待，如发现本文中有任何评测失真，欢迎在这里报。

面向用户、面向开发者维度，具体包括：

用户：提供完整的业务实现，并保证高性能体验开发者：平缓的学习曲线、现代开发体验（工程化）、高效的社区支持、活跃的开发迭代、多端复用2. 用户1.1 功能实现

软件开发，首要目标是向用户提供完整、闭环的业务功能。

在web开发中，如果vue、react等框架的使用，造成开发者无法操作浏览器提供的所有api，那这样的框架肯定是不成熟的。小程序开发也一样，任何开发框架，都不能限制底层的api调用。

而各种业务功能底层依赖微信暴漏的组件和接口（微信官网介绍的组件和API 规范,也即微信原生API），三方框架是基于微信原生进行的二次封装，开发者此时常会有个疑问：小程序在不断的迭代升级，如果某项业务依赖于*新的小程序API，但三方框架尚未封装，该怎么办？

实际上就像web开发中使用vue、react一样，浏览器出了一个新API，并不会涉及vue、react的升级。本评测里的所有框架，都不会限制开发者调用底层能力。这里详细解释下原因：

注：以上顺序，按各个框架的诞生顺序排序，下同。

故，三方框架均可调用所有小程序API，完成用户的业务需求，这个维度各框架是无差别的。

然而有差别的，是性能体验。

1.2 性能体验

三方框架，内部大多做了层层封装，这些封装是否会增加运行负载，导致性能下降？尤其是与原生微信小程序开发相比性能怎么样，这是大家普遍关心的问题。

为客观的进行对比，我们特意搭建了一个测试模型，详细如下：

我们以上述仿微博小程序为例，测试2个容易出性能问题的点：长列表加载、大量点赞组件的响应。

1.2.1 长列表加载

仿微博的列表是一个包含很多组件的列表，这种复杂列表对性能的压力更大，很适合做性能测试。

从触发上拉加载到数据更新、页面渲染完成，需要准确计时。人眼视觉计时肯定不行，我们采用程序埋点的方式，制定了如下计时时机：

Tips：回调函数开头可认为是页面渲染完成的时间，是因为微信定义如下(微信规范)：

测试方式：从页面空列表开始，通过程序自动触发上拉加载，每次新增20条列表，记录单次耗时；固定间隔连续触发N 次上拉加载，使得页面达到20*N 条列表，计算这N 次触发上拉到渲染完成的平均耗时。

测试结果如下：

说明：以400条微博列表为例，从页面空列表开始，每隔1秒触发一次上拉加载（新增20条微博），记录单次耗时，触发20次后停止（页面达到400条微博），计算这20次的平均耗时，结果微信原生在这20次触发上拉-> 渲染完成的平均耗时为876毫秒，*快的uni-app是741毫秒，*慢的mpvue是4493毫秒

大家初看这个数据，可能比较疑惑，别急，下方有详细说明

说明1：为何mpvue/wepy 测试数据不完整?

mpvue、wepy 诞生之初，微信小程序尚不支持自定义组件，无法进行组件化开发；mpvue、wepy 为解决这个问题，将用户编写的Vue组件，编译为WXML中的模板（)，变相实现了组件化开发能力，提高代码复用性，这在当时的技术条件下是很棒的技术方案。

但如此方案，在页面复杂、组件较多的时，会大量增加页面dom 节点数量，甚至超出微信的dom 节点数限制。我们在红米手机（Redmi 6 Pro）上实测，页面组件超过500个时，mpvue、wepy 实现的仿微博App就会报出如下异常，并停止渲染，故这两个测试框架在组件较多时，测试数据不完整。这也就意味着，当页面组件太多时，无法使用这2个框架。

dom limit check if there's any you've made

Tips1：wepy官网的，提到测试版本添加了对小程序原生组件的支持，因为是测试版，官方在issue 中也表示不推荐使用，暂未纳入评测

Tips2：wepy在400条列表以内，为何性能高于微信原生框架，这个跟自定义组件管理开销及业务场景有关（wepy编译为模板，不涉及组件创建及管理开销），后续对微博点赞，涉及组件数据传递时，微信原生框架的性能优势就提现出来了，详见下方测试数据。

说明2：为什么测试数据显示uni-app 会比微信原生框架的性能略好呢？

其实，在页面上有200条记录（200个组件）时，taro 性能数据也比微信原生框架更好。

微信原生框架耗时主要在调用上，开发者若不单独优化，则每次都会传递大量数据；而uni-app、taro 都在调用之前自动做diff计算，每次仅传递变动的数据。

例如当前页面有20条数据，触发上拉加载时，会新加载20条数据，此时原生框架通过如下代码测试时，会传输40条数据

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    let listData = this.data.listData;  
    listData.push(...Api.getNews());//新增数据  
    this.setData({  
        listData  
    }) //全量数据，发送数据到视图层  
}

开发者使用微信原生框架，完全可以自己优化，精简传递数据，比如修改如下：

data: {  
    listData: []  
},  
onReachBottom() { //上拉加载  
    // 通过长度获取下一次渲染的索引  
    let index = this.data.listData.length;  
    let newData = {}; //新变更数据  
    Api.getNews().forEach((item) => {  
        newData['listData[' + (index++) + ']'] = item //赋值，索引递增  
    })   
    this.setData(newData) //增量数据，发送数据到视图层  
}

经过如上优化修改后，再次测试，微信原生框架性能数据如下：

从测试结果可看出，经过开发者手动优化，微信原生框架可达到更好的性能，但uni-app、taro 相比微信原生，性能差距并不大。

这个结果，和web开发类似，web开发也有原生js开发、vue、react框架等情况。如果不做特殊优化，原生js写的网页，性能经常还不如vue、react框架的性能。

也恰恰是因为Vue、react框架的优秀，性能好，开发体验好，所以原生js开发已经逐渐减少使用了。

复杂长列表加载下一页评测结论：微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

Tips：有人以为uni-app和mpvue是一样的，早期uni-app确实基于mpvue改造过，但后来因为性能和vue语法支持度问题，已经完全重新开发了。

1.2.2 点赞组件响应速度

长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？是这项测试的评测点。

测试方式：

在红米手机（Redmi 6 Pro）上进行多次测试，求其平均值，结果如下：

说明：也就是在列表数量为400时，微信原生开发的应用，点赞按钮从点击到状态变化需要111毫秒。

测试结果数据说明：

组件数据更新性能测评：微信原生开发,uni-app,taro > wepy > mpvue

综上，本性能测试做了2个测试，长列表加载和组件状态更新，综合2个实验，结论如下：

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

2.开发者

在满足用户业务需求的前提下，我们谈谈开发者的需求，从如下几个维度比较：

2.1 平缓的学习曲线2.1.1 DSL语法支持

选择开发团队熟悉的、能快速上手的DSL，是团队框架选型的基本点。

首先微信原生的开发语法，既像React ，又像Vue，有点不伦不类，对于开发者来说，等于又要学习一套新的语法，大幅提升了学习成本，这一直被大家所诟病。

其它开发框架基本都遵循React、Vue（类Vue）语法，其主要目的：复用工程师的现有技术栈，降低学习成本。此时，框架对于原框架（React/Vue）语法的支持度就是一个重要的衡量标准，如果支持度较低、和原框架语法差异较大，则开发者无异于要学习一门新的框架，成本太高。

实际开发中发现，各个开发框架，都没有完全实现Vue、React在web上的所有语法：

wepy开发风格接近于Vue.js，属于类Vue实现，相对微信原生开发算前进了一大步，但相比完整Vue语法还有较大差距，开发时需要单独学习它的规则；

mpvue、uni-app 框架基于Vue.js 核心，通过修改Vue.js 的和，实现了在小程序端的运行。mpvue支持的Vue语法略少，uni-app 则基本支持绝大多数vue语法，如、复杂表达式等；

taro 对于JSX 的语法支持度，也达到了绝大多数都支持的完善程度。

DSL语法支持评测：taro,uni-app > mpvue > wepy > 微信原生

2.1.2 学习资料完善度

官方文档、问题搜索、示例demo的完备度方面：

教学课程方面：

学习资料完善度评测：微信原生> uni-app > mpvue , taro > wepy

2.2 现代前端开发体验

开发体验层面，处于明显劣势的是微信原生开发，主要差距在于：

其它小程序开发框架均支持cli模式，可以在主流前端工具中开发，且基本都带有d.ts的语法提示库。

由于mpvue、uni-app、taro直接支持vue、react语法，配套的ide工具链较丰富，着色、校验、格式化完善；wepy要弱一些，有部分三方维护的插件。

好的开发工具，绝对可以大幅提升开发体验，这个维度上，明显高出一截的框架是uni-app，其出品公司同时也是的出品公司，.io。是四大主流前端开发工具（可对比），其为uni-app做了很多优化，故uni-app的开发效率、易用性非其他框架可及。

开发体验维度，对比结果：uni-app > taro,mpvue > wepy > 微信原生

这里可以输出一个结论：如果你需要工程化能力，那就直接忘了微信原生开发吧。

2.3 高效的社区支持

学习、开发难免遇到问题，官方技术支持和社区活跃度很重要。

本次评测demo开发期间，我们的同学（同时掌握vue和react），在学习研究各个多端框架时，切实感受到由于语法、学习资料、社区的差异带来的学习门槛，吐出了很多槽。

综合评估，本项评测结论：微信原生, uni-app > taro > mpvue > wepy

2.4 活跃的开发迭代

开发者必须关心一个问题：该项目是否有人长期维护？

这个问题可以通过频次、产品更新日志（）、百度搜索指数等指标来衡量和对比。

频率

我们采集2019年4月份（时间为4.1 ~ 4.30），每个项目在上的分支有的天数，结果如下：

尖端：

从的记录来看，taro、uni-app处于更新比较活跃的状态，wepy、mpvue则相对疲软，呈现无人维护之态。

产品更新日志

通过浏览产品更新日志，可确认产品是否在积极迭代、增加新功能、修复用户bug。

我们分别查看各框架官方链接的更新日志（），下方是链接地址：

通过产品更新日志对比，微信原生、taro、uni-app 三者更新频繁，bug修复、新功能补充都处于比较紧凑的状态；而mpvue、wepy则已有长时间没有版本发布，开发者选型需谨慎。

另外提供下各框架的开发团队情况，这也是决定项目生命力的重要参考。

wepy：腾讯一名员工的兼职作品

mpvue：美团酒旅事业部前端团队出品

taro：京东凹凸实验室

uni-app：，B轮创业公司，投入几十人、数千万打造uni-app生态。

2.5 多端复用

除了微信小程序，支付宝、百度、字节跳动、QQ等小程序陆续上线，开发者迟早要面对多端开发。

但每个跨端框架能否真的像官网宣传的那样，实现开发一次，发布到所有小程序平台？甚至和H5平台复用代码？

我们用事实说话，依然使用上述仿微博App，依次发布到各平台，验证每个框架在各端的兼容性，结果如下：

测试结果说明：

通过这个简单的例子可以看出，跨端支持度测评结论： uni-app,taro > mpvue> 原生微信小程序、wepy

但是仅有上面的测试还不全面，实际业务要比这个测试例复杂很多。但我们没法开发很多复杂业务做评测，所以还需要再对照各家文档补充一些信息。

由于每个框架的文档中都描述了各种组件和API的跨端支持程度。我们过了几家的文档，发现各家基本是以微信小程序为基线，然后把各种组件和API在其他端实现了一遍：

跨端框架，一方面要考虑框架提供的通用api跨端支持，同时还要考虑不同端的特色差异如何兼容。毕竟每个端都会有自己的特色，不可能完全一致。

跨端框架，还涉及一个ui框架的跨端问题，评测结果如下：

*后补充跨端案例：

综合以上信息，本项的*终评测结论：uni-app > taro > mpvue > 原生微信小程序、wepy

这里可以输出一个结论，如果有多端发布需求，微信原生开发、wepy这两种方式可以直接排除了。

结论

真实客观的永远是实验和数据，而不是结论。不同需求的开发者，可以根据上述实验数据，自行得出自己的选型结论。

但作为一篇完整的评测，我们也必须提供一份总结，虽然它可能加入了我们的主观感受：

如果你只开发微信小程序，不做多端，那么使用uni-app、taro是更优的选择，他们相当于web世界的vue和react，有了这些工具，不再需要使用原生wxml开发。

如果你开发多端，uni-app和taro都可以，可根据自己熟悉的技术栈选择，相对而言uni-app的多端成熟度更高一些。

如有读者认为本文中任何评测失真，欢迎在这里报。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等