北京华网天下

2020 跨端开发框架深度横评：老将退出江湖，新秀吸引眼球

2024-06-06

来源：网络整理

又到了四月份，距离我上一次发布跨端开发框架的深度评测，已经过去整整一年了。

今年小程序在用户规模和商业化方面取得了巨大的成功，微信小程序日活跃用户超过3亿，支付宝、百度、字节跳动小程序月活跃用户也均突破3亿。

今年小程序开发也发生了巨大的变化，开发框架从单纯的微信小程序开发过渡到以多终端框架为标配，进一步提高开发效率成为开发者的强烈诉求。

今年我们停止了更新，Taro接下来开始探索，uni-app产品和生态不断完善，微信上线了支持H5和微信小程序的新框架……

去年深度交叉比对中的很多老将都已退役，而一些新人也备受关注。因此，是时候对 2020 版进行新的交叉比对了。

评估目标筛选

跨端框架需要大量的投入，在一年多的各类框架竞争中，不少框架因投入不足而逐渐被开发者抛弃，而Uni-app、Taro则依靠持续的大规模投入，成为市场主流。

在稳定版的基础上，taro 最近又推出了 taro next，两个版本差别比较大，所以本次就分别进行评测。

虽然该框架发布不久，但毕竟是微信官方发布的，有不少人关注，所以这次将其纳入评测对象。

因此，本次评测对象（按发布时间排序）：

除了运行性能等实测数据外，本次评测尽力通过框架官网以及掘金、腾讯课堂等第三方社区公开收集数据，希望给大家提供全面而全面的评测依据。

功能

Taro、uni-app是典型的多终端框架，可以发布到各个终端，但仅支持微信小程序和H5。

taro 和 uni-app 都将通用的接口和组件封装成了跨端的 API 和跨端的组件，组件规范遵循微信小程序的规范。对于一些平台特有的 API，这两个框架也有解决方案：

Taro与uni-app可以不受限制地调用各小程序平台的所有API和组件。

遵循 Web 的开发习惯，使用 HTML 标签和 JS API；当涉及到微信专用 API 时，可以使用 .env. 确定环境，然后编写微信原生代码。对于 HTML 中没有标签可替换的微信内置组件（如），需要使用 wx- 标签或使用 wx- 前缀。此类内置组件会被包裹一层自定义组件，从而带来相应的性能开销。

除了接口和组件之外，我们以微信小程序为例，找了几个典型的能力来比较框架的支持情况：

-pk-01.png

补充笔记：

wxs是提升性能体验的重要利器，除了微信小程序的wxs，还有支付宝、百度的SJS，这些先进技术uni-app都全面支持。参考：神秘的wxs，uni-app如何利用它大幅度提升性能

从以上功能对比来看：微信原生~uni-app > taro >

运营绩效

我们延续去年的测试模型，看看各小程序开发框架的性能在过去一年里是否有所提升，详情如下：

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

长列表加载

类微博列表是包含很多组件的列表，这种复杂的列表对性能的压力比较大，非常适合做性能测试。

从触发上拉加载到数据更新、页面渲染完成都需要精准的时序，人眼的视觉时序肯定不够，所以我们利用程序跟踪制定了以下时序时序：

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

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

测试结果如下：

注：以 400 条微博列表为例，从页面空列表开始，每隔 1 秒触发一次上拉加载（增加 20 条微博），记录单次耗时，触发 20 次后（页面达到 400 条微博）停止，计算这 20 次的平均耗时。结果显示，微信原生在这 20 次触发上拉 -> 渲染的平均耗时为 538 毫秒，最快的 uni-app 为 446 毫秒，最慢的为 4057 毫秒。

第一次看到这些数据，你可能会一头雾水。别担心，下面有详细的解释。

解释1：为什么芋圆接下来/测试数据不完整？

