跨端开发框架深度横评

上周，Taro 团队发布了一篇《小程序多端框架全面测评》，让开发者对业界主流的跨端框架，有了初步认识。感谢 Taro 团队的付出。

不过横评这件事，要想作完善，其实很是花费时间。不是只看文档就行，它须要：

• 真实的动手写多个平台的测试demo，比较各个平台的功能、性能，它们的实际状况究竟是不是如文档宣传的那样？
• 真实的学习每一个框架，了解它们的学习曲线，在实际开发中遇到问题时，感觉它们的文档、教程、社区生态和技服能力到底怎么样？

咱们 uni-app 团队投入一周完成了这个深度评测，下面咱们就分享下，实际开发不一样框架的测试例遇到的问题，和最终的测试结果。

评测实验介绍

• 开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。
• 界面以下：

• 开发版本：一共开发了6个版本，包括微信原生版、wepy版、mpvue版、taro版、uni-app版、chameleon版（以这些产品发布时间排序，下同），按照官网指引经过cli方式默认安装(应该是最新稳定版)。
• 测试代码开源（Github仓库地址：https://github.com/dcloudio/test-framework），

Tips:如有同窗以为测试代码写法欠妥，欢迎提交 PR 或 Issus

• 测试机型：红米 Redmi 6 Pro、MIUI 10.2.2.0 稳定版（最新版）、微信版本 7.0.3（最新版）
• 测试环境：每一个框架开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差别。

• 测试维度：

  1. 跨端支持度如何？
  2. 性能如何？
  3. 学习门槛
  4. 工具与周边生态

1. 跨端支持度如何

开发一次，处处运行，是每一个程序员的梦想。但现实每每变成开发一次，处处调错。

各个待评测框架，是否真得如宣传的那样，一次开发、多端发布？

咱们将上述仿微博App依次发布到各平台，验证每一个框架在各端的兼容性，结果以下：

平台	微信原生	wepy	mpvue	taro	uni-app	chameleon
微信小程序	⭕️	⭕️	⭕️	⭕️	⭕️	⭕️
支付宝小程序	❌	❌	⭕️	⭕️	⭕️	❌
百度小程序	❌	❌	⭕️	⭕️	⭕️	❌
头条小程序	❌	❌	⭕️	⭕️	⭕️	❌
H5端	❌	❌	❌	上拉加载/下拉刷新失效	⭕️	上拉加载/下拉刷新失效
App端	❌	❌	❌	上拉加载失效	⭕️	列表没法滚动，没法测试上拉加载/下拉刷新

测试结果说明：

• ⭕ 表示支持且功能正常，❌ 表示不支持，其它则表示支持但存在部分bug或兼容问题
• wepy 2.0 宣称版已支持其余家小程序，本测试基于wepy官网指引安装的wepy-cli默认版本为1.7.3，尚不支持多端
• chameleon尝鲜版宣称支付宝、百度小程序，本测试基于chameleon官网指引安装的chameleon-tool默认版本为0.1.1，尚不支持其它小程序

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

可是仅有上面的测试还不全面，实际业务要比这个测试例复杂不少。但咱们无法开发不少复杂业务作评测，因此还须要再对照各家文档补充一些信息。
因为每一个框架的文档中都描述了各类组件和API的跨端支持程度。咱们过了几家的文档，发现各家基本是以微信小程序为基线，而后把各类组件和API在其余端实现了一遍：

• taro：H5端实现了大部分微信的API，App端和微信的差别比较大。
• uni-app：组件、API、配置，大部分在各个端均已实现，个别API有说明在某些端不支持。能够看出uni-app是完整在H5端实现了一套微信模拟器，在App端实现了一套微信小程序引擎，才达到比较完善的平台兼容性。
• chameleon：很是经常使用的一些组件和API在各端已经实现，这部分的平台差别较少。但大量组件和API须要开发者本身分平台写代码。

跨端框架，一方面要考虑框架提供的通用api跨端支持，同时还要考虑不一样端的特点差别如何兼容。毕竟每一个端都会有本身的特点，不可能彻底一致。

