Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
d0a2b26d
D
Docs
项目概览
OpenHarmony
/
Docs
大约 1 年 前同步成功
通知
159
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
未验证
提交
d0a2b26d
编写于
10月 17, 2022
作者:
O
openharmony_ci
提交者:
Gitee
10月 17, 2022
浏览文件
操作
浏览文件
下载
差异文件
!10632 ArkTS整改
Merge pull request !10632 from luoying_ace/ly1006
上级
b97f31e6
57ad2bc4
变更
22
隐藏空白更改
内联
并排
Showing
22 changed file
with
94 addition
and
95 deletion
+94
-95
zh-cn/application-dev/quick-start/Readme-CN.md
zh-cn/application-dev/quick-start/Readme-CN.md
+10
-10
zh-cn/application-dev/quick-start/arkts-basic-ui-description.md
...application-dev/quick-start/arkts-basic-ui-description.md
+2
-2
zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md
...tion-dev/quick-start/arkts-dynamic-ui-elememt-building.md
+2
-2
zh-cn/application-dev/quick-start/arkts-get-started.md
zh-cn/application-dev/quick-start/arkts-get-started.md
+30
-0
zh-cn/application-dev/quick-start/arkts-rendering-control.md
zh-cn/application-dev/quick-start/arkts-rendering-control.md
+1
-1
zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md
...tion-dev/quick-start/arkts-restrictions-and-extensions.md
+2
-2
zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md
...ion-dev/quick-start/arkts-state-mgmt-application-level.md
+0
-0
zh-cn/application-dev/quick-start/arkts-state-mgmt-concepts.md
.../application-dev/quick-start/arkts-state-mgmt-concepts.md
+1
-1
zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md
...pplication-dev/quick-start/arkts-state-mgmt-page-level.md
+0
-0
zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md
...v/quick-start/deveco-studio-user-guide-for-openharmony.md
+2
-2
zh-cn/application-dev/quick-start/ets-get-started.md
zh-cn/application-dev/quick-start/ets-get-started.md
+0
-30
zh-cn/application-dev/quick-start/figures/arkts-get-started.png
...application-dev/quick-start/figures/arkts-get-started.png
+0
-0
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
+1
-1
zh-cn/application-dev/ui/Readme-CN.md
zh-cn/application-dev/ui/Readme-CN.md
+1
-2
zh-cn/application-dev/ui/ts-framework-directory.md
zh-cn/application-dev/ui/ts-framework-directory.md
+2
-2
zh-cn/application-dev/ui/ts-pixel-units.md
zh-cn/application-dev/ui/ts-pixel-units.md
+1
-1
zh-cn/application-dev/ui/ui-ts-building-data-model.md
zh-cn/application-dev/ui/ui-ts-building-data-model.md
+2
-2
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
+2
-2
zh-cn/application-dev/ui/ui-ts-layout-flex.md
zh-cn/application-dev/ui/ui-ts-layout-flex.md
+2
-2
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
+1
-1
zh-cn/application-dev/ui/ui-ts-overview.md
zh-cn/application-dev/ui/ui-ts-overview.md
+31
-31
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
...cation-dev/ui/ui-ts-page-redirection-data-transmission.md
+1
-1
未找到文件。
zh-cn/application-dev/quick-start/Readme-CN.md
浏览文件 @
d0a2b26d
...
@@ -12,14 +12,14 @@
...
@@ -12,14 +12,14 @@
-
[
SysCap说明
](
syscap.md
)
-
[
SysCap说明
](
syscap.md
)
-
[
HarmonyAppProvision配置文件
](
app-provision-structure.md
)
-
[
HarmonyAppProvision配置文件
](
app-provision-structure.md
)
-
学习
e
TS语言
-
学习
Ark
TS语言
-
[
初识
ets语言
](
e
ts-get-started.md
)
-
[
初识
ArkTS语言
](
ark
ts-get-started.md
)
-
e
TS语法(声明式UI)
-
Ark
TS语法(声明式UI)
-
[
基本UI描述
](
e
ts-basic-ui-description.md
)
-
[
基本UI描述
](
ark
ts-basic-ui-description.md
)
-
状态管理
-
状态管理
-
[
基本概念
](
ets-state-mgmt-concepts.md
)
-
[
基本概念
](
arkts-state-mgmt-concepts.md
)
-
[
页面级变量的状态管理
](
ets-state-mgmt-page-level.md
)
-
[
页面级变量的状态管理
](
arkts-state-mgmt-page-level.md
)
-
[
应用级变量的状态管理
](
ets-state-mgmt-application-level.md
)
-
[
应用级变量的状态管理
](
arkts-state-mgmt-application-level.md
)
-
[
动态构建UI元素
](
ets-dynamic-ui-elememt-building.md
)
-
[
动态构建UI元素
](
arkts-dynamic-ui-elememt-building.md
)
-
[
渲染控制
](
ets-rendering-control.md
)
-
[
渲染控制
](
arkts-rendering-control.md
)
-
[
使用限制与扩展
](
ets-restrictions-and-extensions.md
)
-
[
使用限制与扩展
](
arkts-restrictions-and-extensions.md
)
\ No newline at end of file
\ No newline at end of file
zh-cn/application-dev/quick-start/
e
ts-basic-ui-description.md
→
zh-cn/application-dev/quick-start/
ark
ts-basic-ui-description.md
浏览文件 @
d0a2b26d
# 基本UI描述
# 基本UI描述
e
TS通过装饰器@Component和@Entry装饰struct关键字声明的数据结构,构成一个自定义组件。自定义组件中提供了一个build函数,开发者需在该函数内以链式调用的方式进行基本的UI描述,UI描述的方法请参考
[
UI描述规范
](
#ui描述规范
)
。
Ark
TS通过装饰器@Component和@Entry装饰struct关键字声明的数据结构,构成一个自定义组件。自定义组件中提供了一个build函数,开发者需在该函数内以链式调用的方式进行基本的UI描述,UI描述的方法请参考
[
UI描述规范
](
#ui描述规范
)
。
## 基本概念
## 基本概念
...
@@ -29,7 +29,7 @@ eTS通过装饰器@Component和@Entry装饰struct关键字声明的数据结构
...
@@ -29,7 +29,7 @@ eTS通过装饰器@Component和@Entry装饰struct关键字声明的数据结构
-
@Preview:装饰struct, 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。
-
@Preview:装饰struct, 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行实时预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。
> **说明:** 在单个源文件中,最多可以使用10个@Preview装饰自定义组件,更多说明请参考[查看
e
TS组件预览效果](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820)。
> **说明:** 在单个源文件中,最多可以使用10个@Preview装饰自定义组件,更多说明请参考[查看
Ark
TS组件预览效果](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596#section146052489820)。
-
链式调用:以 "." 链式调用的方式配置UI结构及其属性、事件等。
-
链式调用:以 "." 链式调用的方式配置UI结构及其属性、事件等。
...
...
zh-cn/application-dev/quick-start/
e
ts-dynamic-ui-elememt-building.md
→
zh-cn/application-dev/quick-start/
ark
ts-dynamic-ui-elememt-building.md
浏览文件 @
d0a2b26d
# 动态构建UI元素
# 动态构建UI元素
前面章节介绍的是如何创建一个组件内部UI结构固定的自定义组件,为了满足开发者自定义组件内部UI结构的需求,
e
TS同时提供了动态构建UI元素的能力。
前面章节介绍的是如何创建一个组件内部UI结构固定的自定义组件,为了满足开发者自定义组件内部UI结构的需求,
Ark
TS同时提供了动态构建UI元素的能力。
## @Builder
## @Builder
...
@@ -192,7 +192,7 @@ struct CustomContainerUser {
...
@@ -192,7 +192,7 @@ struct CustomContainerUser {
## @Styles
## @Styles
e
TS为了避免开发者对重复样式的设置,通过@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置使用。@Styles装饰器将新的属性函数添加到基本组件上,如Text、Column、Button等。当前@Styles仅支持通用属性。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
Ark
TS为了避免开发者对重复样式的设置,通过@Styles装饰器可以将多条样式设置提炼成一个方法,直接在组件声明的位置使用。@Styles装饰器将新的属性函数添加到基本组件上,如Text、Column、Button等。当前@Styles仅支持通用属性。通过@Styles装饰器可以快速定义并复用组件的自定义样式。
@Styles可以定义在组件内或组件外,在组件外定义时需在方法前添加function关键字,组件内定义时不需要添加function关键字。
@Styles可以定义在组件内或组件外,在组件外定义时需在方法前添加function关键字,组件内定义时不需要添加function关键字。
...
...
zh-cn/application-dev/quick-start/arkts-get-started.md
0 → 100644
浏览文件 @
d0a2b26d
# 初识ArkTS语言
ArkTS是OpenHarmony优选的主力应用开发语言。ArkTS基于TypeScript(简称TS)语言扩展而来,是TS的超集。
-
ArkTS继承了TS的所有特性。
-
当前,ArkTS在TS基础上主要扩展了
[
声明式UI
](
arkts-basic-ui-description.md
)
能力,让开发者以更简洁、更自然的方式开发高性能应用。
当前扩展的声明式UI包括如下特性。
-
[
基本UI描述
](
arkts-basic-ui-description.md
)
:ArkTS定义了各种装饰器、自定义组件、UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发的主体。
-
[
状态管理
](
arkts-state-mgmt-page-level.md
)
:ArkTS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,也可以是全局范围内的传递,还可以是 跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
-
[
动态构建UI元素
](
arkts-dynamic-ui-elememt-building.md
)
:ArkTS提供了动态构建UI元素的能力,不仅可以自定义组件内部的UI结构,还可复用组件样式,扩展原生组件。
-
[
渲染控制
](
arkts-rendering-control.md
)
:ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
-
[
使用限制与扩展
](
arkts-restrictions-and-extensions.md
)
:ArkTS在使用过程中存在限制与约束,同时也扩展了双向绑定等能力。
-
未来,ArkTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、类型系统增强、分布式开发范式等更多特性。
下面我们以一个具体的示例来说明ArkTS的基本组成。如下图所示的代码示例,UI界面会两段文本和一个按钮,当开发者点击按钮时,文本内容会从'Hello World'变为 'Hello ArkUI'。
![
arkts-get-started
](
figures/arkts-get-started.png
)
这个示例中所包含的ArkTS声明式开发范式的基本组成说明如下:
-
装饰器: 用于装饰类、结构、方法以及变量,赋予其特殊的含义,如上述示例中@Entry、@Component和@State都是装饰器。 具体而言,@Component表示这是个自定义组件;@Entry则表示这是个入口组件;@State表示组件中的状态变量,这个状态变换会引起UI变更。
-
自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。
-
UI描述:声明式的方法来描述UI的结构,例如build()方法中的代码块。
-
内置组件:ArkTS中默认内置的基本组件和布局组件,开发者可以直接调用,如Column、Text、Divider、Button等。
-
属性方法:用于组件属性的配置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。
-
事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。
zh-cn/application-dev/quick-start/
e
ts-rendering-control.md
→
zh-cn/application-dev/quick-start/
ark
ts-rendering-control.md
浏览文件 @
d0a2b26d
# 渲染控制
# 渲染控制
e
TS也提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
Ark
TS也提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
## 条件渲染
## 条件渲染
...
...
zh-cn/application-dev/quick-start/
e
ts-restrictions-and-extensions.md
→
zh-cn/application-dev/quick-start/
ark
ts-restrictions-and-extensions.md
浏览文件 @
d0a2b26d
...
@@ -2,7 +2,7 @@
...
@@ -2,7 +2,7 @@
## 在生成器函数中的使用限制
## 在生成器函数中的使用限制
e
TS语言的使用在生成器函数中存在一定的限制:
Ark
TS语言的使用在生成器函数中存在一定的限制:
-
表达式仅允许在字符串(${expression})、if条件、ForEach的参数和组件的参数中使用;
-
表达式仅允许在字符串(${expression})、if条件、ForEach的参数和组件的参数中使用;
-
任何表达式都不能导致任何应用程序状态变量(@State、@Link、@Prop)的改变,否则会导致未定义和潜在不稳定的框架行为;
-
任何表达式都不能导致任何应用程序状态变量(@State、@Link、@Prop)的改变,否则会导致未定义和潜在不稳定的框架行为;
...
@@ -12,7 +12,7 @@ eTS语言的使用在生成器函数中存在一定的限制:
...
@@ -12,7 +12,7 @@ eTS语言的使用在生成器函数中存在一定的限制:
## 变量的双向绑定
## 变量的双向绑定
e
TS支持通过$$双向绑定变量,通常应用于状态值频繁改变的变量。
Ark
TS支持通过$$双向绑定变量,通常应用于状态值频繁改变的变量。
-
当前$$支持基础类型变量,以及@State、@Link和@Prop装饰的变量。
-
当前$$支持基础类型变量,以及@State、@Link和@Prop装饰的变量。
-
当前$$仅支持
[
bindPopup
](
../reference/arkui-ts/ts-universal-attributes-popup.md
)
属性的show参数和@State变量之间的渲染,Radio组件的checked属性。
-
当前$$仅支持
[
bindPopup
](
../reference/arkui-ts/ts-universal-attributes-popup.md
)
属性的show参数和@State变量之间的渲染,Radio组件的checked属性。
...
...
zh-cn/application-dev/quick-start/
e
ts-state-mgmt-application-level.md
→
zh-cn/application-dev/quick-start/
ark
ts-state-mgmt-application-level.md
浏览文件 @
d0a2b26d
文件已移动
zh-cn/application-dev/quick-start/
e
ts-state-mgmt-concepts.md
→
zh-cn/application-dev/quick-start/
ark
ts-state-mgmt-concepts.md
浏览文件 @
d0a2b26d
# 基本概念
# 基本概念
e
TS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之前,也可以时全局范围内的传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
Ark
TS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之前,也可以时全局范围内的传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
![](
figures/CoreSpec_figures_state-mgmt-overview.png
)
![](
figures/CoreSpec_figures_state-mgmt-overview.png
)
...
...
zh-cn/application-dev/quick-start/
e
ts-state-mgmt-page-level.md
→
zh-cn/application-dev/quick-start/
ark
ts-state-mgmt-page-level.md
浏览文件 @
d0a2b26d
文件已移动
zh-cn/application-dev/quick-start/deveco-studio-user-guide-for-openharmony.md
浏览文件 @
d0a2b26d
...
@@ -6,10 +6,10 @@ HUAWEI DevEco Studio For OpenHarmony(以下简称DevEco Studio)是基于Inte
...
@@ -6,10 +6,10 @@ HUAWEI DevEco Studio For OpenHarmony(以下简称DevEco Studio)是基于Inte
[
DevEco Studio
](
https://developer.harmonyos.com/cn/develop/deveco-studio/
)
作为支撑OpenHarmony应用和服务开发的IDE,具有以下能力特点:
[
DevEco Studio
](
https://developer.harmonyos.com/cn/develop/deveco-studio/
)
作为支撑OpenHarmony应用和服务开发的IDE,具有以下能力特点:
-
**高效智能代码编辑**
:支持
e
TS、JavaScript、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考
[
编辑器使用技巧
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-editor-usage-tips-0000001263360493
)
。
-
**高效智能代码编辑**
:支持
Ark
TS、JavaScript、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能,提升代码编写效率。更多详细信息,请参考
[
编辑器使用技巧
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-editor-usage-tips-0000001263360493
)
。
-
**低代码可视化开发**
:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果,所见即所得;同时支持卡片的零代码开发,降低开发门槛和提升界面开发效率。更多详细信息,请参考使用
[
低代码开发应用/服务
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652
)
。
-
**低代码可视化开发**
:丰富的UI界面编辑能力,支持自由拖拽组件和可视化数据绑定,可快速预览效果,所见即所得;同时支持卡片的零代码开发,降低开发门槛和提升界面开发效率。更多详细信息,请参考使用
[
低代码开发应用/服务
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-low-code-development-0000001218440652
)
。
-
**多端双向实时预览**
:支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览,便于快速查看代码运行效果。更多详细信息,请参考
[
使用预览器预览应用/服务界面效果
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596
)
。
-
**多端双向实时预览**
:支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览,便于快速查看代码运行效果。更多详细信息,请参考
[
使用预览器预览应用/服务界面效果
](
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-previewing-app-service-0000001218760596
)
。
-
**全新构建体系**
:通过Hvigor编译构建工具,一键完成应用及服务的编译和打包,更好地支持
e
TS/JS开发。
-
**全新构建体系**
:通过Hvigor编译构建工具,一键完成应用及服务的编译和打包,更好地支持
Ark
TS/JS开发。
-
**一站式信息获取**
:基于开发者了解、学习、开发、求助的用户旅程,在DevEco Studio中提供一站式的信息获取平台,高效支撑开发者活动。
-
**一站式信息获取**
:基于开发者了解、学习、开发、求助的用户旅程,在DevEco Studio中提供一站式的信息获取平台,高效支撑开发者活动。
-
**高效代码调试**
:提供TS、JS 、C/C++代码的断点设置,单步执行、变量查看等调试能力,提升应用及服务的问题分析效率。
-
**高效代码调试**
:提供TS、JS 、C/C++代码的断点设置,单步执行、变量查看等调试能力,提升应用及服务的问题分析效率。
...
...
zh-cn/application-dev/quick-start/ets-get-started.md
已删除
100644 → 0
浏览文件 @
b97f31e6
# 初识eTS语言
eTS(extended TypeScript)是OpenHarmony优选的主力应用开发语言。eTS基于TypeScript(简称TS)语言扩展而来,是TS的超集。
-
eTS继承了TS的所有特性。
-
当前,eTS在TS基础上主要扩展了
[
声明式UI
](
ets-basic-ui-description.md
)
能力,让开发者以更简洁、更自然的方式开发高性能应用。
当前扩展的声明式UI包括如下特性。
-
[
基本UI描述
](
ets-basic-ui-description.md
)
:eTS定义了各种装饰器、自定义组件、UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了UI开发的主体。
-
[
状态管理
](
ets-state-mgmt-page-level.md
)
:eTS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,也可以是全局范围内的传递,还可以是 跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
-
[
动态构建UI元素
](
ets-dynamic-ui-elememt-building.md
)
:eTS提供了动态构建UI元素的能力,不仅可以自定义组件内部的UI结构,还可复用组件样式,扩展原生组件。
-
[
渲染控制
](
ets-rendering-control.md
)
:eTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的部分内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
-
[
使用限制与扩展
](
ets-restrictions-and-extensions.md
)
:eTS在使用过程中存在限制与约束,同时也扩展了双向绑定等能力。
-
未来,eTS会结合应用开发/运行的需求持续演进,逐步提供并行和并发能力增强、类型系统增强、分布式开发范式等更多特性。
下面我们以一个具体的示例来说明eTS的基本组成。如下图所示的代码示例,UI界面会两段文本和一个按钮,当开发者点击按钮时,文本内容会从'Hello World'变为 'Hello ArkUI'。
![
ets-get-started
](
figures/ets-get-started.png
)
这个示例中所包含的eTS声明式开发范式的基本组成说明如下:
-
装饰器: 用于装饰类、结构、方法以及变量,赋予其特殊的含义,如上述示例中@Entry、@Component和@State都是装饰器。 具体而言,@Component表示这是个自定义组件;@Entry则表示这是个入口组件;@State表示组件中的状态变量,这个状态变换会引起UI变更。
-
自定义组件:可复用的UI单元,可组合其他组件,如上述被@Component装饰的struct Hello。
-
UI描述:声明式的方法来描述UI的结构,例如build()方法中的代码块。
-
内置组件:eTS中默认内置的基本组件和布局组件,开发者可以直接调用,如Column、Text、Divider、Button等。
-
属性方法:用于组件属性的配置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。
-
事件方法:用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。
zh-cn/application-dev/quick-start/figures/
e
ts-get-started.png
→
zh-cn/application-dev/quick-start/figures/
ark
ts-get-started.png
浏览文件 @
d0a2b26d
文件已移动
zh-cn/application-dev/reference/arkui-ts/Readme-CN.md
浏览文件 @
d0a2b26d
# 基于
e
TS的声明式开发范式
# 基于
Ark
TS的声明式开发范式
-
组件通用信息
-
组件通用信息
-
通用事件
-
通用事件
...
...
zh-cn/application-dev/ui/Readme-CN.md
浏览文件 @
d0a2b26d
# UI开发
# UI开发
-
[
方舟开发框架(ArkUI)概述
](
arkui-overview.md
)
-
[
方舟开发框架(ArkUI)概述
](
arkui-overview.md
)
-
UI开发(基于ArkTS的声明式开发范式)
-
UI开发(基于eTS的声明式开发范式)
-
[
概述
](
ui-ts-overview.md
)
-
[
概述
](
ui-ts-overview.md
)
-
框架说明
-
框架说明
-
文件组织
-
文件组织
...
...
zh-cn/application-dev/ui/ts-framework-directory.md
浏览文件 @
d0a2b26d
# 目录结构
# 目录结构
FA应用的
e
TS模块(entry/src/main)的典型开发目录结构如下:
FA应用的
Ark
TS模块(entry/src/main)的典型开发目录结构如下:
![
zh-cn_image_0000001182200571
](
figures/zh-cn_image_0000001182200571.png
)
![
zh-cn_image_0000001182200571
](
figures/zh-cn_image_0000001182200571.png
)
...
@@ -10,7 +10,7 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
...
@@ -10,7 +10,7 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下:
**目录结构中文件分类如下:**
**目录结构中文件分类如下:**
.ets结尾的
eTS(extended TypeScript)
文件,用于描述UI布局、样式、事件交互和页面逻辑。
.ets结尾的
ArkTS
文件,用于描述UI布局、样式、事件交互和页面逻辑。
**各个文件夹和文件的作用:**
**各个文件夹和文件的作用:**
...
...
zh-cn/application-dev/ui/ts-pixel-units.md
浏览文件 @
d0a2b26d
...
@@ -78,4 +78,4 @@ struct Example {
...
@@ -78,4 +78,4 @@ struct Example {
基于像素转换,有以下相关实例可供参考:
基于像素转换,有以下相关实例可供参考:
-
[
像素转换(
e
TS)(API9)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelUnitsDemo
)
-
[
像素转换(
Ark
TS)(API9)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/PixelUnitsDemo
)
zh-cn/application-dev/ui/ui-ts-building-data-model.md
浏览文件 @
d0a2b26d
...
@@ -11,7 +11,7 @@
...
@@ -11,7 +11,7 @@
!
[
zh-cn_image_0000001195119619
](
figures/zh-cn_image_0000001195119619.png
)
!
[
zh-cn_image_0000001195119619
](
figures/zh-cn_image_0000001195119619.png
)
2.
定义食物数据的存储模型FoodData和枚举变量Category,FoodData类包含食物id、名称(name)、分类(category)、图片(image)、热量(calories)、蛋白质(protein)、脂肪(fat)、碳水(carbohydrates)和维生素C(vitaminC)属性。
2.
定义食物数据的存储模型FoodData和枚举变量Category,FoodData类包含食物id、名称(name)、分类(category)、图片(image)、热量(calories)、蛋白质(protein)、脂肪(fat)、碳水(carbohydrates)和维生素C(vitaminC)属性。
e
TS语言是在ts语言的基础上的扩展,同样支持ts语法。
Ark
TS语言是在ts语言的基础上的扩展,同样支持ts语法。
```
```
enum Category {
enum Category {
...
@@ -87,4 +87,4 @@
...
@@ -87,4 +87,4 @@
## 相关实例
## 相关实例
针对构建食物分类列表页面和食物详情页,有以下相关实例可供参考:
针对构建食物分类列表页面和食物详情页,有以下相关实例可供参考:
-
[
DefiningPageLayoutAndConnection:页面布局和连接(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection
)
-
[
DefiningPageLayoutAndConnection:页面布局和连接(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection
)
zh-cn/application-dev/ui/ui-ts-creating-simple-page.md
浏览文件 @
d0a2b26d
...
@@ -445,7 +445,7 @@
...
@@ -445,7 +445,7 @@
5.
使用自定义构造函数
\@
Builder简化代码。可以发现,每个成分表中的成分单元其实都是一样的UI结构。
5.
使用自定义构造函数
\@
Builder简化代码。可以发现,每个成分表中的成分单元其实都是一样的UI结构。
!
[
zh-cn_image_0000001169599582
](
figures/zh-cn_image_0000001169599582.png
)
!
[
zh-cn_image_0000001169599582
](
figures/zh-cn_image_0000001169599582.png
)
当前对每个成分单元都进行了声明,造成了代码的重复和冗余。可以使用
\@
Builder来构建自定义方法,抽象出相同的UI结构声明。
\@
Builder修饰的方法和Component的build方法都是为了声明一些UI渲染结构,遵循一样的
e
TS语法。开发者可以定义一个或者多个
\@
Builder修饰的方法,但Component的build方法必须只有一个。
当前对每个成分单元都进行了声明,造成了代码的重复和冗余。可以使用
\@
Builder来构建自定义方法,抽象出相同的UI结构声明。
\@
Builder修饰的方法和Component的build方法都是为了声明一些UI渲染结构,遵循一样的
Ark
TS语法。开发者可以定义一个或者多个
\@
Builder修饰的方法,但Component的build方法必须只有一个。
在ContentTable内声明
\@
Builder修饰的IngredientItem方法,用于声明分类名、成分名称和成分含量UI描述。
在ContentTable内声明
\@
Builder修饰的IngredientItem方法,用于声明分类名、成分名称和成分含量UI描述。
...
@@ -551,6 +551,6 @@
...
@@ -551,6 +551,6 @@
针对创建简单视图,有以下示例工程可供参考:
针对创建简单视图,有以下示例工程可供参考:
-
[
`BuildCommonView`:创建简单视图(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView
)
-
[
`BuildCommonView`:创建简单视图(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BuildCommonView
)
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
zh-cn/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @
d0a2b26d
...
@@ -374,6 +374,6 @@ struct FlexExample {
...
@@ -374,6 +374,6 @@ struct FlexExample {
针对弹性布局开发,有以下相关实例可供参考:
针对弹性布局开发,有以下相关实例可供参考:
-
[
弹性布局(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts
)
-
[
弹性布局(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/FlowLayoutEts
)
-
[
ArkUI常用布局容器对齐方式(
e
TS)(API9)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo
)
-
[
ArkUI常用布局容器对齐方式(
Ark
TS)(API9)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/LayoutAlignmentDemo
)
zh-cn/application-dev/ui/ui-ts-layout-mediaquery.md
浏览文件 @
d0a2b26d
...
@@ -154,5 +154,5 @@ listener.on('change', onPortrait)
...
@@ -154,5 +154,5 @@ listener.on('change', onPortrait)
针对媒体查询开发,有以下相关实例可供参考:
针对媒体查询开发,有以下相关实例可供参考:
-
[
`MediaQuery`:媒体查询(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery
)
-
[
`MediaQuery`:媒体查询(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MediaQuery
)
zh-cn/application-dev/ui/ui-ts-overview.md
浏览文件 @
d0a2b26d
# 概述
# 概述
基于
e
TS的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用的UI开发框架,支持开发者高效的构建跨设备应用UI界面。
基于
Ark
TS的声明式开发范式的方舟开发框架是一套开发极简、高性能、跨设备应用的UI开发框架,支持开发者高效的构建跨设备应用UI界面。
## 基础能力
## 基础能力
使用基于
e
TS的声明式开发范式的方舟开发框架,采用更接近自然语义的编程方式,让开发者可以直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。开发框架不仅从组件、动效和状态管理三个维度来提供UI能力,还提供了系统能力接口,实现系统能力的极简调用。
使用基于
Ark
TS的声明式开发范式的方舟开发框架,采用更接近自然语义的编程方式,让开发者可以直观地描述UI界面,不必关心框架如何实现UI绘制和渲染,实现极简高效开发。开发框架不仅从组件、动效和状态管理三个维度来提供UI能力,还提供了系统能力接口,实现系统能力的极简调用。
请参考
[
基于
e
TS的声明式开发范式API
](
../reference/arkui-ts/ts-universal-events-click.md
)
文档,全面地了解组件,更好地开发应用。
请参考
[
基于
Ark
TS的声明式开发范式API
](
../reference/arkui-ts/ts-universal-events-click.md
)
文档,全面地了解组件,更好地开发应用。
-
**开箱即用的组件**
-
**开箱即用的组件**
...
@@ -22,12 +22,12 @@
...
@@ -22,12 +22,12 @@
-
**状态与数据管理**
-
**状态与数据管理**
状态数据管理作为基于
e
TS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。
状态数据管理作为基于
Ark
TS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。
-
**系统能力接口**
-
**系统能力接口**
使用基于
e
TS的声明式开发范式的方舟开发框架,还封装了丰富的系统能力接口,开发者可以通过简单的接口调用,实现从UI设计到系统能力调用的极简开发。
使用基于
Ark
TS的声明式开发范式的方舟开发框架,还封装了丰富的系统能力接口,开发者可以通过简单的接口调用,实现从UI设计到系统能力调用的极简开发。
## 整体架构
## 整体架构
...
@@ -59,54 +59,54 @@
...
@@ -59,54 +59,54 @@
## 相关实例
## 相关实例
基于
e
TS的声明式开发范式的方舟开发框架,有以下相关实例可供参考:
基于
Ark
TS的声明式开发范式的方舟开发框架,有以下相关实例可供参考:
-
[
`Canvas`:画布组件(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Canvas
)
-
[
`Canvas`:画布组件(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Canvas
)
-
[
`Drag`:拖拽事件(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Drag
)
-
[
`Drag`:拖拽事件(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Drag
)
-
[
`ArkUIAnimation`:动画(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/ArkUIAnimation
)
-
[
`ArkUIAnimation`:动画(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/ArkUIAnimation
)
-
[
`Xcomponent`:XComponent(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/XComponent
)
-
[
`Xcomponent`:XComponent(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/XComponent
)
-
[
`MouseEvent`:鼠标事件(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MouseEvent
)
-
[
`MouseEvent`:鼠标事件(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/MouseEvent
)
-
[
`Gallery`:组件集合(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Gallery
)
-
[
`Gallery`:组件集合(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Gallery
)
-
[
`BringApp`:拉起系统应用(
e
TS)(API8)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BringApp
)
-
[
`BringApp`:拉起系统应用(
Ark
TS)(API8)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/BringApp
)
-
[
`Chat`:聊天示例应用(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/AppSample/Chat
)
-
[
`Chat`:聊天示例应用(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/AppSample/Chat
)
-
[
`Shopping`:购物示例应用(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/AppSample/Shopping
)
-
[
`Shopping`:购物示例应用(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/AppSample/Shopping
)
-
[
`Lottie`:Lottie(
e
TS)(API8)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Lottie
)
-
[
`Lottie`:Lottie(
Ark
TS)(API8)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Lottie
)
-
[
`Clock`:简单时钟(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/Preset/Clock
)
-
[
`Clock`:简单时钟(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/Preset/Clock
)
-
[
`Flybird`:小鸟避障游戏(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ResourcesSchedule/Flybird
)
-
[
`Flybird`:小鸟避障游戏(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ResourcesSchedule/Flybird
)
-
[
`AdaptiveCapabilities`:多设备自适应能力(
e
TS)(API9)
](
https://gitee.com/openharmony/app_samples/tree/master/MultiDeviceAppDev/AdaptiveCapabilities
)
-
[
`AdaptiveCapabilities`:多设备自适应能力(
Ark
TS)(API9)
](
https://gitee.com/openharmony/app_samples/tree/master/MultiDeviceAppDev/AdaptiveCapabilities
)
-
[
`Game2048`:2048游戏(
e
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Game2048
)
-
[
`Game2048`:2048游戏(
Ark
TS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Game2048
)
-
[
`TransitionAnimation`:转场动画(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/TransitionAnimation
)
-
[
`TransitionAnimation`:转场动画(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/TransitionAnimation
)
-
[
`PatternLock`:图案密码锁组件(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/PatternLock
)
-
[
`PatternLock`:图案密码锁组件(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/PatternLock
)
-
[
`Search`:Search组件(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Search
)
-
[
`Search`:Search组件(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/Search
)
-
[
`QRCode`:二维码(
e
TS)(API9)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/QRCode
)
-
[
`QRCode`:二维码(
Ark
TS)(API9)(Full SDK)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/QRCode
)
-
[
极简声明式UI范式(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts
)
-
[
极简声明式UI范式(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts
)
-
[
购物应用(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts
)
-
[
购物应用(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/ShoppingEts
)
-
[
转场动画的使用(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimtaionEts
)
-
[
转场动画的使用(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/TransitionAnimtaionEts
)
-
[
基础组件Slider的使用(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderApplicationEts
)
-
[
基础组件Slider的使用(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SliderApplicationEts
)
-
[
弹窗(
e
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts
)
-
[
弹窗(
Ark
TS)(API8)
](
https://gitee.com/openharmony/codelabs/tree/master/ETSUI/CustomDialogEts
)
-
[
`UpgradePopup`:自定义弹窗(
e
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/UpgradePopup
)
-
[
`UpgradePopup`:自定义弹窗(
Ark
TS)(API9)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/UpgradePopup
)
-
[
CustomComponent:组件化(eTS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/CustomComponent
)
-
[
CustomComponent:组件化(ArkTS)(API8)
](
https://gitee.com/openharmony/applications_app_samples/tree/master/ETSUI/CustomComponent
)
\ No newline at end of file
\ No newline at end of file
zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md
浏览文件 @
d0a2b26d
...
@@ -267,6 +267,6 @@
...
@@ -267,6 +267,6 @@
针对页面布局与连接,有以下示例工程可供参考:
针对页面布局与连接,有以下示例工程可供参考:
-
[
`DefiningPageLayoutAndConnection`:页面布局和连接(
e
TS)(API8)
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection
)
-
[
`DefiningPageLayoutAndConnection`:页面布局和连接(
Ark
TS)(API8)
](
https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection
)
本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。
本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录