2025 年 6 月，在華為開發(fā)者大會(huì) 2025 開發(fā)者場(chǎng)景技術(shù)共建分論壇，本文作者進(jìn)行了《京東 Taro 框架鴻蒙版本正式開源 助力鴻蒙版三方應(yīng)用開發(fā)》專題演講。期間闡述了 Taro on HarmonyOS 的技術(shù)實(shí)現(xiàn)方案、核心優(yōu)化策略，以及開源版本的主要特性。

本文將詳細(xì)介紹 Taro on HarmonyOS 的技術(shù)架構(gòu)、性能優(yōu)化實(shí)踐和開源進(jìn)展，分享我們?cè)诳缍碎_發(fā)中遇到的問(wèn)題和解決思路。

期待更多人可以參與開源共建，一起交流討論！

背景

回顧 Taro 的發(fā)展歷程，從 2018 年 6 月開源至今，作為開放式的跨端跨框架解決方案在眾多熱心開源貢獻(xiàn)者的支持下，從初出茅廬逐步邁向成熟。

從最初僅支持面向編譯時(shí)的小程序端解決方案，到如今擁有支持多種前端框架和 UI 庫(kù)的強(qiáng)大能力；從單一的構(gòu)建工具，到通過(guò)開放生態(tài)為開發(fā)者提供 Webpack、Vite、ESBuild 等豐富的工具選擇，讓團(tuán)隊(duì)能夠定制專屬的研發(fā)流程；從專注小程序開發(fā)，到覆蓋各大小程序平臺(tái)以及 Web、iOS、Android、HarmonyOS 等移動(dòng)端場(chǎng)景——Taro 的每一步成長(zhǎng)都離不開社區(qū)的力量。

這些年來(lái)，我們?cè)?GitHub 上收獲了 36,000+ star 和近 5,000 fork，更重要的是得到了眾多企業(yè)團(tuán)隊(duì)和個(gè)人開發(fā)者貢獻(xiàn)的寶貴功能特性。在此，我們要向所有支持 Taro 發(fā)展的朋友們表示衷心的感謝！

技術(shù)架構(gòu)演進(jìn)

說(shuō)到 HarmonyOS，Taro 從 2022 年開始布局鴻蒙適配，走過(guò)了一條持續(xù)演進(jìn)的技術(shù)路徑。最初我們推出了 JSUI 版本的端平臺(tái)插件，為鴻蒙支持打下基礎(chǔ)；2023 年開源了 ETS 版本的端平臺(tái)插件，大幅提升了開發(fā)體驗(yàn)和業(yè)務(wù)性能；而在最近釋出的 4.1 版本中，C-API 版本的 Harmony 端平臺(tái)插件也正式發(fā)布了，這標(biāo)志著 Taro 鴻蒙支持能力的重要突破。

目前，我們?nèi)栽诔掷m(xù)優(yōu)化 Harmony C-API 插件的性能表現(xiàn)。團(tuán)隊(duì)正在推進(jìn)多線程以及更多版本特性的內(nèi)部驗(yàn)證，期待在驗(yàn)證完成后能夠?qū)⑵溟_源，為開發(fā)者在鴻蒙端帶來(lái)更優(yōu)秀的研發(fā)體驗(yàn)。

面向多端研發(fā)

面向多端的復(fù)雜場(chǎng)景，從來(lái)都不是一件容易的事情。在傳統(tǒng)的多端開發(fā)中，開發(fā)者往往需要面對(duì)各端語(yǔ)法標(biāo)準(zhǔn)不統(tǒng)一、組件和 API 接口各異、開發(fā)環(huán)境復(fù)雜多樣等諸多挑戰(zhàn)。當(dāng)業(yè)務(wù)邏輯需要調(diào)整時(shí)，開發(fā)者必須在多個(gè)平臺(tái)上重復(fù)實(shí)現(xiàn)相同功能，代碼復(fù)用率極低，維護(hù)工作量成倍增長(zhǎng)。

