uni-app跨端开发框架深度横评之2020版

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app跨端开发框架深度横评之2020版

又是一年四月天，距离上次发布跨端开发框架深度横评已过去整整一年。

这一年，小程序在用户规模及商业化方面都取得了极大的成功。微信小程序日活超过3亿，支付宝、百度、字节跳动小程序的月活也纷纷超过3亿。

对应小程序开发领域，这一年也发生了巨大变化。开发框架从单纯的微信小程序开发，过渡到多端框架成为标配，进一步提升开发效率成为开发者的强烈需求。

这一年 mpvue 停止更新，Taro开始探索 taro next，uni-app 产品和生态持续完善，微信新推出了支持H5和微信小程序的 kbone 框架…

去年的深度横评中很多老将已经退出江湖，一些新秀吸引眼球，因此，是时候来一波2020版的新横评了。

评测目标筛选

跨端框架是一个重投入工作，在各框架的1年多的比拼中，很多框架因为投入不足而逐渐被开发者放弃，uni-app和taro依靠持续的大力度投入，成为了市场主流。

taro 在稳定版的基础之上，最近也推出了 taro next，这2个版本差异较大，本次会分别评测。

kbone 框架虽面世不久，但毕竟是微信官方发布，关注的人不少，故本次将 kbone 加入评测目标。

所以，本次评测的对象（按发布时间排序）：

本次评测除了运行性能等实测数据外，尽可能得通过框架官网及github、掘金、腾讯课堂等三方社区公开采集数据，希望给大家一个综合全面的评估依据。

功能实现

taro 和 uni-app 是比较典型的多端框架，发布到各个端均可。而 kbone 只支持微信小程序和H5。

taro 和 uni-app 均将常用接口及组件封装了成了跨端API和跨端组件，组件规范沿用微信小程序的规范，部分平台特有API，这两个框架亦有应对方案：

  • taro：支持与小程序代码混写，可通过混写的方式调用框架尚未封装的小程序新增API
  • uni-app：支持条件编译，可在条件编译代码块中，随意调用各个平台新增的API及组件

taro 和 uni-app 可以不受限的调用各家小程序平台所有的API及组件。

kbone 沿用web的开发习惯，使用html标签及js api；涉及微信特有api时，可通过process.env.isMiniprogram判断环境，然后编写微信原生代码。对于html中没有标签可替代的微信内置组件（如swiper），需要使用 wx-component 标签或者使用 wx- 前缀，这样的内置组件会被包裹一层自定义组件，带来相应的性能开销。

除了接口、组件之外，我们以微信小程序为例，找几个典型能力对比框架支持度：

框架 taro uni-app kbone
微信自定义组件 ⭕️ ⭕️ ⭕️
三方插件 ⭕️ ⭕️ ❌
分包加载 ⭕️ ⭕️ ⭕️
sitemap ⭕️ ⭕️ ⭕️
wxs ❌ ⭕️ ❌
云开发 ⭕️ ⭕️ ⭕️

运行性能

长列表加载

测试结果如下：

长列表加载测试结果

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

点赞组件响应速度

测试结果数据说明：

  • taro next/kbone 测试数据不完整的原因同上，在组件较多时，页面已经不再渲染了
  • taro 2.0版本、uni-app和微信原生在点赞组件上的性能体验接近，但taro next和kbone有较大的性能差距，这个也是因为动态运行时框架导致的。

组件数据更新性能测评：uni-app ~ taro 2.0 > taro next > kbone

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

微信原生开发(手动优化) ~ uni-app > 微信原生开发(未手动优化) ~ taro 2.0 > taro next > kbone

跨端支持

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

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

小程序平台

taro 和 uni-app 均支持微信、支付宝、百度、字节跳动小程序，功能基本可以拉齐。

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

App平台

能力方面

taro与微信小程序引擎拉齐度较低，很多功能需要开发者分别在iOS和Android上做原生开发才能实现。比如App端很常见的三方登录、支付、分享等能力，taro并未封装。

uni-app则在基础引擎层面提供了丰富的能力，还提供了丰富的插件市场，可切实提升开发者的效率。

性能方面

