0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

Taro on HarmonyOS 技术架构深度解析

京东云 ? 来源:jf_75140285 ? 作者:jf_75140285 ? 2025-08-04 16:10 ? 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

2025 年 6 月,在华为开发者大会 2025 开发者场景技术共建分论坛,本文作者进行了《京东 Taro 框架鸿蒙版本正式开源 助力鸿蒙版三方应用开发》专题演讲。期间阐述了 Taro on HarmonyOS 的技术实现方案、核心优化策略,以及开源版本的主要特性。

本文将详细介绍 Taro on HarmonyOS 的技术架构、性能优化实践和开源进展,分享我们在跨端开发中遇到的问题和解决思路。

期待更多人可以参与开源共建,一起交流讨论!

背景

回顾 Taro 的发展历程,从 2018 年 6 月开源至今,作为开放式的跨端跨框架解决方案在众多热心开源贡献者的支持下,从初出茅庐逐步迈向成熟。

wKgZO2iQatSAJmodAAc1uPQQGvY652.png

从最初仅支持面向编译时的小程序端解决方案,到如今拥有支持多种前端框架和 UI 库的强大能力;从单一的构建工具,到通过开放生态为开发者提供 Webpack、Vite、ESBuild 等丰富的工具选择,让团队能够定制专属的研发流程;从专注小程序开发,到覆盖各大小程序平台以及 Web、iOSAndroid、HarmonyOS 等移动端场景——Taro 的每一步成长都离不开社区的力量。

这些年来,我们在 GitHub 上收获了 36,000+ star近 5,000 fork,更重要的是得到了众多企业团队和个人开发者贡献的宝贵功能特性。在此,我们要向所有支持 Taro 发展的朋友们表示衷心的感谢!

技术架构演进

说到 HarmonyOS,Taro 从 2022 年开始布局鸿蒙适配,走过了一条持续演进的技术路径。最初我们推出了 JSUI 版本的端平台插件,为鸿蒙支持打下基础;2023 年开源了 ETS 版本的端平台插件,大幅提升了开发体验和业务性能;而在最近释出的 4.1 版本中,C-API 版本的 Harmony 端平台插件也正式发布了,这标志着 Taro 鸿蒙支持能力的重要突破。

wKgZPGiQatSAK6kCAAJ49aSFDi4008.png

目前,我们仍在持续优化 Harmony C-API 插件的性能表现。团队正在推进多线程以及更多版本特性的内部验证,期待在验证完成后能够将其开源,为开发者在鸿蒙端带来更优秀的研发体验。

面向多端研发

面向多端的复杂场景,从来都不是一件容易的事情。在传统的多端开发中,开发者往往需要面对各端语法标准不统一、组件和 API 接口各异、开发环境复杂多样等诸多挑战。当业务逻辑需要调整时,开发者必须在多个平台上重复实现相同功能,代码复用率极低,维护工作量成倍增长。

wKgZO2iQatSAP6VxAAnd_8nqciI032.png

如图所示,Taro 现已成功在 HarmonyOS 平台上实现了与 Web 端、小程序及其他平台一致的 UI 呈现效果。

基于 Taro 跨端研发标准推进业务实现,开发者只需编写一套代码,就能够在多个平台上获得统一的用户体验,最大限度地节省多端业务的研发成本,让团队能够将更多精力投入到业务创新上。

京东鸿蒙版

wKgZPGiQataAAjCdAPNfWbqJXvs857.gif

以京东鸿蒙版本为例,基于 Taro on HarmonyOS 解决方案,成功在研发效率与应用性能之间达成了理想平衡,其性能表现和稳定性均位居行业前列。

wKgZO2iQatqAKDOmAAJa7k5lfo8392.png

对于商品详情页等高复杂度、高数据量的核心业务场景,该方案展现出强大的技术适配能力。仅是在单线程 C-API 架构的支持下,这些重载业务场景的运行性能已达到与原生应用相当的水准,充分验证了跨端技术在复杂场景下的可行性。

技术架构

为了达成这一目标,我们需要在技术架构层面进行深度优化。

Taro 在各平台的适配逻辑保持高度一致性。开发者通过统一的 DSL以及标准化的组件和 API 库即可完成全部代码开发,样式规范完全遵循 W3C 标准,使前端开发者能够以极低的学习成本快速上手。