如圖所示，Taro 現(xiàn)已成功在 HarmonyOS 平臺(tái)上實(shí)現(xiàn)了與 Web 端、小程序及其他平臺(tái)一致的 UI 呈現(xiàn)效果。

基于 Taro 跨端研發(fā)標(biāo)準(zhǔn)推進(jìn)業(yè)務(wù)實(shí)現(xiàn)，開發(fā)者只需編寫一套代碼，就能夠在多個(gè)平臺(tái)上獲得統(tǒng)一的用戶體驗(yàn)，最大限度地節(jié)省多端業(yè)務(wù)的研發(fā)成本，讓團(tuán)隊(duì)能夠?qū)⒏嗑ν度氲綐I(yè)務(wù)創(chuàng)新上。

京東鴻蒙版

以京東鴻蒙版本為例，基于 Taro on HarmonyOS 解決方案，成功在研發(fā)效率與應(yīng)用性能之間達(dá)成了理想平衡，其性能表現(xiàn)和穩(wěn)定性均位居行業(yè)前列。

對(duì)于商品詳情頁(yè)等高復(fù)雜度、高數(shù)據(jù)量的核心業(yè)務(wù)場(chǎng)景，該方案展現(xiàn)出強(qiáng)大的技術(shù)適配能力。僅是在單線程 C-API 架構(gòu)的支持下，這些重載業(yè)務(wù)場(chǎng)景的運(yùn)行性能已達(dá)到與原生應(yīng)用相當(dāng)?shù)乃疁?zhǔn)，充分驗(yàn)證了跨端技術(shù)在復(fù)雜場(chǎng)景下的可行性。

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

為了達(dá)成這一目標(biāo)，我們需要在技術(shù)架構(gòu)層面進(jìn)行深度優(yōu)化。

Taro 在各平臺(tái)的適配邏輯保持高度一致性。開發(fā)者通過(guò)統(tǒng)一的 DSL以及標(biāo)準(zhǔn)化的組件和 API 庫(kù)即可完成全部代碼開發(fā)，樣式規(guī)范完全遵循 W3C 標(biāo)準(zhǔn)，使前端開發(fā)者能夠以極低的學(xué)習(xí)成本快速上手。

在編譯層面，Taro 通過(guò) CLI 工具和插件系統(tǒng)實(shí)現(xiàn)各端的差異化處理。各個(gè)端平臺(tái)插件可以在編譯核心中選擇基于 Webpack、Vite 或 Metro 為基礎(chǔ)的編譯流程，將開發(fā)者的源代碼高效轉(zhuǎn)換為各目標(biāo)平臺(tái)的可執(zhí)行代碼。

在運(yùn)行時(shí)中，通過(guò)集成語(yǔ)法適配器、DOM、BOM 模擬實(shí)現(xiàn)以及其他核心模塊，確保開發(fā)者項(xiàng)目能夠在 HarmonyOS 等各類平臺(tái)上穩(wěn)定運(yùn)行，真正實(shí)現(xiàn)一碼多端的開發(fā)愿景。

渲染層適配

盡管 Taro 在 HarmonyOS 平臺(tái)的插件架構(gòu)歷經(jīng)多輪重大版本升級(jí)，但其核心架構(gòu)設(shè)計(jì)依舊可從以下幾個(gè)維度來(lái)理解：

代碼轉(zhuǎn)換流程：從開發(fā)者編寫的 React 代碼出發(fā)，通過(guò)與 React Reconciler 的深度集成，系統(tǒng)構(gòu)建出完整的虛擬節(jié)點(diǎn)樹。隨后，運(yùn)行時(shí)環(huán)境通過(guò)模擬的 DOM 和 BOM API，實(shí)現(xiàn) React 節(jié)點(diǎn)樹與 Taro 內(nèi)部節(jié)點(diǎn)樹的精確映射。

平臺(tái)適配實(shí)現(xiàn)：結(jié)合標(biāo)準(zhǔn)化的組件庫(kù)和 API 庫(kù)，系統(tǒng)將抽象的節(jié)點(diǎn)結(jié)構(gòu)轉(zhuǎn)換為 HarmonyOS 平臺(tái)的原生原子組件，最終構(gòu)建出完整的 ArkUI 渲染樹，并呈現(xiàn)在用戶界面上。

