使用 Taro 开发鸿蒙原生应用 —— 当 Taro 遇到纯血鸿蒙

大家好，我是若川。我持续组织了近一年的源码共读活动，感兴趣的可以 点此扫码加我微信 lxchuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外：目前建有江西|湖南|湖北|河南籍前端群，可加我微信进群。公众号回复【相亲】关键词可以获取男生、女生的菜单~欢迎大家投稿"相亲"小栏目，或者原创文章。

纯血鸿蒙即将到来

在今年 8 月的「2023年华为开发者大会（HDC.Together）」上，华为正式官宣「鸿蒙Next」，这个更新的版本将移除所有的 AOSP 代码，彻底与 Android 切割，使其成为一个完全自主研发的操作系统，这将去掉 40%左右多余的代码，使系统变得更加简洁、流畅。同时，会上也预告了将在明年 1 月份发布面向所有开发者的预览版，意味着还有一个多月纯血的鸿蒙就要与所有开发者见面了，这不禁令人热血沸腾，分外期待。

图一·鸿蒙 Next 计划

而近期关于鸿蒙的消息不断，各大互联网厂商，如阿里、美团、去哪儿、小红书等等，都已经官宣开展了开发 ArkUI 版原生鸿蒙应用的消息，同时也都在各个招聘渠道公开高薪招聘鸿蒙工程师和专家，仿佛偌大的鸿蒙生态即将全面铺开，这对于对鸿蒙适配呈观望态度的开发者来说无疑是巨大的强心剂，鸿蒙应用开发，似乎真的行了。

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

鸿蒙 ArkUI 是怎么个事儿

好了，吹了一波鸿蒙的彩虹屁，让我们来看看，鸿蒙应用开发是个怎么个事儿。

从鸿蒙官网我们可以了解到，鸿蒙应用开发使用方舟框架，即 ArkUI 框架，它支持两种方式，一种是使用 ArkTS，也就是声明式的开发范式，另一种是使用 JS，即类 Web 的开发范式，让我们来看看这两种开发范式的区别。

• 声明式开发范式：采用基于 TypeScript 声明式UI语法扩展而来的 ArkTS 语言，从组件、动画和状态管理三个维度提供 UI 绘制能力。
• 类Web开发范式：采用经典的 HML、CSS、JavaScript 三段式开发方式，即使用 HML 标签文件搭建布局、使用 CSS 文件描述样式、使用 JavaScript 文件处理逻辑。该范式更符合于 Web 前端开发者的使用习惯，便于快速将已有的 Web 应用改造成方舟开发框架应用。

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

可以看出，显然，Web式的开发范式较贴近Web前端开发者的习惯，不过，它更适用于开发简单的卡片应用，Taro框架已经提供了对这种开发范式的支持，可以查看 Taro && 鸿蒙、OpenHarmony 开发文档[1]，然而，对于大型应用的开发，声明式开发范式可能更为合适。

你会在下文的语法介绍中发现，声明式开发范式类似于 Flutter 和 Compose 的开发方式，它对 Web前端开发者来说可能需要一定的学习成本。但鉴于其适用于构建更高复杂度的应用，并且理论上的性能优于Web 式开发范式，鸿蒙将主要推广这种开发范式。

因此，对于我们这些有志于前端开发的青年来说，更应该关注鸿蒙的ArkTS——即声明式开发范式。

图四·ArkTS 架构

从声明式范式的架构图中可以看出，该架构主要采用了前后端分离的形式。在这个体系中，前端主要负责处理语法基础规范和 UI 组件等内容，这部分主要体现在 DSL 层。另一方面，后端则使用 C++ 进行开发，主要负责支持前端的语法范式、组件以及渲染管线。

此外，语言运行时则使用了华为自研的方舟编译器，支持 JS、ArkTS 和 C++ 的混写。值得注意的是，方舟编译器具备 AOT（Ahead-Of-Time，即预编译）处理能力，这使得它能够将应用代码转化为统一的字节码，然后再通过 AOT 转化为机器码，从而提升应用的性能。

在架构的下一层，系统会对接基于 Skia 的自绘渲染引擎。在这个过程中，终端的所有渲染需求都会统一提交给渲染引擎，从而使得渲染效果得到提升，这种设计理念不仅使系统在处理渲染任务时更加高效，同时也保证了渲染结果的高质量。

前面提到，声明式范式与类 Web 的开发范式大有不同，我们可以从下面这段代码感受一下。

图五· ArkTS 基础语法

熟悉 Flutter 和 Compose 的朋友们可以发现，声明式范式的 ArkTS 在 UI 描述上的写法与他们非常相似，而这段 ArkTS 代码也体现出与 Web 前端熟悉的 JS/TS 语言的不同，如定义自定义组件的 struct 关键字等等，在官方的解释中，ArkTS 是基于 TS 进行扩展的超集，所以这不就是最熟悉的陌生人么，这不禁让我们前端觉得”我又行了“。

Taro 与 ArkTS 的联动

由于声明式范式与类 Web 范式天然的不同，对 Web 前端来说学习成本还是有的，而且，相应的研发生态也得从零开始建设，之前我们沉淀的大量 Web 生态肯定是没法直接使用了，这对于前端转型 ArkTS 开发来说还是存在挑战的，那么有没有办法可以使用 Web 的开发范式，来开发 ArkTS 应用呢？这似乎就进入了 Taro 最熟悉的领域了，以 Web 的开发范式来统一各端开发。

图六·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 树，然后再递归映射为自定义组件树，接着再走鸿蒙渲染。

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

目前，基于上述思路，Taro React 适配鸿蒙 ArkTS 的工作已经进入收尾阶段，预计将在 12 月下旬发布可用版本，想要了解进展的朋友可以查看 鸿蒙开发和调试 ArkUI 步骤[2]，根据相应分支来 follow 我们的进展，有条件的朋友也可以自行尝试调试。

图八·使用 Taro 开发的应用 DEMO 编译后的代码

总结与展望

是不是有种突然结束，戛然而止的感觉？哈哈哈，本文是 「Taro 适配鸿蒙 ArkTS」系列文章的第一篇，算是先导预告片，在后续我们会陆续释出其他文章，例如详解 Taro 适配鸿蒙 ArkTS 原理、Taro 开发 ArkTS 应用最佳实践、Taro 性能优化利器-半编译技术介绍等等，向社区介绍 Taro 的最新成果。

鸿蒙 ArkUI 的整体设计笔者觉得是超前的，声明式范式、自绘渲染等等，吸收了近几年业界移动端技术的优点，如果开发调试、研发生态等配套设施能够跟上业界领先的移动端开发解决方案，还是大有可为的，期待鸿蒙 Next 为国产操作系统书写新的篇章。