深入评估小程序跨终端开发框架

今年，小程序在用户规模和商业化方面取得了巨大成功。微信小程序日交易量超过3亿，而支付宝，百度和ByteDance 小程序的月交易量也超过3亿。

与小程序开发领域相对应，今年也发生了很大的变化。开发框架已从简单的微信小程序开发过渡到标准的多终端框架，并且进一步提高开发效率已成为开发人员的强烈需求。

今年，mpvue停止更新，Taro开始探索芋头，uni-app产品和生态持续改善，微信新推出了支持H5和微信小程序的kbone框架...

在去年的深度横评中，许多退伍军人已经退出了竞技场，一些新秀也引起了人们的注意。因此，现在该是新版衡平2020年版本的浪潮了。

测试目标筛选

跨端框架是一项繁重的投资工作。在每个框架竞争超过一年的过程中，由于投资不足，许多框架逐渐被开发人员放弃。 Uni-app和芋头已经成为依靠持续大规模投资的市场。主流。

Taro最近在稳定版本的基础上推出了芋头。这两个版本有很大的不同，这次将分别进行评估。

尽管kbone框架很快就可以使用，但毕竟它是微信正式发布的，并且很多人都在关注它，因此这次kbone被添加到了评估目标中。

因此，本次评估的主题（按发布时间顺序）：

在本次评估中，除了尽可能衡量运营绩效等数据外，该框架的官方网站以及github，Nuggets，腾讯课堂等三方社区以及其他公开收集的数据，都希望为每个人提供全面的评估基础。

功能实现

Taro和uni-app是典型的多端框架，可以发布到所有端。 kbone仅支持微信小程序和H5。

Taro和uni-app都将通用接口和组件封装到跨终端API和跨终端组件中。组件规格遵循微信小程序的规格，并且某些平台具有特定的API。这两个框架也有解决方案：

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

kbone使用html标签和js api遵循Web开发习惯；对于微信特定的api，您可以通过

process.env.isMiniprogram判断环境，然后编写微信本机代码。对于微信内置组件（例如swiper），这些组件没有可在html中替换的标记，您需要使用wx-component标记或使用wx-前缀。这样的内置组件将被一层自定义组件包装，这会带来相应的性能开销。

除了界面和组件之外，我们还以微信小程序为例，找到几种比较框架支持的典型功能：

其他描述：

wxs是改善性能体验的重要工具。除了微信小程序的wx之外，还有支付宝的SJS和百度的Filter。 uni-app完全支持这些先进技术。

通过以上功能比较：微信本机〜uni-app> taro> kbone

运行效果（微信小程序）

我们继续使用去年的测试模型来查看每个开发框架的性能在过去一年中是否有所提高。详细信息如下：

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

长列表加载

模仿微博客列表是包含许多组件的列表。这种复杂的列表给性能带来了更大的压力，非常适合于性能测试。

从触发上拉负载到数据更新和页面渲染完成，需要准确的时间。人眼的视觉定时肯定不好，我们在程序中采用埋点的方法，并设置定时时间如下：

提示：setData回调函数的开始可以视为页面渲染完成的时间，因为微信 setData的定义如下：

测试方法：从页面的空白列表开始，程序自动触发上拉和加载，每添加20个新列表，一次记录就需要时间；定期连续触发N个上拉和加载，使页面达到20 * N个项目列表，并计算从N个触发到渲染完成的平均时间。

测试结果如下：

描述：以400个微博客的列表为例。从页面上的空白列表开始，每1秒钟触发一次上载加载（添加20个微博客），并记录一次，然后触发20次Stop（此后达到400个微博客），计算这20次的平均时间，结果微信会自然触发这20次的上拉->渲染的平均时间为538毫秒，最快的Uni-app为446毫秒，最慢的kbone为4057毫秒。

乍一看这些数据，您可能会更加困惑，不用担心，下面有详细的说明

注1：为什么芋头next / kbone测试数据不完整？

由于芋头next和kbone使用动态渲染方案，因此当页面复杂且组件很多时，这种方案将大大增加页面上的dom节点数，甚至超过了dom中的dom节点数限制。 微信（以下警告信息）。我们在Redmi 6 Pro上对其进行了测量，发现当页面组件超过600个时，由芋头next和kbone实现的仿制微博客应用程序将报告异常操作并停止呈现（页面白屏），因此当两个测试框架具有更多的组件，测试数据不完整。这也意味着，当页面组件过多时，将无法使用这两个框架。