擴(kuò)展能力支持：除了核心渲染流程外，運(yùn)行時(shí)還集成了布局計(jì)算、事件處理、動(dòng)畫效果等關(guān)鍵模塊，并持續(xù)接入更多 HarmonyOS 平臺(tái)特有能力，為開發(fā)者提供完整的跨平臺(tái)開發(fā)體驗(yàn)。

架構(gòu)方案迭代

在技術(shù)架構(gòu)層面，ETS 方案與 C-API 方案本質(zhì)上都遵循著相同的設(shè)計(jì)理念。兩者均構(gòu)建了一套完整的三層節(jié)點(diǎn)樹體系：應(yīng)用層的 React 節(jié)點(diǎn)樹首先轉(zhuǎn)換為中間層的 Taro 節(jié)點(diǎn)樹，隨后進(jìn)一步映射到底層的 ArkUI 節(jié)點(diǎn)樹，最終實(shí)現(xiàn)界面的完整渲染。

然而，盡管在宏觀架構(gòu)上兩種方案展現(xiàn)出高度的相似性，我們?nèi)匀粓?jiān)定地推進(jìn)從 ETS 向 C-API 的技術(shù)轉(zhuǎn)型。這一決策的背后，是團(tuán)隊(duì)對(duì)性能極致追求的不懈努力。在移動(dòng)應(yīng)用開發(fā)的激烈競(jìng)爭(zhēng)中，每一毫秒的性能提升都可能成為用戶體驗(yàn)的關(guān)鍵差異點(diǎn)，而 C-API 方案正是在這樣的背景下應(yīng)運(yùn)而生的技術(shù)選擇。

C-API 方案帶來(lái)的性能提升是全方位的。在節(jié)點(diǎn)操作層面，我們徹底摒棄了傳統(tǒng)的聲明式遞歸構(gòu)建模式，轉(zhuǎn)而采用更加靈活的實(shí)現(xiàn)方式，這為底層節(jié)點(diǎn) API 的深度優(yōu)化創(chuàng)造了前所未有的空間。同時(shí)，通過(guò)引入指令式節(jié)點(diǎn)操作機(jī)制，不同節(jié)點(diǎn)樹之間的數(shù)據(jù)交互效率得到了顯著改善，原本復(fù)雜的跨樹通信變得更加高效流暢。

更為重要的是，我們將樣式處理、布局計(jì)算、事件管理等核心功能模塊全面下沉至 C++ 原生層。這一架構(gòu)調(diào)整不僅大幅減少了跨語(yǔ)言調(diào)用的頻次和開銷，更從根本上提升了系統(tǒng)的執(zhí)行效率。通過(guò)這些多維度的優(yōu)化措施，整個(gè)應(yīng)用的性能表現(xiàn)實(shí)現(xiàn)了質(zhì)的飛躍。

跨端研發(fā)標(biāo)準(zhǔn)

在適配鴻蒙和其他各端能力的基礎(chǔ)上，Taro 正在構(gòu)建一套完整的跨端研發(fā)標(biāo)準(zhǔn)體系。這套標(biāo)準(zhǔn)不僅能夠最大限度地節(jié)約不同端之間的適配成本，更重要的是能夠充分兼容現(xiàn)有的前端生態(tài)系統(tǒng)，讓團(tuán)隊(duì)多年積累的組件庫(kù)、工具鏈和技術(shù)沉淀得以無(wú)縫復(fù)用。

目前，以 React 作為 UI 基礎(chǔ)庫(kù)，該標(biāo)準(zhǔn)已涵蓋了 View、Text 等 26 個(gè)常用組件和網(wǎng)絡(luò)請(qǐng)求、圖片等 88 個(gè)常用 API。在樣式規(guī)范方面，我們遵循 W3C 標(biāo)準(zhǔn)實(shí)現(xiàn)了包含 93 條常用規(guī)范的樣式子集。與此同時(shí)，我們正在持續(xù)努力擴(kuò)充這套標(biāo)準(zhǔn)體系，不斷增加新的組件類型、API 接口和樣式規(guī)范，以滿足日益復(fù)雜的業(yè)務(wù)場(chǎng)景需求。