• taro：提供了js环境变量判断和统一接口的多端文件，能够在组件、js、文件方面扩展多端，不支持其余环节的分平台处理。
• uni-app：提供了条件编译模型，全部代码包括组件、js、css、配置json、文件、目录，均支持条件编译，可不受限的编写各端差别代码。
• chameleon：提供了多态方案，能够在组件、js、文件方面扩展多端，不支持其余方式的分平台处理。

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

• taro：官方提供了taro ui，支持小程序(微信/支付宝/百度)、H5平台，不支持App，详见
• uni-app：官方提供了uni ui，可全端运行；uni-app还有一个插件市场，里面有不少三方ui组件，详见
• chameleon：官方提供了cml-ui扩展组件库，可全端运行，但组件数量略少，详见

最后补充跨端案例：

• mpvue：微信端案例丰富，未见其它端案例
• taro：微信端案例丰富，百度、支付宝、H5端亦有少许案例
• uni-app：微信、App、H5三端案例丰富，官方示例已发布到6端
• chameleon：未看到任何端案例

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

以前曾有友商掀起一番真跨端和伪跨端之争，经过本次Demo实测，这个争论能够盖棺定论了。

2. 跨端框架性能如何

跨端框架基本都是compiler + runtime模式，引入的runtime是否会下降运行性能？

尤为是与原生微信小程序开发相比性能怎么样，这是你们广泛关心的问题。

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

2.1 长列表加载

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

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

• 计时开始时机：交互事件触发，框架赋值以前，如：上拉加载（onReachBottom）函数开头
• 计时结束时机：页面渲染完毕(微信setData回调函数开头)

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

字段	类型	必填	描述
data	Object	是	此次要改变的数据
callback	Function	否	setData引发的界面更新渲染完毕后的回调函数

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

测试结果以下：

列表条数	微信原生	wepy	mpvue	taro	uni-app	chameleon
200	770	625	969	752	641	1261
400	876	781	4493	974	741	1970
600	1111	-	-	1250	910	2917
800	1406	-	-	1547	1113	4040
1000	1690	-	-	1878	1321	5196

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

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

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

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

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

dom limit exceeded please check if there's any mistake you've made

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

说明2：uni-app 比微信原生框架性能更好？逆天了？

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

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

例如当前页面有20条数据，触发上拉加载时，会新加载20条数据，此时原生框架经过以下代码测试时，setData会传输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
200	770	572	641	752
400	876	688	741	974
600	1111	855	910	1250
800	1406	1055	1113	1547
1000	1690	1260	1321	1878

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

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

也偏偏是由于Vue、react框架的优秀，性能好，开发体验好，因此原生js开发已经逐渐减小使用了。

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

2.2 点赞组件响应速度

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

测试方式：

• 选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），
• 点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；

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

列表数量	微信原生	wepy	mpvue	taro	uni-app	chameleon
200	91	279	666	92	93	101
400	111	501	1507	125	107	145
600	144	-	-	152	148	178
800	176	-	-	214	181	236
1000	220	-	-	229	234	272

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

测试结果数听说明：

• wepy/mpvue 测试数据不完整的缘由同上，在组件较多时，页面已经再也不渲染了
• 基于微信自定义组件实现组件开发的框架（uni-app/taro/chameleon），组件数据通信性能接近于微信原生框架，远高于基于template实现组件开发的框架（wepy/mpvue）性能

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

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

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

3. 学习门槛

DSL语法支持度

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

实际开发中发现，各个多端框架，都没有彻底实现vue、react在web上的全部语法：
taro 对于 JSX 的语法支持是相对完善的，其文档中描述将来版本计划，

更多的 JSX 语法支持，1.3 以后限制生产力的语法只有只能用 map 创造循环组件一条

mpvue、uni-app 框架基于 Vue.js 核心，经过修改 Vue.js 的 runtime 和 compiler，实现了在小程序端的运行，支持绝大部分的Vue语法；uni-app 编译到微信端曾经使用过mpvue，但后来重写框架，支持了更多vue语法如filter、复杂 JavaScript 表达式等；

wepy、chameleon 都是 类Vue 的实现，仅支持 Vue 的部分语法，开发时须要单独学习它们的规则；

DSL语法支持评测：taro,uni-app > mpvue > wepy,chameleon

学习资料完善度