因为 taro next 和采用的是动态渲染方案，当页面复杂，组件较多时，此类方案会大大增加页面 DOM 节点数，甚至超过微信的 DOM 节点限制（如下警告信息所示）。我们在红米手机（6 Pro）上测试发现，当页面组件超过 600 个时，taro next 和实现的仿微博 App 会报错运行异常并停止渲染（页面白屏）。所以这两个测试框架在组件较多时，测试数据不完整。也就是说，当页面组件过多时，这两个框架是无法使用的。

dom 如果你做了

此外官网还有如下介绍：

它用一定的性能损失来换取更全面的Web端功能支持。

所以taro next的测试数据明显和taro 2.0、uni-app不在一个水平上。

如果你的应用是长列表的场景，那么 taro next 显然不适合。

注2：为什么测试数据显示uni-app性能略优于微信原生框架？

这个问题在去年的考核中已经解释过了，为了避免新生产生困惑，我们在这里再解释一遍。

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

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

代码语言：txt

复制

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

开发者可以利用微信原生框架对数据传输进行优化精简（每次只传输20条变化的数据），例如修改如下：

代码语言：txt

复制

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

经过以上优化修改后，微信原生框架的性能数据如下：

从测试结果我们可以看出：

这个结果和web开发类似，也包括原生js开发，vue，框架等等，如果不做特别的优化，使用原生js编写的网页性能往往比vue和框架差。

正是因为Vue以及框架的优秀，良好的性能，以及良好的开发体验，导致原生js开发的使用逐渐减少。

注3：为什么今年的性能测试数据与去年不同？

细心的同学会发现，同样的测试手机，同样的测试代码，为何今年的性能数据比去年有明显提升呢？

事实上，通过对比微信原生项目的数据，我们可以得出这样的结论：2019年，微信针对小程序的运行时做了大幅度的性能优化。

这对于开发者来说应该是个好消息，小程序将拥有更好的性能体验，能够承载更好的用户服务。

加载下一页复杂长列表的评测结论：微信原生开发（手动优化）~uni-app > 微信原生开发（未手动优化）~taro 2.0 > taro next >

喜欢组件响应速度

测试重点在于长列表中的组件，例如“喜欢”组件，在被点击时，能否及时在“不喜欢”和“喜欢”之间切换状态。

测试方法：

我们对红米手机（6 Pro）进行了多次测试，并计算平均值，结果如下：

注意：即列表数量为400时，微信原生应用的点赞按钮从被点击到变为点赞状态需要26毫秒。

测试结果数据说明：

组件数据更新性能评估：uni-app～taro 2.0 > taro next >

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

微信原生开发（手动优化）~uni-app > 微信原生开发（未手动优化）~taro 2.0 > taro next >

跨端支持

这三个框架都是为了解决平台同构的问题，跨端比较是必要的。

Taro和uni-app都比较成熟，支持所有主流平台，而uni-app只支持微信小程序和web端，我们重点对比一下taro和uni-app。

小程序平台

taro与uni-app均支持微信、支付宝、百度、字节跳动小程序，功能基本相同。

产品选型软件编程_小程序开发技术选型_选型开发程序技术小结怎么写

双方都有来自大公司的案例，Taro有来自京东、货拉拉、淘票票等公司的小程序案例，uni-app有来自腾讯、华为、vivo、联想、中华英才网等公司的小程序案例。

应用平台

Taro 与微信小程序引擎并不对齐，很多功能需要开发者在 iOS 和上做原生开发才能实现。比如 App 端很常见的三方登录、支付、分享等功能在 Taro 中并没有封装好。

Uni-app提供了丰富的基础引擎层面的能力以及丰富的插件市场，可以有效提高开发者的效率。

Taro 在 App 端采用了渲染引擎，渲染层 UI 虽然是原生的，但是在实时交互、高响应的 UI 操作方面一直表现不佳，js 层与视图层之间的沟通缺失让很多开发者感到力不从心。

Uni-app 的 App 为开发者提供了原生渲染引擎和小程序引擎两种选择，同时通过发明新技术和支持 wxs 等技术解决了 js 层和 view 层通信丢失问题，在对响应要求高的 UI 操作上有更好的表现。比如这种动画：