wKgZPGiQatqAJ-zeAALi8zesJ84031.png

在编译层面,Taro 通过 CLI 工具和插件系统实现各端的差异化处理。各个端平台插件可以在编译核心中选择基于 Webpack、Vite 或 Metro 为基础的编译流程,将开发者的源代码高效转换为各目标平台的可执行代码。

在运行时中,通过集成语法适配器、DOM、BOM 模拟实现以及其他核心模块,确保开发者项目能够在 HarmonyOS 等各类平台上稳定运行,真正实现一码多端的开发愿景。

渲染层适配

尽管 Taro 在 HarmonyOS 平台的插件架构历经多轮重大版本升级,但其核心架构设计依旧可从以下几个维度来理解:

wKgZO2iQatuACPTHAAT06ygQUzk066.png

代码转换流程:从开发者编写的 React 代码出发,通过与 React Reconciler 的深度集成,系统构建出完整的虚拟节点树。随后,运行时环境通过模拟的 DOM 和 BOM API,实现 React 节点树与 Taro 内部节点树的精确映射。

平台适配实现:结合标准化的组件库和 API 库,系统将抽象的节点结构转换为 HarmonyOS 平台的原生原子组件,最终构建出完整的 ArkUI 渲染树,并呈现在用户界面上。

扩展能力支持:除了核心渲染流程外,运行时还集成了布局计算、事件处理、动画效果等关键模块,并持续接入更多 HarmonyOS 平台特有能力,为开发者提供完整的跨平台开发体验。

架构方案迭代

在技术架构层面,ETS 方案与 C-API 方案本质上都遵循着相同的设计理念。两者均构建了一套完整的三层节点树体系:应用层的 React 节点树首先转换为中间层的 Taro 节点树,随后进一步映射到底层的 ArkUI 节点树,最终实现界面的完整渲染。

然而,尽管在宏观架构上两种方案展现出高度的相似性,我们仍然坚定地推进从 ETS 向 C-API 的技术转型。这一决策的背后,是团队对性能极致追求的不懈努力。在移动应用开发的激烈竞争中,每一毫秒的性能提升都可能成为用户体验的关键差异点,而 C-API 方案正是在这样的背景下应运而生的技术选择。

wKgZPGiQatuAPyKjAALgsbhYQqc191.png

C-API 方案带来的性能提升是全方位的。在节点操作层面,我们彻底摒弃了传统的声明式递归构建模式,转而采用更加灵活的实现方式,这为底层节点 API 的深度优化创造了前所未有的空间。同时,通过引入指令式节点操作机制,不同节点树之间的数据交互效率得到了显著改善,原本复杂的跨树通信变得更加高效流畅。

更为重要的是,我们将样式处理、布局计算、事件管理等核心功能模块全面下沉至 C++ 原生层。这一架构调整不仅大幅减少了跨语言调用的频次和开销,更从根本上提升了系统的执行效率。通过这些多维度的优化措施,整个应用的性能表现实现了质的飞跃。

跨端研发标准

在适配鸿蒙和其他各端能力的基础上,Taro 正在构建一套完整的跨端研发标准体系。这套标准不仅能够最大限度地节约不同端之间的适配成本,更重要的是能够充分兼容现有的前端生态系统,让团队多年积累的组件库、工具链和技术沉淀得以无缝复用。

wKgZO2iQatyAGm3gAAP_5hgyjQQ776.png

目前,以 React 作为 UI 基础库,该标准已涵盖了 View、Text 等 26 个常用组件和网络请求、图片等 88 个常用 API。在样式规范方面,我们遵循 W3C 标准实现了包含 93 条常用规范的样式子集。与此同时,我们正在持续努力扩充这套标准体系,不断增加新的组件类型、API 接口和样式规范,以满足日益复杂的业务场景需求。

更为关键的是,这套不断完善的标准体系具备良好的扩展性和兼容性,能够与团队现有的 UI 组件库、业务组件以及各类前端工具库形成有机整合。我们致力于通过标准的持续演进,确保开发团队能够在跨端开发中充分发挥既有技术资产的价值,避免重复建设带来的资源浪费,同时为未来更多端侧适配需求预留充足的扩展空间。

wKgZPGiQatyAOHqhAAcHvyTD9UU968.png

