Taro 是由京東發(fā)起并維護(hù)的開(kāi)放式跨端跨框架解決方案，支持以 Web 的開(kāi)發(fā)范式來(lái)實(shí)現(xiàn)小程序、H5、原生 APP 的跨端統(tǒng)一開(kāi)發(fā)，從 18 年開(kāi)源至今，在 GitHub 已累計(jì)獲得 36,000+ Stars。

Taro x 純血鴻蒙

在過(guò)去的一年中，Taro 經(jīng)歷了顯著的蛻變，Taro on Harmony 方案完成從 ArkTS 方案到 C-API 方案的升級(jí)，成功實(shí)現(xiàn)了對(duì)純血鴻蒙的完全適配，擴(kuò)展了 Taro 的兼容平臺(tái)家族，實(shí)現(xiàn)了對(duì) H5、小程序、RN、原生鴻蒙多端的統(tǒng)一開(kāi)發(fā)。

去年 9 月，京東 APP 純血鴻蒙 在鴻蒙應(yīng)用商城正式上線，APP 中核心購(gòu)物鏈路，如首頁(yè)、搜索、商詳、購(gòu)物車、訂單、結(jié)算和我京等頁(yè)面，都是通過(guò) Taro on Harmony C-API 版本進(jìn)行開(kāi)發(fā)，并且一上線就獲得了華為的 S 級(jí)應(yīng)用認(rèn)證。

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

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，Taro on Harmony 技術(shù)方案為開(kāi)發(fā)者提供了顯著優(yōu)勢(shì)：顯著降低鴻蒙應(yīng)用開(kāi)發(fā)門(mén)檻，讓開(kāi)發(fā)者能夠運(yùn)用熟悉的 Web 技術(shù)?？焖贅?gòu)建純血鴻蒙應(yīng)用。同時(shí)，基于鴻蒙 CAPI 構(gòu)建的高性能渲染管線，在保證開(kāi)發(fā)高效率的同時(shí)實(shí)現(xiàn)了與原生應(yīng)用媲美的性能表現(xiàn)。更重要的是，開(kāi)發(fā)者可以充分復(fù)用現(xiàn)有研發(fā)生態(tài)，將存量 Taro 項(xiàng)目快速適配遷移至鴻蒙平臺(tái)，大幅加速業(yè)務(wù)在鴻蒙生態(tài)的布局與上架進(jìn)程。

整體技術(shù)架構(gòu)

Taro on Harmony 技術(shù)方案支持開(kāi)發(fā)者使用 React DSL 來(lái)開(kāi)發(fā)純血鴻蒙應(yīng)用，整體架構(gòu)可以簡(jiǎn)單分為三層：

最上層是應(yīng)用業(yè)務(wù)代碼所在的 ArkVM 層，這一層在 C-API 版本中主要運(yùn)行業(yè)務(wù)代碼、React 的核心代碼以及少量的 Taro 運(yùn)行時(shí)代碼。

中間層是 Taro 的 CSSOM 和 TaroElement 樹(shù)，負(fù)責(zé)處理上層 Taro 運(yùn)行時(shí)代碼傳遞下來(lái)的指令，比如 TaroElement 節(jié)點(diǎn)樹(shù)創(chuàng)建，綁定關(guān)系以及設(shè)置屬性等操作。

最下層存放的是 TaroRenderNode 虛擬節(jié)點(diǎn)樹(shù)，這棵節(jié)點(diǎn)樹(shù)和真正的上屏節(jié)點(diǎn)樹(shù)是一一對(duì)應(yīng)的關(guān)系，同時(shí)在 TaroRenderNode 節(jié)點(diǎn)樹(shù)內(nèi)會(huì)創(chuàng)建對(duì)應(yīng)的 Yoga 節(jié)點(diǎn)。

同時(shí) Taro 還基于鴻蒙提供的 VSync 機(jī)制設(shè)置一套任務(wù)處理管線，來(lái)處理中間層和下層節(jié)點(diǎn)樹(shù)產(chǎn)生的樣式匹配、節(jié)點(diǎn)測(cè)量、節(jié)點(diǎn)布局、樣式設(shè)置以及節(jié)點(diǎn)上屏等任務(wù)，來(lái)保證任務(wù)的時(shí)序性和最后上屏渲染結(jié)果的正確性。

重點(diǎn)特性

豐富的能力支持

常用組件和 API 支持

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

常用樣式支持

在 C-API 版本中，我們對(duì)支持了大部分常見(jiàn)的 CSS 能力：

支持常見(jiàn)的 CSS 樣式和布局，支持 flex、偽類和偽元素

