## 纯血鸿蒙即将到来在今年 8 月的「2023年华为开发者大会（HDC.Together）」上，华为正式官宣「鸿蒙Next」，这个更新的版本将移除所有的 AOSP 代码，彻底与 Android 切割，使其成为一个完全自主研发的操作系统，这将去掉 40%左右多余的代码，使系统变得更加简洁、流畅。同时，会上也预告了将在明年 1 月份发布面向所有开发者的预览版，意味着还有一个多月纯血的鸿蒙就要与所有开发者见面了，这不禁令人热血沸腾，分外期待。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cfec868e5eb46138bfe655b10faec62~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1080\&h=345\&s=72236\&e=png\&b=000000)

图一·鸿蒙 Next 计划

而近期关于鸿蒙的消息不断，各大互联网厂商，如阿里、美团、去哪儿、小红书等等，都已经官宣开展了开发 ArkUI 版原生鸿蒙应用的消息，同时也都在各个招聘渠道公开高薪招聘鸿蒙工程师和专家，仿佛偌大的鸿蒙生态即将全面铺开，这对于对鸿蒙适配呈观望态度的开发者来说无疑是巨大的强心剂，鸿蒙应用开发，似乎真的行了。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c496ff00e9ce413fa0bdbe4d4072b871~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1346\&h=540\&s=648756\&e=png\&a=1\&b=cddaea)

图二·业界多家互联网公司渲染开发鸿蒙原生应用

## 鸿蒙 ArkUI 是怎么个事儿好了，吹了一波鸿蒙的彩虹屁，让我们来看看，鸿蒙应用开发是个怎么个事儿。从鸿蒙官网我们可以了解到，鸿蒙应用开发使用方舟框架，即 ArkUI 框架，它支持两种方式，一种是使用 ArkTS，也就是声明式的开发范式，另一种是使用 JS，即类 Web 的开发范式，让我们来看看这两种开发范式的区别。 * 声明式开发范式：采用基于 TypeScript 声明式UI语法扩展而来的 ArkTS 语言，从组件、动画和状态管理三个维度提供 UI 绘制能力。 * 类Web开发范式：采用经典的 HML、CSS、JavaScript 三段式开发方式，即使用 HML 标签文件搭建布局、使用 CSS 文件描述样式、使用 JavaScript 文件处理逻辑。该范式更符合于 Web 前端开发者的使用习惯，便于快速将已有的 Web 应用改造成方舟开发框架应用。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e0db2ad8c874f9d88925b066fbc1172~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1578\&h=468\&s=94009\&e=png\&b=fefefe)

图三·ArkUI 两种开发范式区别

可以看出，显然，Web式的开发范式较贴近Web前端开发者的习惯，不过，它更适用于开发简单的卡片应用，Taro框架已经提供了对这种开发范式的支持，可以查看 [Taro && 鸿蒙、OpenHarmony 开发文档](https://docs.taro.zone/docs/harmony/ "Taro && 鸿蒙、OpenHarmony 开发文档")，然而，对于大型应用的开发，声明式开发范式可能更为合适。你会在下文的语法介绍中发现，声明式开发范式类似于 Flutter 和 Compose 的开发方式，它对 Web前端开发者来说可能需要一定的学习成本。但鉴于其适用于构建更高复杂度的应用，并且理论上的性能优于Web 式开发范式，鸿蒙将主要推广这种开发范式。因此，对于我们这些有志于前端开发的青年来说，更应该关注鸿蒙的ArkTS——即声明式开发范式。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71aec736cbc04e16afd66794346d640a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=565\&h=604\&s=85889\&e=png\&b=fbf9f9)

图四·ArkTS 架构

从声明式范式的架构图中可以看出，该架构主要采用了前后端分离的形式。在这个体系中，前端主要负责处理语法基础规范和 UI 组件等内容，这部分主要体现在 DSL 层。另一方面，后端则使用 C++ 进行开发，主要负责支持前端的语法范式、组件以及渲染管线。此外，语言运行时则使用了华为自研的方舟编译器，支持 JS、ArkTS 和 C++ 的混写。值得注意的是，方舟编译器具备 AOT（Ahead-Of-Time，即预编译）处理能力，这使得它能够将应用代码转化为统一的字节码，然后再通过 AOT 转化为机器码，从而提升应用的性能。在架构的下一层，系统会对接基于 Skia 的自绘渲染引擎。在这个过程中，终端的所有渲染需求都会统一提交给渲染引擎，从而使得渲染效果得到提升，这种设计理念不仅使系统在处理渲染任务时更加高效，同时也保证了渲染结果的高质量。前面提到，声明式范式与类 Web 的开发范式大有不同，我们可以从下面这段代码感受一下。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c6ec82ae6b34b558212c40be50290e4~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1724\&h=1594\&s=519013\&e=png\&b=ffffff)