为实现跨平台开发的一致性标准,我们设计了 C++ 底层样式处理架构。该架构整合了包括 Yoga 这类成熟布局引擎,构建统一的布局计算体系,保障各端样式渲染的视觉一致性。通过将样式计算逻辑完全迁移至 C-API 底层,系统获得了显著的性能优化潜力——不仅消除了对主渲染线程和业务逻辑的性能干扰,还通过 C++ 的高效执行特性实现了跨端样式处理的统一化管理,从根本上提升了整体渲染效率。

针对鸿蒙端的特殊需求,我们在编译阶段引入了创新的预处理机制。通过在编译流程中的 Rust 插件集成 lightingCSS,我们能够将标准样式预先转换为鸿蒙平台可以识别的样式,进一步节省运行时运算的负担。这一机制不仅实现了 W3C 标准属性到各端专用单位和属性值的智能转换,更为跨端样式的统一管理奠定了坚实的底层基础。

基于这套完善的 C++ 样式处理体系,UI 库和业务团队能够轻松应对各种复杂场景的适配需求。无论是折叠屏的多形态展示、关怀模式的无障碍优化,还是暗黑模式的主题切换,都可以通过灵活的样式选择器机制实现精准控制。同时,动画效果和过渡转场也能够通过高效的样式更新和节点刷新机制,呈现出极为流畅的用户体验。

方案特性

基于此架构,Taro on HarmonyOS 方案积累了丰富的核心特性。

研发效能层面:通过兼容 React 生态体系和 W3C 样式规范,开发者能够充分利用前端成熟的工具链和生态资源,高效完成业务功能迭代与开发调试工作,完善鸿蒙端的开发体验。同时,开发者编写的样式代码可在鸿蒙、小程序和 Web 端无缝复用,实现真正的"一次编写,多端运行"。

生态扩展层面:提供灵活的组件和 API 扩展机制,支持业务团队根据实际需求定制运行时环境。更重要的是,通过跨端统一的原生混合调用方案,Taro C++ 模块与 ArkTS 原生模块可实现双向互调,为团队间协作提供了更多可能性,有效避免重复开发,提升整体研发效率。

wKgZO2iQatyAHs7IAAdQGWMDCXM743.png

性能体验

在 C-API 方案中,我们围绕卓越性能体验实现了多项核心特性:

运行时性能优化

将 DOM Tree、事件处理、样式计算等高频操作模块完全下沉至 C++ 层,显著提升运行时执行效率。通过底层优化,减少了 JavaScript 与原生层之间的频繁通信开销,避免了数据序列化/反序列化的性能损耗。同时,C++ 层的内存管理更加高效,能够更好地控制对象生命周期,减少内存碎片,为复杂应用场景提供更稳定的性能表现。

高阶组件能力

wKgZPGiQat2AIBF_AADnGig-w30086.png

基于 HarmonyOS 原生的 List、WaterFlow 等组件特性,深度定制实现虚拟列表、瀑布流等高性能组件,充分发挥系统级优势。

这些高阶组件不仅继承了系统组件的原生性能,还针对前端开发习惯进行了接口封装,支持动态数据加载、智能缓存策略、滚动性能优化等特性。开发者可以像使用传统前端组件一样轻松实现大数据量的列表展示,无需关心底层的复杂优化逻辑。

图片处理模块

构建专门服务于样式渲染、背景绘制、Image 组件的图片处理系统,实现更优秀的图片加载性能和内存管理。该模块集成了多级缓存机制,支持内存缓存、磁盘缓存和网络缓存的智能调度,大幅减少重复加载时间。

wKgZO2iQat2Aagb4AHKowlrHsRI411.gif

同时提供了图片压缩、格式转换、尺寸适配等功能,能够根据设备性能和网络状况自动选择最优的图片处理策略,有效降低内存占用和网络带宽消耗。

文字与绘图支持

通过 PixelMap 技术为文字组件提供丰富的字体属性和渲染能力,同时为 Canvas 组件及相关 API 提供底层支持,覆盖分享海报生成等复杂业务绘制场景。文字渲染支持多种字体格式、文字效果(阴影、描边、渐变等)和排版布局,满足不同设计需求。

wKgZO2iQauCARCQ-AAnf6MSReu8809.png

Canvas 绘图能力则支持路径绘制、图形变换、滤镜效果等高级功能,为数据可视化、游戏开发、创意设计等场景提供强大的图形处理能力。

