From 4f73f8fb4ebde09004540be7f3da4d88c5564e7c Mon Sep 17 00:00:00 2001 From: sienna1128 Date: Thu, 22 Sep 2022 20:32:43 +0800 Subject: [PATCH] update docs Signed-off-by: sienna1128 --- .../reference/arkui-ts/ts-types.md | 86 +++++++++---------- zh-cn/application-dev/ui/arkui-overview.md | 27 +++--- .../ui/ts-framework-directory.md | 4 +- .../ui/ts-framework-file-access-rules.md | 26 ++++-- zh-cn/application-dev/ui/ts-pixel-units.md | 4 +- .../application-dev/ui/ts-resource-access.md | 2 + .../ui-ts-basic-resource-file-categories.md | 2 +- zh-cn/application-dev/ui/ui-ts-overview.md | 12 +-- 8 files changed, 86 insertions(+), 77 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-types.md b/zh-cn/application-dev/reference/arkui-ts/ts-types.md index acb841ae60..25dc561b90 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-types.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-types.md @@ -26,7 +26,7 @@ | -------- | -------------------------------------- | | string | 需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 | | number | 默认单位vp。 | -| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的尺寸。 | +| [Resource](#resource) | 资源引用类型，引入系统资源或者应用资源中的尺寸。 | ## ResourceStr8+ @@ -35,7 +35,7 @@ | 类型 | 说明 | | -------- | ---------------------------- | | string | 字符串类型。 | -| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的字符串。 | +| [Resource](#resource) | 资源引用类型，引入系统资源或者应用资源中的字符串。 | ## Padding @@ -43,10 +43,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | --------------- | -| top | Length | 否 | 组件内元素距组件顶部的尺寸。 | -| right | Length | 否 | 组件内元素距组件右边界的尺寸。 | -| bottom | Length | 否 | 组件内元素距组件底部的尺寸。 | -| left | Length | 否 | 组件内元素距组件左边界的尺寸。 | +| top | [Length](#length) | 否 | 上内边距，组件内元素距组件顶部的尺寸。 | +| right | [Length](#length) | 否 | 右内边距，组件内元素距组件右边界的尺寸。 | +| bottom | [Length](#length) | 否 | 下内边距，组件内元素距组件底部的尺寸。 | +| left | [Length](#length) | 否 | 左内边距，组件内元素距组件左边界的尺寸。 | ## Margin @@ -54,10 +54,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | --------------- | -| top | Length | 否 | 组件外元素距组件顶部的尺寸。 | -| right | Length | 否 | 组件外元素距组件右边界的尺寸。 | -| bottom | Length | 否 | 组件外元素距组件底部的尺寸。 | -| left | Length | 否 | 组件外元素距组件左边界的尺寸。 | +| top | [Length](#length) | 否 | 上外边距，组件顶部距组件外元素的尺寸。 | +| right | [Length](#length) | 否 | 右外边距，组件右边界距组件外元素的尺寸。 | +| bottom | [Length](#length) | 否 | 下外边距，组件底部距组件外元素的尺寸。 | +| left | [Length](#length) | 否 | 坐外边距，组件左边界距组件外元素的尺寸。 | ## EdgeWidths9+ @@ -65,10 +65,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | -------- | -| top | Length | 否 | 组件上边框宽度。 | -| right | Length | 否 | 组件右边框宽度。 | -| bottom | Length | 否 | 组件下边框宽度。 | -| left | Length | 否 | 组件左边框宽度。 | +| top | [Length](#length) | 否 | 组件上边框宽度。 | +| right | [Length](#length) | 否 | 组件右边框宽度。 | +| bottom | [Length](#length) | 否 | 组件下边框宽度。 | +| left | [Length](#length) | 否 | 组件左边框宽度。 | ## BorderRadiuses9+ @@ -76,10 +76,10 @@ | 名称 | 类型 | 必填 | 说明 | | ----------- | ------ | ---- | ---------- | -| topLeft | Length | 否 | 组件左上角圆角半径。 | -| topRight | Length | 否 | 组件右上角圆角半径。 | -| bottomLeft | Length | 否 | 组件左下角圆角半径。 | -| bottomRight | Length | 否 | 组件右下角圆角半径。 | +| topLeft | [Length](#length) | 否 | 组件左上角圆角半径。 | +| topRight | [Length](#length) | 否 | 组件右上角圆角半径。 | +| bottomLeft | [Length](#length) | 否 | 组件左下角圆角半径。 | +| bottomRight | [Length](#length) | 否 | 组件右下角圆角半径。 | ## EdgeColors9+ @@ -87,10 +87,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ------------- | ---- | -------- | -| top | ResourceColor | 否 | 组件上边框颜色。 | -| right | ResourceColor | 否 | 组件右边框颜色。 | -| bottom | ResourceColor | 否 | 组件下边框颜色。 | -| left | ResourceColor | 否 | 组件左边框颜色。 | +| top | [ResourceColor](#resourcecolor8) | 否 | 组件上边框颜色。 | +| right | [ResourceColor](#resourcecolor8) | 否 | 组件右边框颜色。 | +| bottom | [ResourceColor](#resourcecolor8) | 否 | 组件下边框颜色。 | +| left | [ResourceColor](#resourcecolor8) | 否 | 组件左边框颜色。 | ## EdgeStyles9+ @@ -98,10 +98,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ----------- | ---- | -------- | -| top | BorderStyle | 否 | 组件上边框样式。 | -| right | BorderStyle | 否 | 组件右边框样式。 | -| bottom | BorderStyle | 否 | 组件下边框样式。 | -| left | BorderStyle | 否 | 组件左边框样式。 | +| top | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) | 否 | 组件上边框样式。 | +| right | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) | 否 | 组件右边框样式。 | +| bottom | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) | 否 | 组件下边框样式。 | +| left | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) | 否 | 组件左边框样式。 | ## Offset @@ -110,8 +110,8 @@ | 名称 | 类型 | 必填 | 说明 | | ---- | ------ | ---- | -------- | -| dx | Length | 是 | 水平方向偏移量。 | -| dy | Length | 是 | 竖直方向偏移量。 | +| dx | [Length](#length) | 是 | 水平方向偏移量。 | +| dy | [Length](#length) | 是 | 竖直方向偏移量。 | ## ResourceColor8+ @@ -122,7 +122,7 @@ | [Color](../reference/arkui-ts/ts-appendix-enums.md#color) | 颜色枚举值。 | | number | HEX格式颜色。 | | string | rgb或者rgba格式颜色。 | -| Resource | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 | +| [Resource](#resource) | 使用引入资源的方式，引入系统资源或者应用资源中的颜色。 | ## LengthConstrain @@ -130,8 +130,8 @@ | 名称 | 类型 | 必填 | 说明 | | --------- | ------ | ---- | ------- | -| minLength | Length | 是 | 组件最小长度。 | -| maxLength | Length | 是 | 组件最大长度。 | +| minLength | [Length](#length) | 是 | 组件最小长度。 | +| maxLength | [Length](#length) | 是 | 组件最大长度。 | ## Font @@ -163,8 +163,8 @@ | 名称 | 类型 | 必填 | 说明 | | ---- | ------ | ---- | --------------------------- | -| x | Length | 否 | x轴坐标，作为返回值时，类型为number，单位vp。 | -| y | Length | 否 | y轴坐标，作为返回值时，类型为number，单位vp。 | +| x | [Length](#length) | 否 | x轴坐标，作为返回值时，类型为number，单位vp。 | +| y | [Length](#length) | 否 | y轴坐标，作为返回值时，类型为number，单位vp。 | ## ConstraintSizeOptions @@ -172,10 +172,10 @@ | 名称 | 类型 | 必填 | 说明 | | --------- | ------ | ---- | ------- | -| minWidth | Length | 否 | 元素最小宽度。 | -| maxWidth | Length | 否 | 元素最大宽度。 | -| minHeight | Length | 否 | 元素最小高度。 | -| maxHeight | Length | 否 | 元素最大高度。 | +| minWidth | [Length](#length) | 否 | 元素最小宽度。 | +| maxWidth | [Length](#length) | 否 | 元素最大宽度。 | +| minHeight | [Length](#length) | 否 | 元素最小高度。 | +| maxHeight | [Length](#length) | 否 | 元素最大高度。 | ## SizeOptions @@ -183,8 +183,8 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ------ | ---- | ----- | -| width | Length | 否 | 元素宽度。 | -| height | Length | 否 | 元素高度。 | +| width | [Length](#length) | 否 | 元素宽度。 | +| height | [Length](#length) | 否 | 元素高度。 | ## BorderOptions @@ -193,10 +193,10 @@ | 名称 | 类型 | 必填 | 说明 | | ------ | ---------------------------------------- | ---- | ------- | -| width | Length \| EdgeWidths9+ | 否 | 边框宽度。 | -| color | ResourceColor \| EdgeColors9+ | 否 | 边框颜色。 | -| radius | Length \| BorderRadiuses9+ | 否 | 边框圆角半径。 | -| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| EdgeStyles9+ | 否 | 边框样式。 | +| width | [Length](#length) \| [EdgeWidths9+](#edgewidths9) | 否 | 边框宽度。 | +| color | [ResourceColor](#resourcecolor8) \| [EdgeColors9+](#edgecolors9) | 否 | 边框颜色。 | +| radius | [Length](#length) \| [BorderRadiuses9+](#borderradiuses9) | 否 | 边框圆角半径。 | +| style | [BorderStyle](../reference/arkui-ts/ts-appendix-enums.md#borderstyle) \| [EdgeStyles9+](#edgestyles9) | 否 | 边框样式。 | ## ColorFilter9+ diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index 52410dd81e..3e4cf62757 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -2,41 +2,42 @@ ## 框架介绍 -方舟开发框架（简称：ArkUI），是一套UI开发框架，提供开发者进行应用UI开发时所必需的能力。 - +方舟开发框架（简称：ArkUI），是一套构建用户界面的开发框架，提供开发者进行应用UI开发所必需的能力。 ## 基本概念 - 组件：组件是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。 -- 页面：page页面是方舟开发框架最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 +- 页面：页面是ArkUI最小的调度分割单位。开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理，并通过路由API实现页面的调度管理，以实现应用内功能的解耦。 ## 主要特征 -- UI组件：方舟开发框架不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 +- UI组件：ArkUI不仅提供了多种基础组件，如文本显示、图片显示、按键交互等，也提供了支持视频播放能力的媒体组件。并且针对不同类型设备进行了组件设计，提供了组件在不同平台上的样式适配能力，此种组件称为“多态组件”。 + +- 布局：ArkUI提供了多种布局方式，除了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 -- 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。 +- 动画：ArkUI对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 -- 动画：方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。 +- 绘制：ArkUI提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 -- 绘制：方舟开发框架提供了多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制、图片绘制等。 +- 交互事件：ArkUI提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 -- 交互事件：方舟开发框架提供了多种交互能力，满足应用在不同平台通过不同输入设备均可正常进行UI交互响应，默认适配了触摸手势、遥控器、鼠标等输入操作，同时也提供事件通知能力。 +- 平台API通道：ArkUI提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 -- 平台API通道：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 -- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于eTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。 +## 两种开发范式 +ArkUI针对不同使用场景，技术背景的开发者提供了两种开发范式，分别是基于eTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。 | 开发范式名称 | 简介 | 适用场景 | 适用人群 | | -------- | ---------------------------------------- | ---------------- | ------------------- | | 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | - | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | + | 类Web开发范式 | 采用经典的HTML、CSS、JavaScript三段式开发方式。使用HTML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI界面与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，便于开发者快速将已有的Web应用改造成ArkUI应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | -### 框架结构 +## 框架结构 ![zh-cn_image_0000001183709904](figures/zh-cn_image_0000001183709904.png) -从上图可以看出，类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的，其中，UI后端引擎实现了方舟开发框架的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理，渲染更新链路更为精简，占用内存更少，因此更推荐开发者选用声明式开发范式来搭建应用UI界面。 +上图所示，类Web开发范式与声明式开发范式的UI后端引擎和语言运行时是共用的，其中，UI后端引擎实现了ArkUI的六种基本能力。声明式开发范式无需JS Framework进行页面DOM管理，渲染更新链路更为精简，占用内存更少，因此更推荐开发者选用声明式开发范式来搭建应用UI界面。 diff --git a/zh-cn/application-dev/ui/ts-framework-directory.md b/zh-cn/application-dev/ui/ts-framework-directory.md index b4a7b831db..b13a985ef4 100644 --- a/zh-cn/application-dev/ui/ts-framework-directory.md +++ b/zh-cn/application-dev/ui/ts-framework-directory.md @@ -1,7 +1,6 @@ # 目录结构 - FA应用的eTS模块(entry/src/main)的典型开发目录结构如下： @@ -16,10 +15,9 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下： **各个文件夹和文件的作用：** - - **app.ets**文件用于全局应用逻辑和应用生命周期管理。 -- **pages**目录用于存放所有组件页面。 +- **pages**目录用于存放所有页面。 - **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。 diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md index f792bb37ff..e72e808efd 100644 --- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md +++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md @@ -1,19 +1,28 @@ -# 应用代码文件访问规则 +# 文件访问规则 +应用代码中文件访问方法主要有下面两种： -应用代码文件可通过如下方式访问： +- **相对路径**：使用相对路径引用代码文件，以"../"访问上一级目录，以"./"访问当前目录，也可以省略不写 +- **绝对路径**：使用当前模块根路径引用代码文件，比如：common/utils/utils。 -- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。 -- 使用当前模块根路径引用代码文件，比如：common/utils/utils。 - -- 公共代码文件推荐放在**common**目录下。 ## 示例 +``` +MainAbility +├─ app.ets +├─ common +│ └─ utils +│ └─ utils.ets +└─ pages + └─ index.ets +``` +>注：公共代码文件推荐新建一个**common**目录存放 +如上所示，将utils放在common中,示例中index.ets访问utils.ets文件 ```ts -// xxx.ets +// index.ets import { FoodData, FoodList } from "../common/utils/utils"; @Entry @@ -32,11 +41,10 @@ struct FoodCategoryList { } ``` -导入文件示例： +被导入文件utils.ets： ```ts //common/utils/utils.ets - export class FoodData { name: string; constructor(name: string) { diff --git a/zh-cn/application-dev/ui/ts-pixel-units.md b/zh-cn/application-dev/ui/ts-pixel-units.md index eda7b03168..62f4bc3efb 100644 --- a/zh-cn/application-dev/ui/ts-pixel-units.md +++ b/zh-cn/application-dev/ui/ts-pixel-units.md @@ -6,9 +6,9 @@ | 名称 | 描述 | | ---- | ---------------------------------------- | | px | 屏幕物理像素单位。 | -| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 | +| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，当数值不带单位时，默认单位为vp。 | | fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 | -| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | +| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 | ## 像素单位转换 diff --git a/zh-cn/application-dev/ui/ts-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md index 225e42f563..86da473d36 100644 --- a/zh-cn/application-dev/ui/ts-resource-access.md +++ b/zh-cn/application-dev/ui/ts-resource-access.md @@ -9,6 +9,8 @@ > **说明：** > +> 系统资源一般定义在SDK文件的ets/x.x.x.x(SDK版本）/build-tools/ets-loader/sysResource.js文件中，由系统预置。 +> > 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。 > > `$r`返回值为Resource对象，可通过[getString](../reference/apis/js-apis-resource-manager.md#getstring) 方法获取对应的字符串。 diff --git a/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md index a162017315..ce7f75e31d 100644 --- a/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md +++ b/zh-cn/application-dev/ui/ui-ts-basic-resource-file-categories.md @@ -25,7 +25,7 @@ resources **表1** resources目录分类 -| 分类 | base目录与限定词目录 | 限定词目录 | rawfile目录 | +| 分类 | base目录 | 限定词目录 | rawfile目录 | | ---- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | | 组织形式 | base目录是默认存在的目录。当应用的resources目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
base目录的二级子目录为**资源组目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 限定词目录需要开发者自行创建。目录名称由一个或多个表征应用场景或设备特征的限定词组合而成，具体要求参见[限定词目录](#限定词目录)。
限定词目录的二级子目录为**资源组目录**，用于存放字符串、颜色、布尔值等基础元素，以及媒体、动画、布局等资源文件，具体要求参见[资源组目录](#资源组目录)。 | 支持创建多层子目录，目录名称可以自定义，文件夹内可以自由放置各类资源文件。
rawfile目录的文件不会根据设备状态去匹配不同的资源。 | | 编译方式 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被编译成二进制文件，并赋予资源文件ID。 | 目录中的资源文件会被直接打包进应用，不经过编译，也不会被赋予资源文件ID。 | diff --git a/zh-cn/application-dev/ui/ui-ts-overview.md b/zh-cn/application-dev/ui/ui-ts-overview.md index 8729ec3991..47abb99725 100644 --- a/zh-cn/application-dev/ui/ui-ts-overview.md +++ b/zh-cn/application-dev/ui/ui-ts-overview.md @@ -1,18 +1,18 @@ # 概述 -基于TS扩展的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用的UI开发框架，支持开发者高效的构建跨设备应用UI界面。 +ArkUI(声明式开发范式)是一套开发极简、高性能、跨设备应用的UI开发框架，支持开发者高效的构建跨设备应用UI界面。 ## 基础能力 -使用基于TS扩展的声明式开发范式的方舟开发框架，采用更接近自然语义的编程方式，让开发者可以直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。开发框架不仅从组件、动效和状态管理三个维度来提供UI能力，还提供了系统能力接口，实现系统能力的极简调用。 +声明式开发范式采用接近自然语义的编程方式，从组件、动效和状态管理三个维度提供UI能力，并提供系统能力接口，便于开发者直观高效地描述UI界面，极简地调用系统能力，不必关心UI绘制和渲染的底层实现，极大地提高开发者的开发效率与体验。 -请参考[基于TS扩展的声明式开发范式API](../reference/arkui-ts/ts-universal-events-click.md)文档，全面地了解组件，更好地开发应用。 +具体请参考[声明式开发范式API](../reference/arkui-ts/Readme-CN.md)。 - **开箱即用的组件** - 框架提供丰富的系统预置组件，可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，使页面具有更强的工程性。 + 框架提供丰富的系统组件，通过链式调用的方式设置组件属性实现不同的组件样式，达到不同渲染效果。应用开发中，开发者基于组件化思想，将页面分割为多个独立的UI单元，每个UI单元使用系统组件组合拼接，实现代码的封装、复用，具有更浅的结构性和工程性。 - **丰富的动效接口** @@ -22,12 +22,12 @@ - **状态与数据管理** - 状态数据管理作为基于TS扩展的声明式开发范式的特色，通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态，两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。 + 状态数据管理是声明式开发范式的特色，框架提供功能不同的装饰器对UI组件状态和应用程序状态进行管理，为开发者提供了清晰的页面数据传递方式和渲染更新方法，便于开发者完整地构建整个应用的数据更新和UI渲染流程。 - **系统能力接口** - 使用基于TS扩展的声明式开发范式的方舟开发框架，还封装了丰富的系统能力接口，开发者可以通过简单的接口调用，实现从UI设计到系统能力调用的极简开发。 + ArkUI封装了丰富的[系统能力接口](../reference/apis/Readme-CN.md)，实现系统能力调用的极简开发。 ## 整体架构 -- GitLab