Taro 是由京東發起并維護的開放式跨端跨框架解決方案，支持以 Web 的開發范式來實現小程序、H5、原生 APP 的跨端統一開發，從 18 年開源至今，在 GitHub 已累計獲得 36,000+ Stars。

Taro x 純血鴻蒙

在過去的一年中，Taro 經歷了顯著的蛻變，Taro on Harmony 方案完成從 ArkTS 方案到 C-API 方案的升級，成功實現了對純血鴻蒙的完全適配，擴展了 Taro 的兼容平臺家族，實現了對 H5、小程序、RN、原生鴻蒙多端的統一開發。

去年 9 月，京東 APP 純血鴻蒙 在鴻蒙應用商城正式上線，APP 中核心購物鏈路，如首頁、搜索、商詳、購物車、訂單、結算和我京等頁面，都是通過 Taro on Harmony C-API 版本進行開發，并且一上線就獲得了華為的 S 級應用認證。

今天，我們正式開源 Taro on Harmony C-API 版本，這次版本的發布，將帶來更豐富的樣式適配、更高效的渲染性能、更全面的組件支持，讓開發者以 Web 范式的方式來開發出媲美原生鴻蒙性能的應用，為鴻蒙應用生態的豐富注入強大的動力。

對于開發者來說，Taro on Harmony 技術方案為開發者提供了顯著優勢：顯著降低鴻蒙應用開發門檻，讓開發者能夠運用熟悉的 Web 技術棧快速構建純血鴻蒙應用。同時，基于鴻蒙 CAPI 構建的高性能渲染管線，在保證開發高效率的同時實現了與原生應用媲美的性能表現。更重要的是，開發者可以充分復用現有研發生態，將存量 Taro 項目快速適配遷移至鴻蒙平臺，大幅加速業務在鴻蒙生態的布局與上架進程。

整體技術架構

Taro on Harmony 技術方案支持開發者使用 React DSL 來開發純血鴻蒙應用，整體架構可以簡單分為三層：

最上層是應用業務代碼所在的 ArkVM 層，這一層在 C-API 版本中主要運行業務代碼、React 的核心代碼以及少量的 Taro 運行時代碼。

中間層是 Taro 的 CSSOM 和 TaroElement 樹，負責處理上層 Taro 運行時代碼傳遞下來的指令，比如 TaroElement 節點樹創建，綁定關系以及設置屬性等操作。

最下層存放的是 TaroRenderNode 虛擬節點樹，這棵節點樹和真正的上屏節點樹是一一對應的關系，同時在 TaroRenderNode 節點樹內會創建對應的 Yoga 節點。

同時 Taro 還基于鴻蒙提供的 VSync 機制設置一套任務處理管線，來處理中間層和下層節點樹產生的樣式匹配、節點測量、節點布局、樣式設置以及節點上屏等任務，來保證任務的時序性和最后上屏渲染結果的正確性。

重點特性

豐富的能力支持

常用組件和 API 支持

在 C-API 版本的 Taro on Harmony 中，我們不僅完整支持了 React 18+，另外支持了 View、Text、Image、Video 等近 33 個 Taro 組件，對于常用的 API，如 getSystemInfo、getStorage 等也是在 C-API 版本中得到了完整的支持，而且針對邏輯較為復雜的 API 如：createSelectorQuery 以及 createIntersectionObserver，我們將這些 API 在 C++ 側進行了重新的實現，大幅提升了他們的執行性能。

常用樣式支持

在 C-API 版本中，我們對支持了大部分常見的 CSS 能力：

支持常見的 CSS 樣式和布局，支持 flex、偽類和偽元素

支持常見的 CSS 定位，絕對定位、fixed 定位

支持常見的 CSS 選擇器和媒體查詢

支持常見的 CSS 單位，比如 vh、vw 以及計算屬性 calc

支持 CSS 變量以及安全區域等預定義變量

