使用 Taro 开发鸿蒙原生应用 —— 探秘适配鸿蒙 ArkTS 的工作原理

原创

于 2023-12-21 10:17:17 发布 · 4.1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#taro #harmonyos #华为

本文详细阐述了Taro框架如何适应华为鸿蒙的ArkTS框架，采用运行时适配策略，模拟浏览器环境，让React和Vue在鸿蒙上运行，通过虚拟DOM与原生组件桥接，讨论了适配过程、设计思路和使用限制，以及未来的开发计划。

背景

在上一篇文章中，我们已经了解到华为即将发布的鸿蒙操作系统纯血版本——鸿蒙 Next，以及各个互联网厂商开展鸿蒙应用开发的消息。其中，Taro作为一个重要的前端开发框架，也积极适配鸿蒙的新一代语言框架 —— ArkTS。

本文将深入探讨 Taro 适配鸿蒙 ArkTS 框架的工作原理，接下来我们先一同看看适配的整体思路。

整体思路

在适配 ArkTS 的整体思路上面，和适配小程序类似的，我们优先采用了偏运行时的适配方案，在运行时将 Taro 虚拟 DOM 树映射到对应的 ArkTS UI 组件。

选择偏运行时方案的原因

1. 前端框架 React/Vue 的 DSL 范式和 ArkTS 的 UI 范式差异较大

以 React 为例，我们在 React 和 ArkTS 两边都简单渲染一个Button组件，并给这个组件赋予一些简单的样式属性：

React VS ArkTS

可以看到单纯是一个简单的Button组件例子，两边的代码结构其实就已经有较大的差异，更不用说在实际的项目中，我们还需要考虑到各种各样的循环体和表达式，如果将这些代码放在编译时去进行解析和转换，难免会出现各种各样的错误和遗漏，并且也无法保证转换后代码的可读性。

其实这也是Taro 1/2 升级到 Taro 3 的一个缩影，偏运行时的适配方案，一方面可以带来更好的用户开发体验，不去限制开发者的语法规范。另一方面能兼容更多的 Web 生态，支持绝大多数已有的开源工具和依赖的运行。

2. 偏运行时的适配方案可以继承部分小程序运行时和编译时逻辑

另外一个选择偏运行时的适配方案的原因是，目前 Taro 适配小程序所走的就是偏运行时的路线，因此适配鸿蒙 ArkTS 如果也选择偏运行时的方案，在前置的一些编译时环节和运行时环节两者是非常相似的，甚至鸿蒙 ArkTS 的适配可以复用部分小程序的逻辑。

复用模块图

这种复用会带来两个明显的好处：

减少了适配鸿蒙 ArkTS 的工作量，可以更早地将 Taro 适配鸿蒙 ArkTS 这个功能上线，给开发者体验和使用。
后续针对小程序的一些性能优化或者功能补齐，可以同步地或者以最小的代价同步到鸿蒙端，反之亦然。

偏运行时方案的设计思路

偏运行时的思路一句话概括，那就是：模拟实现浏览器环境，让 React、Vue、Web 生态库在鸿蒙环境下直接运行

原理图

1. 在鸿蒙环境下模拟一套浏览器的 BOM 和 DOM

需要支持使用 React、Vue 等前端框架来开发鸿蒙应用，首先我们需要模拟一套浏览器的 BOM 和 DOM， BOM 是指一些 windows、history、document 等浏览器自带的全局对象，DOM 则是指浏览器提供的一些文档节点对象模型，比如 div、img、button 等。

我们需要模拟一套能在鸿蒙环境下可以运行的 BOM 和 DOM，来给到前端框架层去使用，使的这些依赖浏览器环境的 Taro 代码可以跑在鸿蒙 app 上。

class TaroElement extends TaroNode {
  public _attrs: Record<string, string> = {}
  private _innerHTML: string = ''
  public readonly tagName: string

  constructor (tagName: string) {
    super()
    this.tagName = tagName
  }

  public set id (value: string) {}

  publ