更為關(guān)鍵的是，這套不斷完善的標(biāo)準(zhǔn)體系具備良好的擴(kuò)展性和兼容性，能夠與團(tuán)隊(duì)現(xiàn)有的 UI 組件庫(kù)、業(yè)務(wù)組件以及各類前端工具庫(kù)形成有機(jī)整合。我們致力于通過(guò)標(biāo)準(zhǔn)的持續(xù)演進(jìn)，確保開發(fā)團(tuán)隊(duì)能夠在跨端開發(fā)中充分發(fā)揮既有技術(shù)資產(chǎn)的價(jià)值，避免重復(fù)建設(shè)帶來(lái)的資源浪費(fèi)，同時(shí)為未來(lái)更多端側(cè)適配需求預(yù)留充足的擴(kuò)展空間。

為實(shí)現(xiàn)跨平臺(tái)開發(fā)的一致性標(biāo)準(zhǔn)，我們?cè)O(shè)計(jì)了 C++ 底層樣式處理架構(gòu)。該架構(gòu)整合了包括 Yoga 這類成熟布局引擎，構(gòu)建統(tǒng)一的布局計(jì)算體系，保障各端樣式渲染的視覺一致性。通過(guò)將樣式計(jì)算邏輯完全遷移至 C-API 底層，系統(tǒng)獲得了顯著的性能優(yōu)化潛力——不僅消除了對(duì)主渲染線程和業(yè)務(wù)邏輯的性能干擾，還通過(guò) C++ 的高效執(zhí)行特性實(shí)現(xiàn)了跨端樣式處理的統(tǒng)一化管理，從根本上提升了整體渲染效率。

針對(duì)鴻蒙端的特殊需求，我們?cè)诰幾g階段引入了創(chuàng)新的預(yù)處理機(jī)制。通過(guò)在編譯流程中的 Rust 插件集成 lightingCSS，我們能夠?qū)?biāo)準(zhǔn)樣式預(yù)先轉(zhuǎn)換為鴻蒙平臺(tái)可以識(shí)別的樣式，進(jìn)一步節(jié)省運(yùn)行時(shí)運(yùn)算的負(fù)擔(dān)。這一機(jī)制不僅實(shí)現(xiàn)了 W3C 標(biāo)準(zhǔn)屬性到各端專用單位和屬性值的智能轉(zhuǎn)換，更為跨端樣式的統(tǒng)一管理奠定了堅(jiān)實(shí)的底層基礎(chǔ)。

基于這套完善的 C++ 樣式處理體系，UI 庫(kù)和業(yè)務(wù)團(tuán)隊(duì)能夠輕松應(yīng)對(duì)各種復(fù)雜場(chǎng)景的適配需求。無(wú)論是折疊屏的多形態(tài)展示、關(guān)懷模式的無(wú)障礙優(yōu)化，還是暗黑模式的主題切換，都可以通過(guò)靈活的樣式選擇器機(jī)制實(shí)現(xiàn)精準(zhǔn)控制。同時(shí)，動(dòng)畫效果和過(guò)渡轉(zhuǎn)場(chǎng)也能夠通過(guò)高效的樣式更新和節(jié)點(diǎn)刷新機(jī)制，呈現(xiàn)出極為流暢的用戶體驗(yàn)。

方案特性

基于此架構(gòu)，Taro on HarmonyOS 方案積累了豐富的核心特性。

研發(fā)效能層面：通過(guò)兼容 React 生態(tài)體系和 W3C 樣式規(guī)范，開發(fā)者能夠充分利用前端成熟的工具鏈和生態(tài)資源，高效完成業(yè)務(wù)功能迭代與開發(fā)調(diào)試工作，完善鴻蒙端的開發(fā)體驗(yàn)。同時(shí)，開發(fā)者編寫的樣式代碼可在鴻蒙、小程序和 Web 端無(wú)縫復(fù)用，實(shí)現(xiàn)真正的"一次編寫，多端運(yùn)行"。