Taro 开发者需要自行搭建 iOS/开发环境，比较繁琐。(官方原文地址)：

Uni-app让前端开发者可以独立完成APP，不再依赖工程师，通过uni-app开发的小程序可以更加平滑的转化为可商业化APP。

采用跨平台开发的核心诉求就是为了提高效率，如果一个App的开发由前端、iOS等三组工程师共同完成，其实效率是很低的。

另外uni-app还提供了uni小程序sdk，可以帮助原生应用快速搭建自己的小程序平台，这是其他框架所没有提供的。

H5平台

Taro的H5平台在过去的一年里取得了很大的进步，易用性得到了很大的提升，但和uni-app相比，仍然缺少对wxs和小程序组件的支持。

快应用

Taro 比 uni-app 更早支持快应用。

但2020年快应用的发展发生了一些变化，针对新的情况，uni-app提供了两种发布到快应用的解决方案（目前两个版本均在社区维护中）：

跨端灵活性

跨平台开发离不开条件编译，因为统一并不能消除各个平台的特性。

优秀的条件编译能力对于各端开发的灵活性至关重要，让开发者能够轻松平衡共享与个性化。

taro和uni-app都支持在js代码中通过.env来判断平台，然后编写针对平台的代码。

Taro 还支持统一界面的多终端文件编码，以及样式文件中的条件编译。

uni-app 是完全可条件编译的，包括目录、文件、配置、组件、js、css，一切都可以条件编译。

跨端支持汇总：uni-app > taro >

开发经历

taro 和 uni-app 都支持 CLI 模式，可以在主流的前端工具中开发，基本都自带了 d.ts 语法提示库。三个框架都支持主流的 Vue 或语法，配套的 IDE 工具链比较丰富，着色、校验、格式化等功能比较完善。

相比微信原生，这三个开发框架的开发体验均更佳。

不过在开发工具方面，明显更胜一筹的框架是uni-app，它的制作者也是.io的制作者，针对uni-app做了很多优化，包括代码提示，跳转到定义，运行调试等，因此uni-app的开发效率和易用性是其他框架所无法企及的。

开发经验维度，对比结果：uni-app > taro，

/云开发

它是目前的热门概念，被称为下一代云技术，才是真正的“云”。

微信最早将技术引入小程序开发领域，即云开发，帮助开发者在云端完成业务。随后，支付宝、百度也相继推出了自己的云开发。根据微信公开数据，目前已有50万开发者在使用微信云开发。

但小程序厂商主导的云端开发，有一个天然的局限性，就是和平台绑定得太紧，无法和其他平台进行数据共享。

我们以微信云开发为例，如果你只开发微信小程序，数据只存储在微信平台，那么就没有问题。但是如果你还有APP或者其他小程序，微信小程序的数据都存储在微信平台，其他平台的数据都存储在开发者自己的服务器上。这时候就会出现数据碎片化的情况。假设一个用户先使用一个小程序，将个人数据存储在微信平台，有了粘性之后，又升级到App，这时候App是无法读取微信平台的数据的，那么用户就无法查看之前在小程序上的历史数据，甚至需要在App平台重新注册。这种情况对于开发者来说很不利。

所以跨端方案对开发者来说才是最好的解决方案。

目前云开发的主流框架支持：

从维度上看，uni-app远远领先于其他框架。

插件市场

一个开发框架的成功，不仅取决于框架本身的高度产品化，更重要的是开发者生态的构建。

uni-app于2018年底率先上线插件市场，支持前端组件、js sdk、页面模板、项目模板、原生插件等多个类型，并提供欣赏、付费购买等手段，激发作者的创作激情。目前已上线插件近1500款，多款插件下载量超过1万次。

Taro于2019年5月上线素材市场，目前已上线90个素材；从热门榜单来看，下载量并不多，最多的也不过几百个。

尚无插件市场。

尖端：

在插件市场，uni-app处于领先地位。

学习资源

除了各大框架的官方网站之外，开发者通常还会通过视频教程、社区博客等进行系统的学习。