• 官方文档、搜索系统的完备度方面：uni-app文档内容丰富，示例demo完备，taro次之，其余几个框架相对要弱一些。mpvue文档虽少，但其概念不复杂，也没有支持H五、App，组件、API文档均可直接看微信的文档，学习难度倒也很低。
• 教程方面：uni-app官方有视频教程，很多三方专业培训机构也录制的uni-app教程，包括腾讯课堂自家NEXT学院也录制了uni-app培训视频课，公开售卖；mpvue在腾讯课堂也有三方视频教程售卖；taro没有视频教程，但官方发布了掘金小册；wepy和chameleon尚未专业教程。

学习资料完善度评测：uni-app > mpvue , taro > chameleon > wepy

技术支持和社区活跃度

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

目前看，uni-app、taro、chameleon都有专职人员作技术支持，uni-app因交流群过多，还单独引入了智能客服机器人。

活跃的社区意味着你遇到问题有人可问、或者前人会沉淀经验到文章里供你搜索。uni-app官方有30多个交流群（其中有不少千人大群），自建论坛中有大量交流帖子；taro和mpvue有9个500人微信群；wepy官网的微信已没法添加，chameleon发布较晚，用户群还较少。除uni-app外，其余框架没有自建论坛社区。

本次评测demo开发期间，咱们的同窗（同时掌握vue和react），在学习研究各个多端框架时，切实感觉到因为语法、学习资料、社区的差别带来的学习门槛，吐出了不少槽。

综合评估，本项评测结论：uni-app > taro > mpvue > wepy > chameleon

Tips:本测评忽略React、Vue两框架自身的学习门槛

4. 工具和周边生态

工具

全部多端框架均支持cli模式，能够在主流前端工具中开发。
各框架基本都带有d.ts的语法提示库。
因为mpvue、uni-app、taro直接支持vue、react语法，配套的ide工具链较丰富，着色、校验、格式化完善，chameleon针对部分编辑器推荐了插件，wepy有一些三方维护的vscode插件。

工具属性维度，明显高出一截的框架是uni-app，其出品公司同时也是HBuilder的出品公司，DCloud.io。
HBuilder/HBuilderX系列是国产开发工具，有300万开发者用户。
HBuilderX为uni-app作了不少优化，故uni-app的开发效率、易用性非其余框架可及。
固然对于不习惯HBuilderX的开发者而言，uni-app的这个优点没法体现。

周边生态

一个底层框架，其周边配套很是重要，好比ui库、js库、项目模板。

• wepy：出现时间久，开源项目多，占据必定优点。
• mpvue：发布时间也较早，历史积累较多。
• taro：官方提供了taro ui，github上有一些开源项目。
• uni-app：提供了插件市场，ui库、周边模板丰富
• chameleon：尚未造成周边生态。

值得注意的是，uni-app和mpvue的插件生态是互通的，都是vue插件。因此双方还联合举办了插件大赛。这个联合生态的周边丰富度，是目前各个框架中最丰富的。

顺便打个广告，欢迎有实力的同窗参加 uni-app/mpvue插件开发大赛，领取iPhone Xs Max等丰厚奖品。

综上比较，工具和周边生态评测结论：uni-app,mpvue > wepy > taro > chameleon

其余常见评测指标

github star：

wepy	mpvue	taro	uni-app	chameleon
17136	16650	17078	4728	4287

github star 数对比：wepy > taro > mpvue > uni-app > chameleon

Tips:

• star 数采集时间：2019.03.31 21:30
• star 数量和产品发布时间有关，也和用户使用习惯有关；除uni-app外，其余框架的交流互动主要是github的issus，uni-app的开发者通常在uni-app的问答社区中交流反馈，github页面访问量较低。

百度指数

百度指数表明了开发者的搜索量和包含关键字的网页数量。以下是各跨端框架近7天（2019-03-24 ~ 2019-03-30）的百度指数：

Tips:

• wepy未被百度指数收录，说明其搜索量和包含该关键字的网页数量都不够多。
• taro和chameleon 的名称取自于已存在的名称，实际指代开发框架的指数应该更低。

案例

仅看发布到微信小程序的案例，数量和质量综合对比，wepy > mpvue > taro , uni-app > chameleon

