mirror of
https://gitee.com/openharmony/arkui_ace_engine
synced 2024-11-27 01:03:08 +00:00
fix readme
Signed-off-by: luoying_ace_admin <luoying19@huawei.com> Change-Id: Ic0dd127ba4dffe28a669de3ba6c2feb70e6037f2
This commit is contained in:
parent
00ed822526
commit
80011ae0de
80
README_zh.md
80
README_zh.md
@ -1,45 +1,23 @@
|
|||||||
# JS UI框架组件<a name="ZH-CN_TOPIC_0000001076213364"></a>
|
# ArkUI开发框架<a name="ZH-CN_TOPIC_0000001076213364"></a>
|
||||||
|
|
||||||
- [简介](#section15701932113019)
|
- [简介](#section15701932113019)
|
||||||
- [目录](#section1791423143211)
|
- [目录](#section1791423143211)
|
||||||
- [使用场景](#section171384529150)
|
- [使用场景](#section171384529150)
|
||||||
- [接口说明](#section271831717166)
|
- [相关仓](#section1447164910172)
|
||||||
- [涉及仓](#section1447164910172)
|
|
||||||
|
|
||||||
## 简介<a name="section15701932113019"></a>
|
## 简介<a name="section15701932113019"></a>
|
||||||
|
|
||||||
JS UI框架是OpenHarmony UI开发框架,提供基础类、容器类、画布类等UI组件和标准CSS动画能力,支持类Web范式编程。
|
ArkUI框架是OpenHarmony UI开发框架,提供开发者进行应用UI开发时所必需的能力,包括UI组件、动画、绘制、交互事件、JS API扩展机制等。ArkUI框架提供了两种开发范式,分别是基于eTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。
|
||||||
|
|
||||||
- **类Web范式编程**
|
**图 1** ArkUI框架结构<a name="fig2606133765017"></a>
|
||||||
|
![](figures/ArkUI框架结构.png "ArkUI框架结构")
|
||||||
|
|
||||||
JS UI框架采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。JS UI框架提供的类Web编程范式,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。
|
从上图可以看出,类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的,其中,UI后端引擎实现了ArkUI框架的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理,渲染更新链路更为精简,占用内存更少,因此更推荐开发者选用声明式开发范式来搭建应用UI界面。
|
||||||
|
|
||||||
|
|
||||||
**图 1** JS UI框架架构<a name="fig2606133765017"></a>
|
|
||||||
![](figures/JS-UI框架架构.png "JS-UI框架架构")
|
|
||||||
|
|
||||||
JS UI框架包括应用层(Application)、前端框架层(Framework)、引擎层(Engine)和平台适配层(Porting Layer)。
|
|
||||||
|
|
||||||
- **Application**
|
|
||||||
|
|
||||||
应用层表示开发者使用JS UI框架开发的FA应用,这里的FA应用特指JS FA应用。
|
|
||||||
|
|
||||||
- **Framework**
|
|
||||||
|
|
||||||
前端框架层主要完成前端页面解析,以及提供MVVM(Model-View-ViewModel)开发模式、页面路由机制和自定义组件等能力。
|
|
||||||
|
|
||||||
- **Engine**
|
|
||||||
|
|
||||||
引擎层主要提供动画解析、DOM(Document Object Model)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
|
|
||||||
|
|
||||||
- **Porting Layer**
|
|
||||||
|
|
||||||
适配层主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
|
|
||||||
|
|
||||||
|
|
||||||
## 目录<a name="section1791423143211"></a>
|
## 目录<a name="section1791423143211"></a>
|
||||||
|
|
||||||
JS UI开发框架源代码在/foundation/arkui/ace\_engine下,目录结构如下图所示:
|
ArkUI开发框架源代码在/foundation/arkui/ace\_engine下,目录结构如下图所示:
|
||||||
|
|
||||||
```
|
```
|
||||||
/foundation/arkui/ace_engine
|
/foundation/arkui/ace_engine
|
||||||
@ -54,49 +32,15 @@ JS UI开发框架源代码在/foundation/arkui/ace\_engine下,目录结构如
|
|||||||
|
|
||||||
## 使用场景<a name="section171384529150"></a>
|
## 使用场景<a name="section171384529150"></a>
|
||||||
|
|
||||||
JS UI框架提供了丰富的、功能强大的UI组件、样式定义,组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件,减少开发量。
|
ArkUI框架提供了丰富的、功能强大的UI组件、样式定义,组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。开发者还可以通过组件间合理的搭配定义满足业务需求的新组件,减少开发量。
|
||||||
|
|
||||||
## 接口说明<a name="section271831717166"></a>
|
## 相关仓<a name="section1447164910172"></a>
|
||||||
|
|
||||||
**表 1** 组件介绍
|
[ArkUI框架子系统](https://gitee.com/openharmony/docs/blob/master/zh-cn/readme/ArkUI%E6%A1%86%E6%9E%B6%E5%AD%90%E7%B3%BB%E7%BB%9F.md)
|
||||||
|
|
||||||
<a name="table2347172925617"></a>
|
|
||||||
<table><thead align="left"><tr id="row5347429155610"><th class="cellrowborder" valign="top" width="28.64%" id="mcps1.2.3.1.1"><p id="p1347102910567"><a name="p1347102910567"></a><a name="p1347102910567"></a>组件类型</p>
|
|
||||||
</th>
|
|
||||||
<th class="cellrowborder" valign="top" width="71.36%" id="mcps1.2.3.1.2"><p id="p83475294565"><a name="p83475294565"></a><a name="p83475294565"></a>主要组件</p>
|
|
||||||
</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody><tr id="row15347122918562"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p679795614335"><a name="p679795614335"></a><a name="p679795614335"></a>基础组件</p>
|
|
||||||
</td>
|
|
||||||
<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p88813982011"><a name="p88813982011"></a><a name="p88813982011"></a>button、text、input、label、image、progress、rating、span、marquee、image-animator、divider、menu、chart、option、picker、picker-view、piece、qrcode、select、slider、switch、toolbar、toolbar-item、toggle</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr id="row1973535793115"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p8735195713313"><a name="p8735195713313"></a><a name="p8735195713313"></a>容器组件</p>
|
|
||||||
</td>
|
|
||||||
<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p1268024618208"><a name="p1268024618208"></a><a name="p1268024618208"></a>div、list、list-item、list-item-group、stack、swiper、tabs、tab-bar、tab-content、refresh、dialog、badge、panel、popup、stepper、stepper-item</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr id="row1792218915320"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p692289163220"><a name="p692289163220"></a><a name="p692289163220"></a>画布组件</p>
|
|
||||||
</td>
|
|
||||||
<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p199228910327"><a name="p199228910327"></a><a name="p199228910327"></a>canvas</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr id="row837615526208"><td class="cellrowborder" valign="top" width="28.64%" headers="mcps1.2.3.1.1 "><p id="p4377752152016"><a name="p4377752152016"></a><a name="p4377752152016"></a>栅格组件</p>
|
|
||||||
</td>
|
|
||||||
<td class="cellrowborder" valign="top" width="71.36%" headers="mcps1.2.3.1.2 "><p id="p17377185222019"><a name="p17377185222019"></a><a name="p17377185222019"></a>grid-container、grid-row、grid-col</p>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
## 涉及仓<a name="section1447164910172"></a>
|
|
||||||
|
|
||||||
JS UI框架子系统
|
|
||||||
|
|
||||||
**arkui\_ace\_engine**
|
**arkui\_ace\_engine**
|
||||||
|
|
||||||
ace\_engine\_lite
|
[arkui\_ace\_engine\_lite](https://gitee.com/openharmony/arkui_ace_engine_lite)
|
||||||
|
|
||||||
arkui\_napi
|
[arkui\_napi](https://gitee.com/openharmony/arkui_napi)
|
||||||
|
|
||||||
|
BIN
figures/ArkUI框架结构.png
Normal file
BIN
figures/ArkUI框架结构.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
Loading…
Reference in New Issue
Block a user