生態(tài)擴(kuò)展層面：提供靈活的組件和 API 擴(kuò)展機(jī)制，支持業(yè)務(wù)團(tuán)隊(duì)根據(jù)實(shí)際需求定制運(yùn)行時(shí)環(huán)境。更重要的是，通過(guò)跨端統(tǒng)一的原生混合調(diào)用方案，Taro C++ 模塊與 ArkTS 原生模塊可實(shí)現(xiàn)雙向互調(diào)，為團(tuán)隊(duì)間協(xié)作提供了更多可能性，有效避免重復(fù)開發(fā)，提升整體研發(fā)效率。

性能體驗(yàn)

在 C-API 方案中，我們圍繞卓越性能體驗(yàn)實(shí)現(xiàn)了多項(xiàng)核心特性：

運(yùn)行時(shí)性能優(yōu)化

將 DOM Tree、事件處理、樣式計(jì)算等高頻操作模塊完全下沉至 C++ 層，顯著提升運(yùn)行時(shí)執(zhí)行效率。通過(guò)底層優(yōu)化，減少了 JavaScript 與原生層之間的頻繁通信開銷，避免了數(shù)據(jù)序列化/反序列化的性能損耗。同時(shí)，C++ 層的內(nèi)存管理更加高效，能夠更好地控制對(duì)象生命周期，減少內(nèi)存碎片，為復(fù)雜應(yīng)用場(chǎng)景提供更穩(wěn)定的性能表現(xiàn)。

高階組件能力

基于 HarmonyOS 原生的 List、WaterFlow 等組件特性，深度定制實(shí)現(xiàn)虛擬列表、瀑布流等高性能組件，充分發(fā)揮系統(tǒng)級(jí)優(yōu)勢(shì)。

這些高階組件不僅繼承了系統(tǒng)組件的原生性能，還針對(duì)前端開發(fā)習(xí)慣進(jìn)行了接口封裝，支持動(dòng)態(tài)數(shù)據(jù)加載、智能緩存策略、滾動(dòng)性能優(yōu)化等特性。開發(fā)者可以像使用傳統(tǒng)前端組件一樣輕松實(shí)現(xiàn)大數(shù)據(jù)量的列表展示，無(wú)需關(guān)心底層的復(fù)雜優(yōu)化邏輯。

圖片處理模塊

構(gòu)建專門服務(wù)于樣式渲染、背景繪制、Image 組件的圖片處理系統(tǒng)，實(shí)現(xiàn)更優(yōu)秀的圖片加載性能和內(nèi)存管理。該模塊集成了多級(jí)緩存機(jī)制，支持內(nèi)存緩存、磁盤緩存和網(wǎng)絡(luò)緩存的智能調(diào)度，大幅減少重復(fù)加載時(shí)間。

同時(shí)提供了圖片壓縮、格式轉(zhuǎn)換、尺寸適配等功能，能夠根據(jù)設(shè)備性能和網(wǎng)絡(luò)狀況自動(dòng)選擇最優(yōu)的圖片處理策略，有效降低內(nèi)存占用和網(wǎng)絡(luò)帶寬消耗。

文字與繪圖支持

通過(guò) PixelMap 技術(shù)為文字組件提供豐富的字體屬性和渲染能力，同時(shí)為 Canvas 組件及相關(guān) API 提供底層支持，覆蓋分享海報(bào)生成等復(fù)雜業(yè)務(wù)繪制場(chǎng)景。文字渲染支持多種字體格式、文字效果（陰影、描邊、漸變等）和排版布局，滿足不同設(shè)計(jì)需求。

Canvas 繪圖能力則支持路徑繪制、圖形變換、濾鏡效果等高級(jí)功能，為數(shù)據(jù)可視化、游戲開發(fā)、創(chuàng)意設(shè)計(jì)等場(chǎng)景提供強(qiáng)大的圖形處理能力。

