Taro 5.0：跨端架构演进与业务规模化落地实践

Skip to main content ![Image 93: LogoBestBlogs](https://www.bestblogs.dev/ "BestBlogs.dev")Toggle navigation menu Toggle navigation menuArticles Podcasts Videos Tweets Sources Newsletters

⌘K

Change language Switch ThemeSign In

Narrow Mode

Taro 5.0：跨端架构演进与业务规模化落地实践 =========================

京京东技术 @京东技术

One Sentence Summary

Taro 5.0, through its WebOnNative architecture refactoring, achieves 'one code, five ends' unification across mini-programs, H5, and mobile (including HarmonyOS), demonstrating native-like performance and extremely high R&D efficiency in JD's core businesses.

Summary

This article deeply analyzes the significant architectural evolution of JD's open-source cross-platform framework, Taro 5.0. Its core philosophy is 'WebOnNative,' which thoroughly resolves performance bottlenecks and UI consistency challenges in cross-platform development by sinking React's core logic to the C++ layer (C++ React), customizing high-performance JS engines (QuickJS/JSVM), and utilizing a self-developed C++ style system. Taro 5.0 not only achieves deep support for HarmonyOS native but also builds a complete engineering ecosystem, including AI-assisted code generation, a full-link debugging system, and a dynamic delivery platform. Implementation practices in core JD businesses such as Order Center and Global Sales indicate that this architecture can significantly reduce R&D hours (by approximately 73%) and its performance on HarmonyOS surpasses native versions.

Main Points

* 1. Establish the WebOnNative core architectural concept, achieving framework-container integration.By deeply integrating the runtime and rendering layers via C++, it retains the high efficiency and flexibility of web development while eliminating JS bridge overhead through logic sinking, enabling cross-platform applications to achieve native-like performance. * 2. Rewrite C++ React based on React 18 standards, significantly improving DSL execution efficiency.Fully sinking React's Fiber reconciliation and task scheduling logic to the C++ side results in approximately a 30% improvement in first-screen rendering performance and successfully passes over 140 official unit tests, ensuring standard compatibility and stability. * 3. Self-developed C++ style system and atomic components, overcoming multi-platform UI consistency challenges.Implementing features like cascading and priority based on W3C standards, supporting over 90 CSS properties and multiple layout engines, ensures pixel-perfect visual restoration across Android, iOS, and HarmonyOS. * 4. Building an AI-assisted R&D and dynamic delivery platform, achieving a full-link engineering closed loop.Introducing AI-driven Design-to-Code (D2C) capabilities, coupled with sub-second startup debugging tools and an online build and release platform, supporting businesses in achieving 100% dynamic updates and efficient iteration. * 5. Large-scale implementation in JD's core businesses, validating extremely high business and technical value.In businesses like Order Center, the R&D cycle was reduced from 11 days to 3 days, R&D hours decreased by 73%, and HarmonyOS performance scores ranked first among all JD APP pages, fully demonstrating the superiority of the new architecture.

Metadata

AI Score

Website mp.weixin.qq.com

Published At Today

Length 9356 words (about 38 min)

!Image 94

!Image 95

今年，Taro 迎来了里程碑式的架构升级——Taro 5.0 正式推出，此次升级不仅巩固了原有的跨端优势，更通过架构重构，成功攻克了 Android、iOS、鸿蒙原生三端的适配难题，真正实现了小程序、H5、Android、iOS、鸿蒙原生的“一码五端”统一开发。目前，Taro 5.0 已在订单一码多端、全球售、鸿蒙对齐主站等多个核心业务深水区成功落地，并有力支撑了黄流等复杂场域的跨端动态化目标。 01 技术架构：WebOnNative 的深度实践

Taro 始终坚持 Web 技术路线。在 Taro 5.0 中，为了进一步突破性能瓶颈并追求极致的跨端体验，我们确立了 “WebOnNative” 的核心架构理念。

通过实现 “框架 + 容器”的一体化跨端架构，Taro 5.0 旨在达成一个看似矛盾的目标：既继承 Web 开发的高效与灵活性，又具备媲美原生（Native）应用的运行性能。这一架构升级，最终为业务带来了高开发效率、高运行性能、UI 一致性以及动态更新四大核心价值。

1.1 整体架构设计

从宏观视角来看，Taro 5.0 采用了清晰的三层架构体系，每一层都承担着明确的职责，共同支撑起“一码五端”的宏大愿景。

!Image 96!Image 97!Image 98

在整体架构上，Taro 采用三层架构：

研发生态层（保障体验）：制定统一组件规范并构建强大的多端 DevTools，提供与 Web 开发一致的流畅体验，真正实现“写得顺手，调得轻松”。

运行时层（核心枢纽）：引入 C++ React 将高频业务逻辑下沉至 C++ 侧，在抹平多端差异的同时，构建高效、稳定的跨端运行环境。

渲染层（极致表现）：基于 C++ Taro UI 实现渲染解耦，采用图层化渲染与节点预创建等技术，持续挖掘性能潜力，保障极致的视觉体验。

1.2 核心挑战与技术破局

在架构升级的深水区，我们面临着跨端开发领域的三大难题。Taro 5.0 通过一系列技术创新，给出了自己的答案。

挑战一：业务代码如何高效执行

JS/TS 代码的执行效率往往是跨端性能的瓶颈之一，我们采取了“定制虚拟机 + 框架下沉”的双重策略：

定制化 JS 虚拟机：根据端侧特性进行精细化选型，在鸿蒙端选用JSVM，深度契合鸿蒙系统特性，在 Android/iOS 端采用定制化的QuickJS 引擎，我们在开源版本基础上进行了深度改造，例如引入mimalloc优化内存分配、引入Inline Cache加速属性访问等。

Taro C++ React：这是本次升级的重头戏之一，Taro 虽然使用 React 作为 UI DSL，但直接引入 JS 版 React 会带来巨大的体积和性能开销。所以基于React 18+ 标准，我们使用 C++ 重写了 React，将其核心逻辑全部下沉至C++ 层，业务代码无需任何修改即可无感迁移。

挑战二：多端渲染效果如何统一

“写一套样式，多端崩坏”是很多跨端方案的噩梦，Taro 5.0 通过自研样式系统和组件框架来最大程度解决这一痛点。

Taro Style 样式系统：我们基于 W3C 标准定制了符合业务需求的 CSS 标准子集，并在原生三端（Android/iOS/鸿蒙）实现了统一的 C++ 样式系统。不仅保证了渲染一致性，还原生支持了多屏适配、多主题切换、高性能动画，让业务能够从容应对复杂的视觉需求。

Taro UI 原子组件框架：为了避免直接使用各端原生组件带来的差异，我们抽象了一套跨端组件化协议，基于端侧最基础的原子能力（文本、图片、容器、滚动容器）构建Taro UI C++ 基础组件库，最大程度抹平了不同平台的实现差异，确保了像素级的 UI 还原。

挑战三：渲染性能如何提升

在渲染链路的最后环节，我们追求的是“原生级”的流畅度。

Taro Render 原生渲染器：我们将中间态的节点树高效映射为原生宿主节点树，在此过程中，我们利用各端特性进行了深度优化，如多线程并发创建、图文渲染优化等。

1.3 全链路渲染管线

基于上述三层架构与核心优化，Taro 5.0 对五端的渲染管线进行了重新梳理与统一。

!Image 99!Image 100!Image 101

如图所示，虽然 H5 和小程序为了适应各自的宿主环境做了相应的调整，但在 Android、iOS 和鸿蒙原生上，我们实现了渲染管线的高度一致。这种“逻辑统一，细节适配”的策略，正是 Taro 5.0 能够稳健支撑“一码五端”的技术基石。

关于 C++ React、样式系统、Taro UI 组件框架等核心模块的底层实现细节，我们将在后续的文章中为大家深入剖析，敬请期待。 02 业务赋能：全方位构建跨端生态

Taro 5.0 的升级不仅仅是底层的架构重构，更是一次对跨端研发模式的全面革新。我们围绕开发体验、能力丰富度、性能表现三大维度，构建了全新的跨端技术生态，力图让开发者能够在不同平台间最大化共享 UI 和业务逻辑代码，同时不牺牲用户体验。

2.1 接近 Web 的开发体验

2.1.1 零成本上手：React DSL 与生态复用

Taro 坚定选择 JS/TS 作为开发语言，并以 React 作为 UI 开发框架。Taro 5.0 严格遵循 React 18+ 标准，完整支持 JSX 语法、Hooks 以及组件化开发模式。与市面上需要学习专有语法（Template）的跨端方案不同，Taro 让熟悉 React 的开发者能够零门槛快速上手，真正消除了跨端开发的技术壁垒。

!Image 102!Image 103!Image 104

同时，凭借与 React 生态的深度绑定，Taro 支持直接复用大部分 Web 前端技术资产。从常用的工具库（如 Lodash）、成熟的状态管理方案（如 Redux, Zustand），到各类第三方 React 组件，均可在 Taro 项目中无缝集成。这种强大的生态兼容能力，让业务团队能够充分复用现有资产，大幅提升研发效率。

2.1.2 高效开发：全链路调试体系

在 Taro 5.0 中，我们针对 Android、iOS 及鸿蒙端，深度定制了从启动到线上排查的全链路调试体验。

借鉴 Vite 的先进思路，Taro CLI 在客户端侧采用 ES Modules 拉取策略，无需预先打包庞大的依赖项，实现了项目的秒级启动。

* 按需编译：仅编译当前访问的页面，大幅缩减等待时间。

* C++ 热更新：端侧内置 C++ 模块处理热更新逻辑，代码修改即刻生效。

* 便捷 CLI：终端提供快捷键支持，一键唤起模拟器、Chrome DevTools、重载应用或显示调试二维码。

!Image 105!Image 106!Image 107

源码调试

Taro Devtools 工具支持 Source 面板，可以直接查看源码进行断点调试，调试工具支持完整的日志输出能力，与 Web 端开发时体验一致，可以查看完整对象信息。

!Image 108!Image 109!Image 110

节点信息查看

在 Taro Devtools Components 面板中，集成了 React Developer Tools 的核心能力，开发者可以清晰地查看当前渲染的完整组件树，实时检查并修改组件的 Props 和 State，快速定位组件对应的源码位置。

!Image 111!Image 112!Image 113

网络请求抓包

无需依赖第三方抓包工具，直接在 Taro DevTools 中即可查看应用内的所有网络请求。支持查看请求头、响应内容、耗时分析以及请求过滤，让数据链路一目了然。

!Image 114!Image 115!Image 116

线上问题分析

针对线上环境“报错难定位”的痛点，Taro 建立了完善的 SourceMap 管理机制。

* 自动归档：每次构建发布，系统会自动将 SourceMap 及 QuickJS 调试信息上传至 CDN。

* 一键解析：在 Taro 发布平台上，开发者可以找到对应版本的入口，进入源码查看页。系统支持错误栈自动解析，将晦涩的压缩代码还原为源码位置，极大提升了线上问题的排查效率。

在 Taro 发布平台上可以找到每个版本的入口。

!Image 117!Image 118!Image 119

点击后可以进入当前版本的源码查看页，在该页面可以找到编译后代码与源码的对应关系，同时进行错误栈解析操作，查问题会非常方便。

!Image 120!Image 121!Image 122

2.1.3 防患于未然：多端一致性诊断

“一码多端”最大的挑战在于各端底层能力的天然差异。为了避免代码在某一段“水土不服”，Taro 5.0 引入了静态检测 + 动态诊断的双重保障机制。

实时代码检测 (Linting)

我们提供了定制化的 ESLint 和 Stylelint 插件，将多端兼容性问题暴露在编码阶段。

* API 与组件检测：基于 @jdtaro/eslint-plugin-taro 和 TS 类型系统，编辑器会实时标注 API 或组件在不同平台的兼容性。例如，当使用了暂不支持 Android 的 API 时，代码下方会出现红色波浪线，并提示详细的兼容性文档。

!Image 123!Image 124!Image 125

* 样式兼容性检测：通过 @jdtaro/stylelint-taro，系统会自动扫描 CSS 属性。如果写了不支持的样式（如某些 Flex 布局属性在特定端的限制），会立即给出警告，确保 UI 表现的跨端一致性。

!Image 126!Image 127!Image 128

项目级健康诊断 Taro Doctor

除了代码细节，Taro CLI 还提供了 doctor 指令。它能对项目进行全方位的“体检”，扫描项目配置、依赖版本、代码结构等维度，一键生成健康报告并提供修复指引。

!Image 129!Image 130!Image 131

2.1.4 性能守门员 Taro Lighthouse

性能是业务的生命线。为了帮助开发者写出高性能的代码，我们推出了 Taro Lighthouse 性能评测工具。它类似于 Google Lighthouse，但专为 Taro 跨端场景定制。工具会从启动速度、首屏渲染、交互延迟等维度对应用进行评分，并提供详细的 Timeline 分析和编码优化建议。目前，该工具已在多个核心业务中落地，成为业务性能优化的重要抓手。

2.2 丰富的能力：拓展跨端边界

为了支撑复杂的业务场景，Taro 5.0 在能力建设上不遗余力，从底层的样式系统到上层的 AI 辅助，构建了一套全方位的跨端能力矩阵。

2.2.1 像素级还原：遵循 W3C 样式标准

CSS 是 Web 开发的灵魂。为了统一五端的样式开发体验，我们自研了一套 Taro C++ 样式系统，实现了对层叠样式表（CSS）的高效解析与运行。

标准特性支持

支持 W3C 标准的层叠（Cascading）、优先级（Specificity）、继承（Inheritance）三大特性。开发者可像写 Web 页面一样，灵活运用外联样式、内联样式来控制视觉呈现。

强大的选择器与属性

* 选择器：支持类选择器.item、后代.root .child、直接后代.parent > .child、伪类:nth-child以及伪元素::after等，满足精细化的样式控制需求。

* 属性集：覆盖布局、尺寸、定位、边框、背景、文本、变换、动画、过渡等90+ 常用 CSS 属性。

!Image 132!Image 133!Image 134

布局引擎的全面进化

为了实现真正的“一码五端”，仅支持 Flex 弹性布局是远远不够的。Taro 5.0 对布局引擎进行了核心升级，在 Android/iOS/鸿蒙原生端完整支持了 Block、Inline-Block、Inline 三种 Web 常用布局。

这一突破对于存量 Web/小程序代码的迁移至关重要，开发者无需重写布局逻辑，即可直接实现图文混排、流式布局等复杂效果。

!Image 135!Image 136!Image 137

2.2.2 灵动适配：多屏与多主题

面对日益复杂的设备形态，Taro 5.0 提供了开箱即用的适配能力。

多屏适配支持

Taro 支持业务快速实现多屏适配，符合京东主站 V15.0 移动端全尺寸适配规范。开发者可以使用弹性布局等能力进行尺寸自适应，对于不同屏幕尺寸的缩放处理，字体缩放处理等，框架自动适配，开发者无需额外处理。

对于需要不同尺寸屏幕特殊处理的情况，我们也提供了对应的能力：JS业务代码可通过useResize监听尺寸的变化，CSS上可使用@media媒体查询能力匹配不同的样式规则。

!Image 138!Image 139!Image 140

多主题能力支持

多主题方案上，Taro 基于 W3C 标准的 CSS 变量系统，开发者可以通过定义 CSS 变量来组织主题色。只需修改变量值，即可实现“一键换肤”或深色模式切换。同时提供 onThemeChange API，满足 JS 侧的逻辑联动需求。

!Image 141!Image 142!Image 143

2.2.3 组件、API 生态

在组件生态上，除了支持、、、、等基础组件外，Taro 也提供了高性能的列表虚拟组件、，基本实现对展示类型的业务的覆盖。

!Image 144!Image 145!Image 146

同时，在 API 的支持上，Taro 也提供了丰富的能力，系统信息、界面、网络、路由、数据缓存、节点查询等通用的 API 能力都已获得支持。

!Image 147!Image 148!Image 149

而针对京东 APP 内部场景，我们深度桥接了子午线埋点、登录授权、烛龙监控等核心原生能力。同时，业务方也可基于 Taro 规范开发自定义原生桥（Bridge），灵活扩展个性化功能。

!Image 150!Image 151!Image 152

2.2.4 接近 100% 的动态化

基于新架构，Taro 在 Android、iOS、鸿蒙原生三端上也实现了页面级动态化下发，业务代码开发完后在 Taro 发布平台编译、构建，通过测试后即可动态发布而不需要跟 APP 版本，这为业务需求快速上线、线上快速止损等场景提供了支持。

同时，由于业务逻辑在 Taro 内部闭环，除非在底层基建能力对接上需要新增或者调整，否则全页面基本可以 100% 动态化更新。

Taro 动态化加载支持两种模式，两种加载模式可以满足不同业务场景需求。

* 缓存加载：优先加载速度，用户可能看到旧版本 bundle

* 网络加载：优先内容最新，确保用户可以优先看到新版本 bundle

2.2.5 国际化支持

国际化能力支持也是这次 Taro 架构升级关注的重点方向，Taro 通过@jdtaro/plugin-intl插件，提供、统一了五端多语言能力，使用详情可见国际化配置指南。

Web、小程序、鸿蒙侧使用 react-intl 进行封装，继承其丰富的国际化能力；iOS、Android 侧则使用 C++ 内置库自行实现减少打包 bundle 体积，加快渲染速度。

!Image 153!Image 154!Image 155

2.2.6 AI 辅助

目前 AI 技术发展迅猛，拥抱 AI 时代，我们推出了一系列 AI 辅助工具，如 Taro MCP，提供了 Taro 知识库和开发辅助工具，供业务接入使用。

同时也正在探索 Skills 在 Taro 开发中落地，并开发了一个官方的 Taro 跨端适配 Skills 工具，该工具能自动分析项目差异，帮助开发者将现有项目从一个平台（如微信小程序）自动适配到其他平台（如鸿蒙、iOS），大幅降低跨端迁移成本。

2.3 媲美原生性能

性能始终是 Taro 关注的核心命题，也是跨端解决方案必须攻克的难关。为了让 Taro 获得足以媲美原生应用的性能表现，我们在代码执行效率与端渲染优化两个维度进行了深度重构与极致打磨。

2.3.1 C++ React

前文提到，Taro 选择 React 作为 UI DSL。然而，直接引入 JS 版本的 React 框架面临着包体积膨胀与运行性能的双重挑战。为此，Taro 基于 React 18+ 标准，完全实现了 C++ 版本的 React。

通过将 React 的核心逻辑全面下沉至 C++ 侧，我们显著提升了 DSL 层的运行效率：

* 核心特性对齐：C++ React 不仅复刻了官方 React 的bailout及eagerState等性能优化策略，更针对跨端场景对整体任务调度进行了升级。

* 性能跃升：得益于 C++的执行效率，首屏渲染性能较传统JS React提升约30%。

!Image 156!Image 157!Image 158

同时，在 Taro 新架构的 C++ React 中，引入了 React 官方单元测试，顺利跑通超过 140+ 个官方用例，最大程度保证了 C++ React 代码的健壮性与标准兼容性。

!Image 159!Image 160!Image 161

2.3.2 JS 引擎优化

在 Taro 5.0 中，我们针对不同平台的特性，定制了 JS 引擎优化方案，以追求极致的执行效率。

Android/iOS 端：深度改造 QuickJS

在 Taro 5.0 中，Android/iOS 端通过引入 QuickJS 引擎让开发者获得与 Web 端一致的灵活编码体验，为了提升业务代码运行效率，我们对引擎的深度改造，实现了内存管理优化、内联缓存等特性，整体性能提升约 40%。

在项目生产环境部署时，代码可以编译为字节码格式，进一步提升执行效率并减少包体积，为用户带来更为流程的应用体验。通过模拟场景测试用例，以及 Octane V9 基准测试和 Test262 ECMAScript 兼容性测试集的全面验证，确保改造引擎优化性能的同时，保持高度可靠性和兼容性。

后续还会在引擎性能不损失的情况下，考虑引入多态內联缓存、Promise Hooks 等特性来优化使用体验，丰富更多应用场景。

!Image 162!Image 163!Image 164

鸿蒙端：与 JSVM 深度协同

而在鸿蒙端，目前 Taro 通过鸿蒙官方的 JSVM 引擎来执行业务代码，为了提升业务代码执行效率，Taro 团队与与鸿蒙 JSVM 团队深度合作优化业务代码读取、缓存等核心操作；同时正在针对业务高频使用的对象和方法，在 JSVM 侧通过穿刺优化技术直接优化调用链路，持续推进更多性能优化合作。

2.3.3 高性能虚拟列表

针对电商、社交等场景中常见的长列表和瀑布流需求，Taro 实现了基于 C++ 的高性能虚拟列表方案（支持 List 和 Waterflow 组件）。

当前版本方案采用了双层数据维护结构：

1.数据层：数据源在 React Fiber 树和 C++ 中间态树中全量维护

2.渲染层：列表的展示、上下屏计算逻辑完全在端侧（Native）实现

通过端侧实现节点复用机制，列表在滑动过程中仅需创建新增节点，极大减少了额外的计算开销。这种设计确保了在复杂长列表场景下，依然能够保持高 FPS（帧率）和丝滑的滚动体验。

但当前方案也存在弊端，由于 React Fiber 树和 C++ 中间态树是全量维护的，当加载了很长的列表之后，如果要修改部分列表的 Item 则会出现较差的性能表现，因为按照 React 的机制需要对全部列表 Item 进行 Diff，所以我们也正在进行全新的虚拟列表方案探索，在保持高性能加载的同时，也能支持局部更新。

2.3.4 端渲染优化

Taro 新架构在渲染层面进行了全面革新，从底层机制到上层组件，显著提升了跨端应用的性能表现与多端一致性。

高性能跨平台组件系统

新架构构建了一套基于 C++ 的命令式组件系统，涵盖组件管理、事件系统、动画系统及样式处理。

* 逻辑下沉：将核心逻辑下沉至 C++，实现了“一次开发，多端复用”，有效降低了 Android 端的 JNI 调用频率。

* 架构解耦：UI 框架采用与前端框架解耦的设计，未来可灵活对接不同的前端 DSL，增强了系统的扩展性。

渲染方式与原生融合

* 原子组件原生化：采用各平台的原生视图（View, Image, Text, ScrollView）进行渲染，充分发挥原生控件在性能和无障碍访问上的优势。

* 高级组件统一化：将 Swiper、List、WaterFlow 等复杂组件的逻辑统一迁移至 C++ 层，彻底解决了传统跨端开发中“多端表现不一致”的痛点。

* 支持自定义组件：允许开发者灵活嵌入现有的原生自定义组件，满足多样化的视觉与功能需求。未来将开放C++ 自定义组件能力，让 JS 组件也能享受到原生级的性能。

双线程渲染模型

新架构采用了业务线程与 UI 线程分离的设计：

* 业务线程：专注处理业务逻辑与数据计算。

* 渲染线程：专注负责 UI 的绘制与更新。这种分离设计不仅能更好地利用现代 CPU 的多核架构，更显著提升了首屏渲染速度，有效避免了因主线程阻塞导致的 UI 卡顿。

!Image 165!Image 166!Image 167

渲染性能优化策略

在端渲染机制本身上 Taro 也做了大量的优化：

①文本渲染优化：引入文本测量缓存与富文本缓存，改进测量方法，显著减少计算开销，提升大段文本的渲染流畅度。

② 并行组件创建：采用多线程并行创建视图组件，充分释放多核性能，大幅缩短复杂页面的初始化时间。

③ 布局视图展平：对仅含布局信息的视图进行展平处理（Flattening），减少渲染层级与资源消耗。

④ 图层化渲染：对 View、Image、Text 等高频控件进行图层化改造，加速控件的更新与重绘。

⑤ 视图复用池：建立高效的视图对象复用机制，特别是在列表滚动场景下，大幅减少内存抖动（GC），提升流畅度。

⑥ 高效 DOM DIFF：通过计算原子级的视图操作指令，确保只在必要时更新视图，将 UI 变更成本降至最低。

这些优化措施共同作用，显著提升了应用的渲染性能，确保用户在使用过程中获得更流畅和高效的体验。 03 配套工程：AI 辅助研发与动态化交付平台

围绕业务场景，Taro 团队建设了一套贯穿“设计—研发—构建—发布—验证—交付”的工程化能力，上游对接 Relay 设计文件，通过 AI 能力快速生成标准化项目代码；下游依托发布平台实现页面的在线托管、构建与动态下发，形成从设计到交付的闭环流程，支撑 APP 页面快速生成、灵活迭代与可控发布。

!Image 168!Image 169!Image 170

3.1 AI 辅助初始化代码生成

针对“有视觉稿/设计文件”的需求，提供设计稿一键生成代码能力，并形成“生成—编辑—验证—交付研发”的完整链路：

1.一键生成：基于 AI 直接输出符合 Taro 规范的页面代码，样式与布局还原度可达 90%+，减少切图与逐项样式还原的人力成本。

2.对话式改码：支持手动编辑和在线AI对话对话两种方式进行快速调整（布局、样式、结构等），将“写代码”转化为“描述需求 + 自动修改”，同时针对个性化需求，也支持在右侧编辑区手动编辑代码，进一步提升研发效率与一致性。

3.实时预览：代码编辑过程中支持实时预览页面效果；可选中对应元素联动定位与修改，改动后预览实时更新，快速确认布局、样式与交互是否符合预期。

4.MCP 链接本地工程：提供 MCP 工具直接获取设计稿代码并对接本地 IDE/工程，开发者可按需在熟悉的开发环境中继续修改与调试，实现线上智能生成与本地深度开发的无缝衔接。

!Image 171!Image 172!Image 173

3.2 工程发布平台

为实现页面从“代码”到“上线交付”的规模化管理，Taro 建设工程发布平台能力，统一承接代码仓库与页面资产，提供端到端发布闭环：

1.项目托管与映射管理：项目托管到发布平台，集中管理“仓库—页面—多站点/多语言”的映射关系，页面资产可配置、可追溯。

2.在线构建与制品管理：平台支持在线构建，产出标准化制品，支撑三端一致交付，并内置多语言校验管控机制，确保多语言内容在构建阶段统一检测。

!Image 174!Image 175!Image 176

3.版本与灰度发布：提供版本管理、灰度放量与审批机制，支持按灰度比例/白名单精准投放，同时支持自动化内置流程，将已验证版本自动内置入 App 安装包，满足多场景交付需求。

4.动态下发与一码三端：依托持续集成与 Taro 跨端能力，实现 Android / iOS / 鸿蒙“一码三端”制品的统一发布与动态下发，覆盖“设计件管理—代码统一—自动构建—三端验证—一键发布—内置包—质量闭环”的全流程。

!Image 177!Image 178!Image 179 04 业务落地与价值验证

今年来 Taro 在全球售、订单中心及鸿蒙核心链路等关键业务场景中实现了规模化落地。通过“一码多端”架构与动态化能力的深度应用，不仅显著提升了研发效能，更在鸿蒙端实现了超越原有版本的性能表现。

4.1 全球售场景

全球售项目中，我京、地区/语言/货币切换、分类页、个人信息、通用设置等多个页面全面采用 Taro 技术栈开发。其中，分类页成功迁移回主站并同步支持鸿蒙端，个人信息页和通用设置页也完成鸿蒙端迁移，均实现了一码三端（iOS、Android、鸿蒙）的技术目标，有效提升了开发效率和多端一致性。

!Image 180

4.2 订单三端统一

成功支撑订单业务实现鸿蒙、Android、iOS 三端统一架构，覆盖订单列表、订单详情等共 20 个页面，协助业务解决多端适配问题并优化性能。

性能表现：

鸿蒙端：性能全面超越原有版本，通过华为性能工厂验证并获得 S 标，得分 9.82 分，在京东 APP 所有页面中排名第一

Android/iOS 端：渲染性能与原生持平，FPS 流畅度超越原生场景，各项性能指标均达要求

效率提升：

需求研发周期从三端并行开发的 11 天缩短至 3 天，研发工时降低约 73%。

同时支持动态发布能力，无需发版即可更新页面，需求交付效率显著提升。

!Image 181

4.3 鸿蒙黄流对齐主站

基于 Taro 鸿蒙多线程架构，支撑鸿蒙黄流商详、购物车、结算等核心页面快速对齐主站能力。项目期间快速迭代完善 SDK 功能以满足业务需求，同时协助业务团队进行各模块性能诊断与优化，显著提升页面性能表现，助力鸿蒙端快速追平主站体验。

!Image 182

4.4 秒送试点

Taro 也在秒送场域进行试点，实现一码多端，并验证 Taro 替代 RN 的可行性，目前试点页面「百补频道」、「新人频道」已经实现 iOS、Android、鸿蒙三端同步上线，经过测算在 Android、iOS 上相比原 RN 页面均有 50% 以上的性能提升，同时产物体积从 2.9m 降低至 300k，降低 90%，性能优化非常显著。

!Image 183!Image 184!Image 185 05 未来规划

面向未来，Taro 不止步于“够用”，更追求“卓越”。我们将继续围绕性能极致化、开发智能化、生态标准化三大核心维度持续深化创新，引领跨端技术迈向新的高度

5.1 架构演进：媲美原生体验

我们将持续深入底层架构的重构与优化，致力于消除跨端与原生的性能鸿沟：

全链路性能突破：通过深化支持 TypeScript 语法、分包加载、客户端快照、SSR（服务端渲染）以及端渲染方案的持续迭代，让跨端应用在保持高开发效率的同时，实现毫秒级的启动速度与丝滑的交互体验。

极致的一致性：进一步打磨渲染管线，确保在不同平台（鸿蒙、Android、iOS、Web、小程序）上实现像素级的 UI 还原与行为一致性。

5.2 智能研发：AI 驱动的开发新范式

Taro 将积极探索 AI 技术在前端工程领域的深度应用，从工具链向智能化平台转型：

领域增强编码助手：构建基于 Taro 专属知识库的智能助手，在编码阶段实时提示跨端差异与最佳实践，规避兼容性风险，提升研发效率。

Spec Coding 开发模式：探索基于规格（Schema）的开发新范式，通过定义数据模型与交互逻辑，自动生成符合 Taro 标准的业务代码，让开发回归业务本质。

线上问题智能分析：利用 AI 实时分析运行时异常与性能数据，自动定位故障根因（如特定机型兼容性）并提供修复建议，实现从被动排查到智能运维的闭环。

5.3 生态共建：拥抱标准与开放

紧跟 React 演进：保持与 React 官方生态的紧密对齐，第一时间适配 React 新特性（如 Server Components 等），让开发者无缝享受到前沿技术的红利。

工具链现代化升级：积极拥抱 Rust 前端生态，推动构建工具与编译插件的底层重构。与社区共建高性能的工程化基础设施，将 Taro 跨端开发体验向“秒级构建”时代迈进。

繁荣技术社区：与开发者社区携手，共建更加开放、多元的插件与组件生态，拓展 Taro 的能力边界。

通过持续的技术投入与创新实践，Taro 团队将坚定兑现 “高开发效率、高运行性能、UI 一致性、动态更新” 的技术承诺。我们致力于为开发者提供最极致的跨端体验，为业务创造更大的技术价值与商业可能。

京京东技术 @京东技术

One Sentence Summary

Summary

Main Points

* 1. Establish the WebOnNative core architectural concept, achieving framework-container integration.

By deeply integrating the runtime and rendering layers via C++, it retains the high efficiency and flexibility of web development while eliminating JS bridge overhead through logic sinking, enabling cross-platform applications to achieve native-like performance.

* 2. Rewrite C++ React based on React 18 standards, significantly improving DSL execution efficiency.

Fully sinking React's Fiber reconciliation and task scheduling logic to the C++ side results in approximately a 30% improvement in first-screen rendering performance and successfully passes over 140 official unit tests, ensuring standard compatibility and stability.

* 3. Self-developed C++ style system and atomic components, overcoming multi-platform UI consistency challenges.

Implementing features like cascading and priority based on W3C standards, supporting over 90 CSS properties and multiple layout engines, ensures pixel-perfect visual restoration across Android, iOS, and HarmonyOS.

* 4. Building an AI-assisted R&D and dynamic delivery platform, achieving a full-link engineering closed loop.

Introducing AI-driven Design-to-Code (D2C) capabilities, coupled with sub-second startup debugging tools and an online build and release platform, supporting businesses in achieving 100% dynamic updates and efficient iteration.

* 5. Large-scale implementation in JD's core businesses, validating extremely high business and technical value.

In businesses like Order Center, the R&D cycle was reduced from 11 days to 3 days, R&D hours decreased by 73%, and HarmonyOS performance scores ranked first among all JD APP pages, fully demonstrating the superiority of the new architecture.

Key Quotes

* Taro 5.0 truly achieves 'one code, five ends' unified development for Mini-Programs, H5, Android, iOS, and HarmonyOS native. * Based on React 18+ standards, we rewrote React in C++, sinking all its core logic to the C++ layer, allowing business code to migrate seamlessly without any modifications. * The R&D cycle for requirements was reduced from 11 days (for three-platform parallel development) to 3 days, and R&D hours decreased by approximately 73%. * HarmonyOS: Performance comprehensively surpasses previous versions, validated by Huawei Performance Lab and awarded an S-mark, ranking first among all pages in the JD APP. * We will continue to deepen innovation around three core dimensions: ultimate performance, intelligent development, and ecosystem standardization, leading cross-platform technology to new heights.

AI Score

Website mp.weixin.qq.com

Published At Today

Length 9356 words (about 38 min)

Tags

Taro 5.0

Cross-Platform Architecture

HarmonyOS Native

C++ React

WebOnNative

Taro 5.0: Cross-Platform Architecture Evolution and Large... ===============

Taro 5.0：跨端架构演进与业务规模化落地实践

One Sentence Summary

Summary

Main Points

Metadata

One Sentence Summary

Summary

Main Points

Key Quotes

Tags

Related Articles

🤖 問 AI