支持常見(jiàn)的 CSS 定位，絕對(duì)定位、fixed 定位

支持常見(jiàn)的 CSS 選擇器和媒體查詢

支持常見(jiàn)的 CSS 單位，比如 vh、vw 以及計(jì)算屬性 calc

支持 CSS 變量以及安全區(qū)域等預(yù)定義變量

同時(shí)，我們參考瀏覽器 CSSOM 的實(shí)現(xiàn)方式，在 C++ 實(shí)現(xiàn)了一套 CSSOM 邏輯，里面包含了樣式解析、樣式匹配、樣式合成和應(yīng)用整個(gè)鏈路的樣式處理邏輯。

另外，Taro 引入了 Yoga 布局引擎來(lái)計(jì)算渲染節(jié)點(diǎn)的位置和大小，最大程度保證 Taro 構(gòu)建出來(lái)的鴻蒙應(yīng)用中渲染樣式和 W3C 規(guī)范的一致性。

媲美原生 ArkTS 的高性能

運(yùn)行時(shí)邏輯下沉至 C++

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

另一方面，在 C++ 側(cè) Taro 會(huì)指令式地調(diào)用 ArkUI 在 C++ 側(cè)提供的 API，來(lái)高效地創(chuàng)建節(jié)點(diǎn)、設(shè)置屬性、綁定事件以及繪制上屏。

提供長(zhǎng)列表組件應(yīng)對(duì)長(zhǎng)列表場(chǎng)景

Taro 還針對(duì)長(zhǎng)列表場(chǎng)景針對(duì)性地提供了長(zhǎng)列表類型組件，并對(duì)長(zhǎng)列表類型組件進(jìn)行了優(yōu)化，提供了懶加載、預(yù)加載和節(jié)點(diǎn)復(fù)用等功能，有效地解決大數(shù)據(jù)量下的性能問(wèn)題，提高應(yīng)用的流暢度和用戶體驗(yàn)。

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

Taro 的組件和 API 是以小程序作為基準(zhǔn)來(lái)進(jìn)行設(shè)計(jì)的，因此在實(shí)際的鴻蒙應(yīng)用開(kāi)發(fā)過(guò)程中，會(huì)出現(xiàn)部分所需的組件和 API 在 Taro 中不存在的情況，因?yàn)獒槍?duì)這種情況，在 C-API 版本中，Taro 提供了原生混合開(kāi)發(fā)的能力，支持將原生頁(yè)面或者原生組件混合編譯到 Taro 鴻蒙項(xiàng)目中，支持 Taro 組件和鴻蒙原生組件在頁(yè)面上的混合使用。

使用教程

項(xiàng)目開(kāi)源地址

Taro 本地開(kāi)源地址：https://github.com/NervJS/taro

Taro 鴻蒙 C-API 開(kāi)源地址：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: {
    // 當(dāng)前僅支持使用 Vite 編譯鴻蒙應(yīng)用
    compiler: 'vite',
    // Note: 鴻蒙工程路徑，可以參考 [鴻蒙應(yīng)用創(chuàng)建導(dǎo)讀](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/start-with-ets-stage-0000001477980905-V2) 創(chuàng)建
    projectPath: path.join(os.homedir(), 'projects/my-business-project'),
    // Taro 項(xiàng)目編譯到對(duì)應(yīng)鴻蒙模塊名，默認(rèn)為 entry
    hapName: 'entry',
  },
  // ...
}

編譯項(xiàng)目

# 編譯鴻蒙應(yīng)用
$ taro build --type harmony_cpp
# 編譯鴻蒙原生組件
$ taro build native-components --type harmony_cpp

如果需要編譯鴻蒙應(yīng)用，同時(shí)使用編譯鴻蒙原生組件，可以在頁(yè)面配置中添加 entryOption: false 表示該頁(yè)面是組件，同時(shí)可以用過(guò) componentName 指定組件導(dǎo)出名。

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

總結(jié)與展望

Taro on Harmony C-API 版本經(jīng)歷了京東鴻蒙 APP 的實(shí)踐，綜合性能、生態(tài)以及開(kāi)發(fā)體驗(yàn)來(lái)講，毫無(wú)疑問(wèn)已經(jīng)成為了開(kāi)發(fā)鴻蒙應(yīng)用的最佳框架選型之一。

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

也歡迎大家一起參與 Taro on Harmony 的共建，你們的每一個(gè)建議，每一次提交，都是推進(jìn) Taro 繼續(xù)往前走最大的動(dòng)力。


審核編輯 黃宇