視頻播放能力

基于 AVPlayer 重構(gòu) Video 組件和相關(guān) API 實(shí)現(xiàn)，在 C-API 層直接接入，減少調(diào)用鏈路，為業(yè)務(wù)提供更靈活的視頻適配方案。新的視頻播放架構(gòu)支持多種視頻格式和編碼標(biāo)準(zhǔn)，提供了精確的播放控制、實(shí)時(shí)進(jìn)度反饋、音視頻同步等核心功能。

總結(jié)展望

Taro 在 HarmonyOS 平臺(tái)的深度適配，旨在為全場(chǎng)景應(yīng)用開發(fā)開辟新的技術(shù)路徑。通過(guò)構(gòu)建完善的鴻蒙端能力體系，我們致力于為更廣泛的業(yè)務(wù)場(chǎng)景提供技術(shù)支撐，推動(dòng)跨平臺(tái)開發(fā)在鴻蒙生態(tài)中的創(chuàng)新應(yīng)用。

在實(shí)際應(yīng)用中，Taro 成功支撐了京東鴻蒙 APP 的商業(yè)化落地。該應(yīng)用的首頁(yè)、搜索推薦以及核心購(gòu)物流程等關(guān)鍵業(yè)務(wù)模塊均基于 Taro 技術(shù)棧開發(fā)，在確保快速迭代交付的同時(shí)，實(shí)現(xiàn)了業(yè)界領(lǐng)先的性能表現(xiàn)和系統(tǒng)穩(wěn)定性。應(yīng)用上線后迅速在華為應(yīng)用市場(chǎng)購(gòu)物類別中登頂，充分驗(yàn)證了技術(shù)方案的商業(yè)價(jià)值。

生態(tài)建設(shè)與合作拓展

基于成功實(shí)踐的示范效應(yīng)，更多京東生態(tài)應(yīng)用正在加速鴻蒙化進(jìn)程，包括一號(hào)會(huì)員店、七鮮等重要業(yè)務(wù)線的鴻蒙版本已上架鴻蒙應(yīng)用市場(chǎng)或者進(jìn)入開發(fā)階段。同時(shí)，我們的技術(shù)方案也獲得了外部合作伙伴的認(rèn)可，58同城、樸樸超市等知名企業(yè)均選擇采用 Taro 相關(guān)的鴻蒙開發(fā)解決方案，共同構(gòu)建更加繁榮的鴻蒙應(yīng)用生態(tài)。

未來(lái)展望

我們將持續(xù)深化開源戰(zhàn)略，在內(nèi)部版本充分驗(yàn)證后，逐步向社區(qū)開放多線程等更多核心技術(shù)特性。同時(shí)不斷擴(kuò)展跨端標(biāo)準(zhǔn)覆蓋范圍，讓更多組件和 API 實(shí)現(xiàn)跨平臺(tái)一致性，為開發(fā)者提供更優(yōu)質(zhì)的開發(fā)體驗(yàn)和更完善的調(diào)試工具鏈，也為動(dòng)態(tài)化能力構(gòu)建更堅(jiān)實(shí)的技術(shù)基礎(chǔ)。

在性能優(yōu)化方面，我們將持續(xù)推進(jìn)更多核心模塊向 C++ 層遷移，包括 React 的 C++ 版本實(shí)現(xiàn)和高頻 API 運(yùn)行時(shí)模塊優(yōu)化，同時(shí)積極借鑒節(jié)點(diǎn)樹扁平化等社區(qū)驗(yàn)證的優(yōu)秀實(shí)踐。

雖然 Taro on HarmonyOS 的 C-API 版本插件開源時(shí)間不長(zhǎng)，但已經(jīng)吸引了眾多開發(fā)者的積極參與。我們期待更多技術(shù)同仁能夠加入這個(gè)充滿活力的開源生態(tài)，共同推動(dòng) Taro on HarmonyOS 方案的不斷完善，在開源共建的道路上續(xù)寫跨端開發(fā)的新篇章。

審核編輯 黃宇