超出了区域限制，请检查您是否犯了任何错误

此外，kbone的官方网站有以下介绍：

kbone会损失一定的性能，以换取更全面的Web端功能支持。

因此，芋头next和kbone的测试数据显然与芋头2.0、uni-app的幅度不同。

如果您的应用程序是一个长长的场景，那么芋头next和kbone显然不适合。

注2：为什么测试数据显示uni-app比微信本机框架稍好？

这个问题在去年的评估中得到了解释。为了避免让新生感到困惑，这是另一种解释。

微信本机框架的耗时主要是在setData的调用中。如果开发人员没有单独进行优化，则每次都会传输大量数据；而uni-app和taro会在调用setData之前自动进行差异计算，每次仅发送更改数据。

例如，当前页上有20条数据。触发上拉加载时，将重新加载20条数据。这时，当本机框架通过以下代码测试时，setData将传输40条数据。

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

开发人员可以使用微信本机框架优化和简化数据传输（每次仅传输20个更改的数据），例如，修改以下内容：

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

经过上述优化和修改后，再次进行测试，微信本机框架的性能数据如下：

从测试结果可以看出：

此结果类似于Web开发。 Web开发中也有本机js开发，vue和react框架。如果不进行特殊优化，以本机js编写的网页的性能通常不如vue和react框架的性能。

正是由于出色的Vue和react框架，良好的性能和良好的开发经验，才逐渐减少了对本机js开发的使用。

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

细心的学生会发现，使用相同的测试电话和相同的测试代码，为什么今年的性能数据将比去年的数据有显着改善？

实际上，通过比较微信本机工程的数据，我们可以得出一个结论：微信在2019年对小程序运行时进行了重要的性能优化。

这对开发人员来说应该是个好消息，小程序具有更好的性能体验并且可以提供更好的用户服务。

复杂的长列表加载下一页评估结论：微信本机开发（手动优化）〜uni-app> 微信本机开发（无手动优化）〜芋头2.0>芋头next> kbone

同类组件的响应速度

长列表中的某个组件（例如，喜欢的组件）是否可以在单击时及时修改不喜欢和喜欢的状态？这是该测试的评估点。

测试方法：

在Redmi 6 Pro上测试了几次，得出平均值。结果如下：

注意：也就是说，当列表数为400时，微信个本机开发的应用程序从单击到点赞按钮的状态更改需要26毫秒。

测试结果数据的说明：

组件数据更新性能评估：uni-app〜芋头2.0>芋头next> kbone

总而言之，该性能测试已经完成了两项测试，即长列表加载和组件状态更新，并结合了两项实验，结论如下：

微信本机开发（手动优化）〜uni-app> 微信本机开发（无手动优化）〜taro 2.0> taro next> kbone

运营绩效（支付宝小程序）

今年添加了基于支付宝小程序的性能测试。如上所述，我们还测试了加载长列表和响应类似组件的两种情况。

方案1：长列表加载

方案2：类似组件响应

提示：

通过上述测试数据，支付宝小程序，uni-app>芋头2.0的运行性能

跨终端支持

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

Taro和uni-app相对成熟，并且支持所有主流平台。 kbone仅支持微信小程序和Web。让我们专注于比较芋头和uni-app。

小程序平台

Taro和uni-app均支持微信，支付宝，百度，ByteDance 小程序，并且功能可以基本对齐。

双方都有很多主要制造商的案例，芋头有京东，霍拉拉，淘跑等公司小程序案例，uni-app有腾讯，华为，vivo，联想，ChinaHR等公司。 ] 小程序情况。

应用平台

Taro和微信小程序引擎的对齐方式较低。许多功能要求开发人员分别在iOS和Android上进行本机开发。例如，芋头不打包App侧常见的第三方登录，付款和共享功能。

uni-app在基本引擎级别提供了丰富的功能，并提供了丰富的插件市场，可以有效提高开发人员的效率。

Taro在App端使用react native渲染引擎。尽管呈现层ui是本机的，但它在实时交互和UI操作方面的要求很高，因此效果很差。 js层和view层之间的通信丢失使很多开发人员感到无能为力。

uni-app的App引擎还为开发人员提供了本机渲染引擎和小程序引擎之间的双重选择解决方案，并提供了renderjs技术以及对wxs，bindingx和其他技术的支持，从而解决了js层和视图层的问题通信丢失问题在具有较高响应要求的UI操作中具有更好的性能。

芋头开发人员需要构建自己的iOS / Android开发环境，这比较麻烦：