视频播放能力

基于 AVPlayer 重构 Video 组件和相关 API 实现,在 C-API 层直接接入,减少调用链路,为业务提供更灵活的视频适配方案。新的视频播放架构支持多种视频格式和编码标准,提供了精确的播放控制、实时进度反馈、音视频同步等核心功能。

wKgZPGiQauCAFDZxAAWW71-IWzc055.png

总结展望

Taro 在 HarmonyOS 平台的深度适配,旨在为全场景应用开发开辟新的技术路径。通过构建完善的鸿蒙端能力体系,我们致力于为更广泛的业务场景提供技术支撑,推动跨平台开发在鸿蒙生态中的创新应用。

wKgZO2iQauCANzxPAFNn_m0cWzs709.png

在实际应用中,Taro 成功支撑了京东鸿蒙 APP 的商业化落地。该应用的首页、搜索推荐以及核心购物流程等关键业务模块均基于 Taro 技术栈开发,在确保快速迭代交付的同时,实现了业界领先的性能表现和系统稳定性。应用上线后迅速在华为应用市场购物类别中登顶,充分验证了技术方案的商业价值。

生态建设与合作拓展

基于成功实践的示范效应,更多京东生态应用正在加速鸿蒙化进程,包括一号会员店、七鲜等重要业务线的鸿蒙版本已上架鸿蒙应用市场或者进入开发阶段。同时,我们的技术方案也获得了外部合作伙伴的认可,58同城、朴朴超市等知名企业均选择采用 Taro 相关的鸿蒙开发解决方案,共同构建更加繁荣的鸿蒙应用生态。

未来展望

我们将持续深化开源战略,在内部版本充分验证后,逐步向社区开放多线程等更多核心技术特性。同时不断扩展跨端标准覆盖范围,让更多组件和 API 实现跨平台一致性,为开发者提供更优质的开发体验和更完善的调试工具链,也为动态化能力构建更坚实的技术基础。

wKgZPGiQauKAE8slAANMqgzyjWQ006.png

在性能优化方面,我们将持续推进更多核心模块向 C++ 层迁移,包括 React 的 C++ 版本实现和高频 API 运行时模块优化,同时积极借鉴节点树扁平化等社区验证的优秀实践。

wKgZO2iQauKAPO8eAAIcvsPEH60135.png