若是看多端案例，综合对比，uni-app > taro > mpvue > wepy > chameleon

除了uni-app外，其余跨端框架的出品方自己为一线开发商，其内部项目会使用这些框架，经受过实战考验。但同时鲜有其余大开发商使用这类框架。

这里面有面子问题，也有兼容问题。不少开发商作的框架，能够知足其自身业务需求，但对外开放后想知足全部开发者，仍然须要投入大量工做完善产品，不少开发商主营业务不在此，并无这么作。

这也是不少开源项目被称为KPI项目的缘由。

客观讲，凹凸实验室投入如此大精力打磨taro，让uni-app团队也很惊讶和佩服。
chameleon团队初期投入也很大，但发布时间还短，若是能长期投入下去，也是使人敬佩的。
uni-app团队自己就是专业作开发者服务的，案例不少，但创业者居多。

能够说整个多端框架市场仍处于起步期，距离让更多开发者接受，还须要全部框架做者的共同努力。

其余补充说明

1. 开源和App侧的补充说明

有的友商在评测中提到uni-app的开源性不足问题。
须要说明下，uni-app和其余多端框架同样，都是前端框架，是纯开源的。

除了uni-app，其余框架的App端，或者使用expo(一个基于react native的封装库）、或者使用weex。

作过这些开发的人都知道，原生排版引擎和web排版引擎有不少差别。并且无论react native仍是weex，都只是渲染器，能力部分还须要开发者写原生代码，这就没法跨端了。expo比react native强的是多封装了一些能力，但也带来新的限制。

uni-app的App端，是一个真的小程序引擎，又补充了可选的weex引擎。这也是uni-app在App端可以提供比其余跨端框架更好兼容性的缘由。

而这个引擎，是另外一个开源项目，叫h5p，这个引擎是部分开源状态。

整个业内目前还不存在一个彻底开源的小程序引擎。

不过uni-app的App端使用许但是彻底免费，能够放心使用。

其实也不用好奇为何DCloud会有小程序引擎，由于业内第一个作小程序的并非微信，而是DCloud。

关于App端，其实能够再写出一篇很长的专业评测。后续uni-app团队会再作一篇App端与react native、weex、cordova、flutter等框架的对比。

2. 转换和混写

taro提供了原生小程序转换为taro工程的转换器，也支持在原生小程序里部分页面嵌入taro编写的页面，这是taro的特点，其余跨端框架没有提供。这对于下降入门门槛有很多帮助。

结语

真实客观的永远是实验和数据，而不是结论。不一样需求的开发者，能够根据上述实验数据，自行得出本身的选型结论。

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

若是你想多端开发，提高效率，不想踩太多坑，uni-app相对更完善。

若是你只开发微信小程序，不作多端，那么使用uni-app、微信原生开发、taro是更优的选择。

• 若是使用微信原生开发，须要注意手动写优化代码来控制setdata
• 若是你是react系，那就用taro
• 若是是vue系，那就用uni-app，uni-app在性能、周边生态和开发效率上更有优点

若是你主要为了微信端和H5端，那么uni-app和taro均可以。能够根据本身熟悉的技术栈选择。

若是你主要须要跨App端，uni-app兼容性更好，其余框架的App端差别过大。若是你只关心App，不关心小程序和H5，那欢迎关注咱们后续的评测：uni-app和cordova、react native、flutter的深度比较。

若是你主要为了各家小程序，且不用复杂组件，那除了uni-app和taro，mpvue也是不错的选择。mpvue发布2.0版本后，搜索指数明显爬升，但愿能持续更新，迎来二次繁荣。

chameleon发布不久，提供的组件和API还不多，但其将来的规划比较使人期待，值得关注。

这篇评测写完后，小编有点惴惴不安。

一方面本评测不太温和，容易得罪人。但咱们相信，这样的评测，会激起全部跨端框架从业者的斗志，让你们投入更多去完善产品，这对整个产业、对前端开发者，是大好事。

另外一方面，读者可能会觉得现阶段的uni-app很完美，其实咱们深知uni-app还有不少须要完善的地方。uni-app团队也将持续投入心血，为中国的前端开发者造福！

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