如果您以前从未接触过Android开发环境，请为此做好准备。这个过程很麻烦。请

请仔细阅读以下说明，并严格遵循文档进行配置操作。

uni-app可以使前端开发人员不必依靠本机工程师独立完成该应用程序。它开发的小程序可以更顺利地成为商业应用。

使用跨平台开发的核心吸引力在于提高效率。如果App的开发是由前端，iOS，Android和其他三组工程师完成的，则效率实际上很低。

此外，uni-app还提供uni 小程序 sdk，可帮助本机应用程序快速构建自己的小程序平台。其他框架未提供此功能。

H5平台

Taro的H5平台在过去的一年中有了很大的改进，其可用性也得到了极大的提高。但是与uni-app相比，仍然缺少对wxs和小程序组件的支持。

快速申请

芋头比单应用程序更早支持快速应用程序。

但是，2020年Kuai App的开发发生了一些变化。针对新情况，uni-app提供了两个发布到Kuai App的计划（当前两个版本都在社区维护中）：

跨端灵活性

跨终端开发与条件编译是分不开的。因为我们不能用统一来抹杀每个平台的特征。

出色的条件编译功能对于所有开发的灵活性至关重要，这使开发人员可以在共享和个性化之间自由移动。

Taro，uni-app和kbone都支持通过js代码中的process.env来判断平台，然后编写特定于平台的代码。

Taro还支持具有统一接口的多终端文件编码，并在样式文件中使用ifdef条件编译。

uni-app是完全有条件编译的，目录，文件，配置，组件，js，css都可以由ifdef有条件地编译。

跨终端支持摘要结论：uni-app> taro> kbone

发展经验

Taro，uni-app和kbone均支持cli模式，该模式可以在主流前端工具中开发，并且基本上都具有d.ts语法提示库。这三个框架都支持流行的vue或react框架语法，支持的ide工具链更丰富，并且着色，验证和格式化也很完整。

与微信 native相比，这三个开发框架的开发经验更好。

但是就开发工具而言，更高的框架是uni-app。其产品公司也是HBuilderX 公司DCloud.io的产品。 HBuilderX对单应用程序进行了许多优化。代码提示，定义，easycom，运行调试...因此uni-app的开发效率和易用性无法与其他框架媲美。

发展经验维度，比较结果：uni-app> taro，kbone

无服务器/云开发

无服务器是当前的热门概念。它被称为下一代云技术，是真正的“云”。

微信率先将无服务器技术引入小程序开发领域，即云开发，以帮助开发人员在云中完成业务。随后，支付宝和百度都启动了自己的云开发。根据微信公开数据，已经有500,000名开发人员在使用微信云开发。

但是，小程序由制造商主导的云开发具有一个自然的局限性，即它与平台的绑定太紧密，无法与其他平台共享数据。

我们以微信云开发为例。如果您仅开发微信小程序，并且数据仅存在于微信平台上，那很好；但是如果您还有应用程序或其他房屋小程序，则此时[k2的数据]存储在微信平台上，而其他平台的数据则存储在开发人员自己的服务器上，并且数据碎片发生在这次。假设用户首先使用小程序，并且个人数据存储在微信平台上；保持粘性后，他升级到该应用程序。此时，App端无法在微信平台上读取数据，并且用户无法查看先前的小程序在App平台上的历史数据，甚至需要重新注册。这种情况对开发人员不利。

因此，跨终端无服务器解决方案是开发人员的最佳解决方案。

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

在无服务器方面，uni-app在其他框架方面具有领先优势。

插件市场

开发框架可以成功，除了框架本身的高度产品化之外，开发者生态系统的构建也至关重要。

uni-app是第一个在2018年底启动插件市场的应用程序。它支持前端组件，js sdk，页面模板，项目模板，本机插件和其他类型。它还提供了欣赏和付费购买的方式，以激发轮作者的创新热情。目前，市场上已经发布了将近1,500个插件，并且许多插件已被下载超过10,000次。

Taro于2019年5月在材料市场上推出。目前，市场上已经发布了90种材料。从热门列表来看，下载数量并不大，下载数量仅为数百。

Kbone当前没有插件市场。

提示：

就插件市场而言，uni-app是领导者。

结论

所有评估仅提供决策依据，最终结果仍取决于开发人员的团队技术堆栈，业务需求，未来计划等。

但是作为评估文章的结论，我们仍然必须提出自己的建议：

如果读者认为本文中的任何评估均被歪曲，请在此处向issuse报告。