虽然 Taro on HarmonyOS 的 C-API 版本插件开源时间不长,但已经吸引了众多开发者的积极参与。我们期待更多技术同仁能够加入这个充满活力的开源生态,共同推动 Taro on HarmonyOS 方案的不断完善,在开源共建的道路上续写跨端开发的新篇章。

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HarmonyOS
    +关注

    关注

    80

    文章

    2130

    浏览量

    33427
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    聚徽深度解析国内工控平板电脑的工业级抗干扰技术如何实现?

    在工业自动化与智能制造领域,工控平板电脑作为核心人机交互终端,其抗干扰能力直接决定了生产系统的稳定性与可靠性。国内厂商通过技术创新与场景适配,构建了从硬件设计到软件优化的全链路抗干扰体系。本文将从技术原理、硬件架构、软件策略及场
    的头像 发表于 07-11 18:11 ?306次阅读

    京东开源Taro on HarmonyOS C-API版本

    近日,京东正式开源了Taro on HarmonyOS C-API 版本,为鸿蒙应用跨端开发提供高性能框架。这次版本的发布,带来了更丰富的样式适配、更高效的渲染性能、更全面的组件支持,让开发者以Web范式的方式来开发出媲美鸿蒙性能的应用,为鸿蒙应用生态的丰富注入强大的动力
    的头像 发表于 06-09 09:19 ?643次阅读
    京东开源<b class='flag-5'>Taro</b> on <b class='flag-5'>HarmonyOS</b> C-API版本

    GPU架构深度解析

    GPU架构深度解析从图形处理到通用计算的进化之路图形处理单元(GPU),作为现代计算机中不可或缺的一部分,已经从最初的图形渲染专用处理器,发展成为强大的并行计算引擎,广泛应用于人工智能、科学计算
    的头像 发表于 05-30 10:36 ?477次阅读
    GPU<b class='flag-5'>架构</b><b class='flag-5'>深度</b><b class='flag-5'>解析</b>

    Nginx核心功能深度解析

    Nginx核心功能深度解析
    的头像 发表于 05-09 10:50 ?326次阅读

    边缘AI MPU深度盘点:品牌、型号与技术特性全解析

    边缘AI MPU深度盘点:品牌、型号与技术特性全解析 随着边缘计算与人工智能的深度融合,边缘AI MPU(微处理器)已成为支撑物联网、智能制造、自动驾驶等场景的核心硬件。本文从品牌、型
    的头像 发表于 04-30 17:27 ?2361次阅读

    解锁未来汽车电子技术:软件定义车辆与区域架构深度解析

    解锁未来汽车电子技术:软件定义车辆与区域架构深度解析 ——立即下载白皮书,抢占智能汽车发展先机 *附件:解锁未来汽车电子技术:软件定义车辆与
    的头像 发表于 04-27 11:58 ?637次阅读

    2025 年 5G 工业路由器深度解析技术架构与行业应用实践

    路由器的核心技术、市场格局及场景化应用,为企业数字化转型提供决策依据。 一、5G 工业路由器的技术演进与核心价值 1.1 基础架构与工作原理 5G 工业路由器通过融合 5G 通信、边缘计算与工业协议转换
    的头像 发表于 04-01 09:19 ?550次阅读
    2025 年 5G 工业路由器<b class='flag-5'>深度</b><b class='flag-5'>解析</b>:<b class='flag-5'>技术</b><b class='flag-5'>架构</b>与行业应用实践

    NVIDIA Blackwell数据手册与NVIDIA Blackwell架构技术解析

    NVIDIA Blackwell数据手册与NVIDIA Blackwell 架构技术解析
    的头像 发表于 03-20 17:19 ?867次阅读

    直流充电测试负载关键技术解析

    FPGA+ARM异构架构,实现100kHz级电流环控制带宽。独创的PWM谐波抑制技术将电流纹波系数控制在0.5%以内,满足GB/T 34657.1-2017标准要求。四象限运行架构支持能量回馈与耗散模式
    发表于 03-05 16:18

    电鸿系统技术架构解析,触觉智能推出多款电鸿适配硬件方案

    电鸿系统技术架构解析,触觉智能推出多款电鸿适配硬件方案
    的头像 发表于 02-26 16:21 ?935次阅读
    电鸿系统<b class='flag-5'>技术</b><b class='flag-5'>架构</b><b class='flag-5'>解析</b>,触觉智能推出多款电鸿适配硬件方案

    玻璃通孔(TGV)技术深度解析

    的性能和可靠性,还推动了整个电子封装行业的创新发展。本文将对TGV技术的基本原理、制造流程、应用优势以及未来发展进行深度解析
    的头像 发表于 02-02 14:52 ?3498次阅读

    Taro 鸿蒙技术内幕系列(三) - 多语言场景下的通用事件系统设计

    作者:京东零售 朱天健 基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术内幕
    的头像 发表于 11-27 11:42 ?639次阅读
    <b class='flag-5'>Taro</b> 鸿蒙<b class='flag-5'>技术</b>内幕系列(三) - 多语言场景下的通用事件系统设计

    鸿蒙Taro实战:01-搭建开发环境

    **4.0.0** 5. Module name: entry 注意,上面当前 Taro 支持的 SDK 版本为 4.0.0 点击 `Finish` 完成项目创建。 ## 安装 Taro 4.x
    发表于 11-06 16:42

    Taro 鸿蒙技术内幕系列(二):如何让 W3C 标准的 CSS跑在鸿蒙上

    作者:京东零售 马银涛 ? 基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术
    的头像 发表于 10-31 10:54 ?575次阅读
    <b class='flag-5'>Taro</b> 鸿蒙<b class='flag-5'>技术</b>内幕系列(二):如何让 W3C 标准的 CSS跑在鸿蒙上

    Taro鸿蒙技术内幕系列(一):如何将React代码跑在ArkUI上

    基于 Taro 打造的京东鸿蒙 APP 已跟随鸿蒙 Next 系统公测,本系列文章将深入解析 Taro 如何实现使用 React 开发高性能鸿蒙应用的技术内幕。
    的头像 发表于 10-25 17:24 ?781次阅读
    <b class='flag-5'>Taro</b>鸿蒙<b class='flag-5'>技术</b>内幕系列(一):如何将React代码跑在ArkUI上