图五· ArkTS 基础语法

熟悉 Flutter 和 Compose 的朋友们可以发现，声明式范式的 ArkTS 在 UI 描述上的写法与他们非常相似，而这段 ArkTS 代码也体现出与 Web 前端熟悉的 JS/TS 语言的不同，如定义自定义组件的 `struct` 关键字等等，在官方的解释中，ArkTS 是基于 TS 进行扩展的超集，所以这不就是最熟悉的陌生人么，这不禁让我们前端觉得”我又行了“。 ## Taro 与 ArkTS 的联动由于声明式范式与类 Web 范式天然的不同，对 Web 前端来说学习成本还是有的，而且，相应的研发生态也得从零开始建设，之前我们沉淀的大量 Web 生态肯定是没法直接使用了，这对于前端转型 ArkTS 开发来说还是存在挑战的，那么有没有办法可以使用 Web 的开发范式，来开发 ArkTS 应用呢？这似乎就进入了 Taro 最熟悉的领域了，以 Web 的开发范式来统一各端开发。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b357755c62484e44867f8d6bd2e685fa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1906\&h=928\&s=157663\&e=png\&b=ffffff)

图六·Taro 支持的平台

前文提到，当前 Taro 已经支持了ArkUI 类 Web 的开发范式，这为我们沉淀了很多的经验，当然，ArkTS 是一种全新的语法，为了实现对它的适配，我还是有不少的工作需要去做。经过对 ArkTS 语法的分析，其 UI 描述结构让人联想到 Flutter 三棵树中的 Widget Tree，那么我们首先想到的解决方案就是，将 React/Vue 运行时产生的虚拟 DOM，以某种形式递归映射为 ArkTS 的自定义组件树。基于 Taro 3.0 中适配小程序的经验，我们想到可以在 ArkTS 环境中模拟 DOM/BOM API，将虚拟 DOM 基于 DOM/BOM API 构建为 Taro DOM 树，然后再递归映射为自定义组件树，接着再走鸿蒙渲染。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bff6b728b24c4f8faf7606fc32dfe392~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3042\&h=1272\&s=531712\&e=png\&a=1\&b=fdf4f4)

图七·Taro 适配小程序/鸿蒙原理

在今年 8 月的「2023年华为开发者大会（HDC.Together）」上，Taro 团队受邀分享了 Taro 适配鸿蒙 ArkUI 的技术方案，整体技术路线是受到认可的，同时在后续的适配过程中也得到了来自华为的技术支持，让我们的适配工作得以顺利进行。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/84b124d31af142a68f909e73a9f7f3de~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1000\&h=534\&s=268807\&e=png\&b=000002)

图八·Taro 在 HDC 上技术分享

目前，基于上述思路，Taro React 适配鸿蒙 ArkTS 的工作已经进入收尾阶段，预计将在 12 月下旬发布可用版本，想要了解进展的朋友可以查看 [鸿蒙开发和调试 ArkUI 步骤](https://github.com/NervJS/taro/discussions/14766 "鸿蒙开发和调试 ArkUI 步骤")，根据相应分支来 follow 我们的进展，有条件的朋友也可以自行尝试调试。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5fd82e192c2e442490ac8a448783599a~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=3516\&h=2224\&s=1842496\&e=png\&a=1\&b=222222) 图九·使用 Taro 开发的应用 DEMO 编译后的代码 ## 总结与展望是不是有种突然结束，戛然而止的感觉？哈哈哈，本文是「Taro 适配鸿蒙 ArkTS」系列文章的第一篇，算是先导预告片，在后续我们会陆续释出其他文章，例如详解 Taro 适配鸿蒙 ArkTS 原理、Taro 开发 ArkTS 应用最佳实践、Taro 性能优化利器-半编译技术介绍等等，向社区介绍 Taro 的最新成果。鸿蒙 ArkUI 的整体设计笔者觉得是超前的，声明式范式、自绘渲染等等，吸收了近几年业界移动端技术的优点，如果开发调试、研发生态等配套设施能够跟上业界领先的移动端开发解决方案，还是大有可为的，期待鸿蒙 Next 为国产操作系统书写新的篇章。