taro在App端使用了react native的渲染引擎，虽然渲染层ui是原生的，但在实时交互和高响应要求的UI操作方面表现一直不佳，js层和视图层的通信损耗让很多开发者深感无力。

uni-app的App引擎同时给开发者提供了原生渲染引擎和小程序引擎的双选方案，并且由于发明了renderjs技术，以及支持wxs、bindingx等技术，解决了js层和视图层的通信损耗问题，在高响应要求的UI操作方面有更好的性能表现。

开发体验方面

taro的开发者需自行搭建iOS/Android开发环境，比较繁琐，（官方原文地址）：

uni-app可以做到让前端开发者不依赖原生工程师独立完成App。其开发的小程序，可以更平滑的变成可商用的App。

使用跨平台开发的核心诉求在于提升效率，如果一个App的开发由前端、iOS、Android等3拨工程师协作完成，其实效率反而非常低。

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

H5平台

taro的H5平台在一年来的进步较多，可用性大幅提升。但相比于uni-app，目前仍然缺失对wxs和小程序组件的支持。

快应用

taro支持快应用的时间比uni-app早。

但快应用发展到2020年有了一些变化，uni-app针对新的形势，提供了2个发行到快应用的方案（当前两个版本都处于社区维护状态）：

  • quickapp-vue版：使用 Vue开发快应用。此方案由小米主导，但华为快应用暂不支持。
  • quickapp-light版：基于小程序架构的快应用（Light版），详见https://www.hellohub.cn。此方案由华为主导，但小米快应用暂不支持。

跨端灵活性

跨端开发，离不开条件编译。因为不能用统一来抹杀各个平台的特色。

优良的条件编译能力对各端开发的灵活度至关重要，可以让开发者在共享和个性化之间游刃有余。

taro 、uni-app和 kbone 均支持在js代码通过process.env判断平台，然后编写平台特有代码。

taro额外支持统一接口的多端文件编码方式，以及在样式文件中使用ifdef条件编译。

uni-app是全面可条件编译的，目录、文件、配置、组件、js、css，所有一切均可通过ifdef条件编译。

跨端支持小结结论：uni-app > taro > kbone


Harmonyos Next教程
1 回复

针对“uni-app跨端开发框架深度横评之2020版”的帖子，作为IT专家，我将通过代码案例来展示uni-app在跨端开发中的一些核心特性和优势，而不直接提供建议。以下是一个简单的uni-app项目示例，展示如何创建一个跨平台的“Hello World”应用。

1. 环境准备

首先，确保你已经安装了HBuilderX，这是DCloud官方推荐的uni-app开发工具。

2. 创建项目

打开HBuilderX，选择“文件”->“新建”->“项目”，选择“uni-app”模板，输入项目名称和路径，完成项目创建。

3. 编写代码

pages/index/index.vue

<template>
  <view class="content">
    <text class="title">{{message}}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  }
}
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  color: #000;
}
</style>

这段代码定义了一个简单的页面，其中包含一个居中的文本“Hello, uni-app!”。

manifest.json

在manifest.json中，你可以配置应用的基本信息，如应用名称、版本、图标等。这里简要展示如何配置应用名称：

{
  "mp-weixin": { // 微信小程序配置
    "appid": "__UNI__XXXXXXX", // 请替换为你的微信小程序AppID
    "setting": {
      "urlCheck": false
    }
  },
  "app-plus": { // App平台配置
    "name": "uniAppDemo"
  },
  // ... 其他平台配置
}

4. 运行项目

在HBuilderX中，你可以直接点击工具栏上的“运行”按钮，选择目标平台（如微信小程序、H5、App等），即可预览和调试你的应用。

5. 跨端优势体现

通过上述代码，你可以看到uni-app使用Vue.js的语法，通过一套代码即可编译到多个平台。这种跨端能力大大减少了开发成本和维护复杂度。此外，uni-app还提供了丰富的组件库和API，支持条件编译等特性，使得开发者能够针对不同平台做定制化开发。

结论

uni-app作为一款成熟的跨端开发框架，以其简洁的语法、强大的跨平台能力和丰富的生态支持，成为了众多开发者的首选。通过上述代码示例，希望你能对uni-app的跨端开发能力有更直观的认识。

回到顶部