同時，我們參考瀏覽器 CSSOM 的實現方式，在 C++ 實現了一套 CSSOM 邏輯，里面包含了樣式解析、樣式匹配、樣式合成和應用整個鏈路的樣式處理邏輯。

另外，Taro 引入了 Yoga 布局引擎來計算渲染節點的位置和大小，最大程度保證 Taro 構建出來的鴻蒙應用中渲染樣式和 W3C 規范的一致性。

媲美原生 ArkTS 的高性能

運行時邏輯下沉至 C++

在 C-API 的版本中，我們將 ArkVM 層的 Taro 運行時內容削減到極致的薄，將 TaroElement 的大部分內容都下沉到了 C++ 側，并在 ArkVM 層取消了他們之間父子關系的綁定，極大地提升了 TaroElement 相關邏輯的性能。

另一方面，在 C++ 側 Taro 會指令式地調用 ArkUI 在 C++ 側提供的 API，來高效地創建節點、設置屬性、綁定事件以及繪制上屏。

提供長列表組件應對長列表場景

Taro 還針對長列表場景針對性地提供了長列表類型組件，并對長列表類型組件進行了優化，提供了懶加載、預加載和節點復用等功能，有效地解決大數據量下的性能問題，提高應用的流暢度和用戶體驗。

支持 C-API 混合原生的渲染模式

Taro 的組件和 API 是以小程序作為基準來進行設計的，因此在實際的鴻蒙應用開發過程中，會出現部分所需的組件和 API 在 Taro 中不存在的情況，因為針對這種情況，在 C-API 版本中，Taro 提供了原生混合開發的能力，支持將原生頁面或者原生組件混合編譯到 Taro 鴻蒙項目中，支持 Taro 組件和鴻蒙原生組件在頁面上的混合使用。

使用教程

項目開源地址

Taro 本地開源地址：https://github.com/NervJS/taro

Taro 鴻蒙 C-API 開源地址：https://github.com/NervJS/taro-harmony-capi-library

安裝和使用

安裝 harmony 插件

# 使用 npm 安裝
$ npm i @tarojs/plugin-platform-harmony-cpp
# 使用 pnpm 安裝
$ pnpm i @tarojs/plugin-platform-harmony-cpp

添加插件配置

import os from 'os'
import path from 'path'

const config = {
  // ...
  plugins: ['@tarojs/plugin-platform-harmony-cpp'],
  harmony: {
    // 當前僅支持使用 Vite 編譯鴻蒙應用
    compiler: 'vite',
    // Note: 鴻蒙工程路徑，可以參考 [鴻蒙應用創建導讀](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2) 創建
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Taro 項目編譯到對應鴻蒙模塊名，默認為 entry
    hapName: 'entry',
  },
  // ...
}

編譯項目

# 編譯鴻蒙應用
$ taro build --type harmony_cpp
# 編譯鴻蒙原生組件
$ taro build native-components --type harmony_cpp

如果需要編譯鴻蒙應用，同時使用編譯鴻蒙原生組件，可以在頁面配置中添加 entryOption: false 表示該頁面是組件，同時可以用過 componentName 指定組件導出名。

export default {
  navigationBarTitleText: 'Hello World',
+  componentName: 'MyComponent',
+  entryOption: false,
}

總結與展望

Taro on Harmony C-API 版本經歷了京東鴻蒙 APP 的實踐，綜合性能、生態以及開發體驗來講，毫無疑問已經成為了開發鴻蒙應用的最佳框架選型之一。

當下，我們也仍然在不斷完善著鴻蒙的適配方案，基于當前的 Taro on Harmony C-API 方案，我們會進行多線程的架構升級以及 React 的 C++ 化，進一步提升 Taro 在鴻蒙端側的性能，并極大地降低應用的丟幀率，整體進展也已經處于驗證和測試階段。

也歡迎大家一起參與 Taro on Harmony 的共建，你們的每一個建議，每一次提交，都是推進 Taro 繼續往前走最大的動力。


審核編輯 黃宇