Skip to content

Commit 8739286

Browse files
committed
fix(blog): img name
1 parent 67c9cc2 commit 8739286

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

blog/2025-05-16-taro-harmony-c-api.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Taro For Harmony C-API 版本正式开源
2+
title: Taro on Harmony C-API 版本正式开源
33
authors: [xuanzebin, TJ, azu, atao]
44
tags: [v4, harmony]
55
description: '在过去的一年中,Taro 经历了显著的蜕变,Taro For Harmony 方案完成从 ArkTS 方案到 C-API 方案的升级,成功实现了对纯血鸿蒙的完全适配,扩展了 Taro 的兼容平台家族,实现了对 H5、小程序、RN、原生鸿蒙多端的统一开发。'
@@ -9,29 +9,29 @@ description: '在过去的一年中,Taro 经历了显著的蜕变,Taro For H
99

1010
在过去的一年中,Taro 经历了显著的蜕变,Taro For Harmony 方案完成从 ArkTS 方案到 C-API 方案的升级,成功实现了对纯血鸿蒙的完全适配,扩展了 Taro 的兼容平台家族,实现了对 H5、小程序、RN、原生鸿蒙多端的统一开发。
1111

12-
![image.png](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2024-09-26-21-35NaN6T9eOyiqx9Z6.png)
12+
![Taro X HarmonyOS](https://s3.cn-north-1.jdcloud-oss.com/shendengbucket1/2024-09-26-21-35NaN6T9eOyiqx9Z6.png)
1313

1414
去年 9 月,京东 APP 纯血鸿蒙 在鸿蒙应用商城正式上线,APP 中核心购物链路,如首页、搜索、商详、购物车、订单、结算和我京等页面,都是通过 Taro On Harmony C-API 版本进行开发,并且一上线就获得了华为的 S 级应用认证。
1515

16-
![image.png](https://img13.360buyimg.com/img/jfs/t1/235448/38/25755/201048/66d7d844F0baea79b/adfe087ce5348c30.png)
16+
![JD Harmony](https://img13.360buyimg.com/img/jfs/t1/235448/38/25755/201048/66d7d844F0baea79b/adfe087ce5348c30.png)
1717

1818
今天,我们正式开源 Taro For Harmony C-API 版本,这次版本的发布,将带来更丰富的样式适配、更高效的渲染性能、更全面的组件支持,让开发者以 Web 范式的方式来开发出媲美原生鸿蒙性能的应用,为鸿蒙应用生态的丰富注入强大的动力。
1919

20-
![pic_hd](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/pic_hd.jpg)
20+
![JD Harmony APP](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/pic_hd.jpg)
2121

2222
## 整体技术架构
2323

2424
Taro For Harmony 技术方案支持开发者使用 React DSL 来开发纯血鸿蒙应用,整体架构可以简单分为三层:
2525

26-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img3.png)
26+
![Taro Harmony React](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img3.png)
2727

2828
最上层是应用业务代码所在的 ArkVM 层,这一层在 C-API 版本中主要运行业务代码、React 的核心代码以及少量的 Taro 运行时代码。
2929

3030
中间层是 Taro 的 CSSOM 和 TaroElement 树,负责处理上层 Taro 运行时代码传递下来的指令,比如 TaroElement 节点树创建,绑定关系以及设置属性等操作。
3131

3232
最下层存放的是 TaroRenderNode 虚拟节点树,这棵节点树和真正的上屏节点树是一一对应的关系,同时在 TaroRenderNode 节点树内会创建对应的 Yoga 节点。
3333

34-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img4.png)
34+
![Taro Harmony React DOM](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img4.png)
3535

3636
同时 Taro 还基于鸿蒙提供的 VSync 机制设置一套任务处理管线,来处理中间层和下层节点树产生的样式匹配、节点测量、节点布局、样式设置以及节点上屏等任务,来保证任务的时序性和最后上屏渲染结果的正确性。
3737

@@ -55,37 +55,37 @@ Taro For Harmony 技术方案支持开发者使用 React DSL 来开发纯血鸿
5555

5656
同时,我们参考浏览器 CSSOM 的实现方式,在 C++ 实现了一套 CSSOM 逻辑,里面包含了样式解析、样式匹配、样式合成和应用整个链路的样式处理逻辑。
5757

58-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img5.png)
58+
![Taro Harmony CSS](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img5.png)
5959

6060
另外,Taro 引入了 Yoga 布局引擎来计算渲染节点的位置和大小,最大程度保证 Taro 构建出来的鸿蒙应用中渲染样式和 W3C 规范的一致性。
6161

62-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img6.png)
62+
![Taro Harmony Style](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img6.png)
6363

6464
### 媲美原生 ArkTS 的高性能
6565

6666
#### 运行时逻辑下沉至 C++
6767

6868
在 C-API 的版本中,我们将 ArkVM 层的 Taro 运行时内容削减到极致的薄,将 TaroElement 的大部分内容都下沉到了 C++ 侧,并在 ArkVM 层取消了他们之间父子关系的绑定,极大地提升了 TaroElement 相关逻辑的性能。
6969

70-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img7.png)
70+
![Taro Harmony CAPI](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img7.png)
7171

7272
另一方面,在 C++ 侧 Taro 会指令式地调用 ArkUI 在 C++ 侧提供的 API,来高效地创建节点、设置属性、绑定事件以及绘制上屏。
7373

7474
#### 提供长列表组件应对长列表场景
7575

7676
Taro 还针对长列表场景针对性地提供了长列表类型组件,并对长列表类型组件进行了优化,提供了懒加载、预加载和节点复用等功能,有效地解决大数据量下的性能问题,提高应用的流畅度和用户体验。
7777

78-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img8.png)
78+
![Taro Harmony Virtual List](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img8.png)
7979

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

8282
Taro 的组件和 API 是以小程序作为基准来进行设计的,因此在实际的鸿蒙应用开发过程中,会出现部分所需的组件和 API 在 Taro 中不存在的情况,因为针对这种情况,在 C-API 版本中,Taro 提供了原生混合开发的能力,支持将原生页面或者原生组件混合编译到 Taro 鸿蒙项目中,支持 Taro 组件和鸿蒙原生组件在页面上的混合使用。
8383

84-
![image.png](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img9.png)
84+
![Taro Harmony CAPI Hybrid](https://storage.360buyimg.com/aotu-team/zakary-blog/2025-05-16/img9.png)
8585

8686
## 使用教程
8787

88-
### **安装和使用**
88+
### 安装和使用
8989

9090
#### 安装 harmony 插件
9191

@@ -117,7 +117,7 @@ const config = {
117117
}
118118
```
119119

120-
### **编译项目**
120+
### 编译项目
121121

122122
```bash
123123
# 编译鸿蒙应用

0 commit comments

Comments
 (0)