diff --git a/zh-cn/application-dev/internationalization/i18n-guidelines.md b/zh-cn/application-dev/internationalization/i18n-guidelines.md index 28d64fe9b7cc727fc1bdca1b83740e7de7337cb1..ac8c3b504554aa37e5931a589d4304b333740eac 100644 --- a/zh-cn/application-dev/internationalization/i18n-guidelines.md +++ b/zh-cn/application-dev/internationalization/i18n-guidelines.md @@ -89,15 +89,15 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.i18n | getCalendar(locale: string, type?: string): Calendar8+ | 获取指定locale和type的日历对象。 | -| ohos.i18n | setTime(date: Date)8+ | 设置日历对象内部的时间日期。 | -| ohos.i18n | setTime(time: number)8+ | 设置日历对象内部的时间日期。 | -| ohos.i18n | set(year: number, month: number, date: number, hour?: number, minute?: number, second?: number)8+ | 设置日历对象的年、月、日、时、分、秒。 | -| ohos.i18n | setTimeZone(timezone: string)8+ | 设置日历对象的时区。 | +| ohos.i18n | setTime(date: Date): void8+ | 设置日历对象内部的时间日期。 | +| ohos.i18n | setTime(time: number): void8+ | 设置日历对象内部的时间日期。 | +| ohos.i18n | set(year: number, month: number, date: number, hour?: number, minute?: number, second?: number): void8+ | 设置日历对象的年、月、日、时、分、秒。 | +| ohos.i18n | setTimeZone(timezone: string): void8+ | 设置日历对象的时区。 | | ohos.i18n | getTimeZone(): string8+ | 获取日历对象的时区。 | | ohos.i18n | getFirstDayOfWeek(): number8+ | 获取日历对象的一周起始日。 | -| ohos.i18n | setFirstDayOfWeek(value: number)8+ | 设置日历对象的一周起始日。 | +| ohos.i18n | setFirstDayOfWeek(value: number): void8+ | 设置日历对象的一周起始日。 | | ohos.i18n | getMinimalDaysInFirstWeek(): number8+ | 获取一年中第一周的最小天数。 | -| ohos.i18n | setMinimalDaysInFirstWeek(value: number)8+ | 设置一年中第一周的最小天数。 | +| ohos.i18n | setMinimalDaysInFirstWeek(value: number): void8+ | 设置一年中第一周的最小天数。 | | ohos.i18n | getDisplayName(locale: string): string8+ | 获取日历对象的本地化表示。 | | ohos.i18n | isWeekend(date?: Date): boolean8+ | 判断给定的日期是否在日历中是周末。 | @@ -251,7 +251,7 @@ | -------- | -------- | -------- | | ohos.i18n | getInstance(locale?: string): IndexUtil8+ | 实例化字母表索引对象。 | | ohos.i18n | getIndexList(): Array<string>8+ | 获取当前Locale的索引列表。 | -| ohos.i18n | addLocale(locale: string)8+ | 将新的Locale对应的索引加入当前索引列表。 | +| ohos.i18n | addLocale(locale: string): void8+ | 将新的Locale对应的索引加入当前索引列表。 | | ohos.i18n | getIndex(text: string): string8+ | 获取text对应的索引。 | @@ -298,7 +298,7 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.i18n | getLineInstance(locale: string): BreakIterator8+ | 实例化断行对象。 | -| ohos.i18n | setLineBreakText(text: string)8+ | 设置要处理的文本。 | +| ohos.i18n | setLineBreakText(text: string): void8+ | 设置要处理的文本。 | | ohos.i18n | getLineBreakText(): string8+ | 获取要处理的文本。 | | ohos.i18n | current(): number8+ | 获取当前断行对象在处理文本的位置。 | | ohos.i18n | first(): number8+ | 将断行对象设置到第一个可断句的分割点。 | diff --git a/zh-cn/application-dev/internationalization/intl-guidelines.md b/zh-cn/application-dev/internationalization/intl-guidelines.md index ca13f2f31612bdd8d15401e0d9a3d12a0261b700..7f6b0a9f3535b0d5548bd2d522900df0a676a368 100644 --- a/zh-cn/application-dev/internationalization/intl-guidelines.md +++ b/zh-cn/application-dev/internationalization/intl-guidelines.md @@ -44,7 +44,7 @@ ``` 4. 最小化区域信息 - 调用minimize方法来最大化区域信息,即当存在脚本与地区信息时,对其进行删除。 + 调用minimize方法来最小化区域信息,即当存在脚本与地区信息时,对其进行删除。 ``` var minimizedLocale = localeObj.minimize(); @@ -61,7 +61,7 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.intl | constructor()8+ | 创建日期时间格式化对象。 | -| ohos.intl | constructor(locale: string \| Array, options?: DateTimeOptions) | 创建日期时间格式化对象,并设置提供的Locale和格式化相关属性。 | +| ohos.intl | constructor(locale: string \| Array<string>, options?: DateTimeOptions) | 创建日期时间格式化对象,并设置提供的Locale和格式化相关属性。 | | ohos.intl | format(date: Date): string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算日期时间的格式化表示。 | | ohos.intl | formatRange(startDate: Date, endDate: Date): string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算时间段的格式化表示。 | | ohos.intl | resolvedOptions(): DateTimeOptions | 获取DateTimeFormat对象的相关属性。 | @@ -119,7 +119,7 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.intl | constructor()8+ | 创建数字格式化对象。 | -| ohos.intl | constructor(locale: string \| Array, options?: NumberOptions) | 创建数字格式化对象,并设置提供的locale和格式化相关属性。 | +| ohos.intl | constructor(locale: string \| Array<string>, options?: NumberOptions) | 创建数字格式化对象,并设置提供的locale和格式化相关属性。 | | ohos.intl | format(number: number): string | 依据NumberFormat对象的Locale及其他格式化属性,计算数字的格式化表示。 | | ohos.intl | resolvedOptions(): NumberOptions | 获取NumberFormat对象的相关属性。 | @@ -167,7 +167,7 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.intl | constructor()8+ | 创建排序对象。 | -| ohos.intl | constructor(locale: string \| Array, options?: CollatorOptions)8+ | 创建排序对象,并设置提供的locale和其他相关属性。 | +| ohos.intl | constructor(locale: string \| Array<string>, options?: CollatorOptions)8+ | 创建排序对象,并设置提供的locale和其他相关属性。 | | ohos.intl | compare(first: string, second: string): number8+ | 依据排序对象的Locale及其属性,计算两个字符串的比较结果。 | | ohos.intl | resolvedOptions(): CollatorOptions8+ | 获取排序对象的相关属性。 | @@ -215,7 +215,7 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.intl | constructor()8+ | 创建单复数对象。 | -| ohos.intl | constructor(locale: string \| Array, options?: PluralRulesOptions)8+ | 创建单复数对象,并设置提供的locale和其他相关属性。 | +| ohos.intl | constructor(locale: string \| Array<string>, options?: PluralRulesOptions)8+ | 创建单复数对象,并设置提供的locale和其他相关属性。 | | ohos.intl | select(n: number): string8+ | 依据单复数对象的Locale及其他格式化属性,计算数字的单复数类别。 | @@ -254,9 +254,9 @@ | 模块 | 接口名称 | 描述 | | -------- | -------- | -------- | | ohos.intl | constructor()8+ | 创建相对时间格式化对象。 | -| ohos.intl | constructor(locale: string \| Array, options?: RelativeTimeFormatInputOptions)8+ | 创建相对时间格式化对象,并设置提供的locale和格式化相关属性。 | +| ohos.intl | constructor(locale: string \| Array<string>, options?: RelativeTimeFormatInputOptions)8+ | 创建相对时间格式化对象,并设置提供的locale和格式化相关属性。 | | ohos.intl | format(value: number, unit: string): string8+ | 依据相对时间格式化对象的Locale及其他格式化属性,计算相对时间的格式化表示。 | -| ohos.intl | formatToParts(value: number, unit: string): Array8+ | 依据相对时间格式化对象的Locale及其他格式化属性,返回相对时间格式化表示的各个部分。 | +| ohos.intl | formatToParts(value: number, unit: string): Array<object>8+ | 依据相对时间格式化对象的Locale及其他格式化属性,返回相对时间格式化表示的各个部分。 | | ohos.intl | resolvedOptions(): RelativeTimeFormatResolvedOptions8+ | 获取相对时间格式化对象的相关属性。 | @@ -270,7 +270,7 @@ var relativeTimeFormat = new intl.RelativeTimeFormat(); ``` - 另一种方法是使用开发者提供的Locale和格式化参数来创建数字格式化对象。其中,格式化参数是可选的,完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。 + 另一种方法是使用开发者提供的Locale和格式化参数来创建相对时间格式化对象。其中,格式化参数是可选的,完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。 ``` var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"}; @@ -294,7 +294,7 @@ var formatResult = relativeTimeFormat.formatToParts(number, unit); ``` -4. 相对时间格式化对象的相关属性 +4. 访问相对时间格式化对象的相关属性 RelativeTimeFormat的resolvedOptions方法会返回一个对象,该对象包含了RelativeTimeFormat对象的所有相关属性及其值,完整的属性列表参见[ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md)。 ``` diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md index a1c17d75eb8b521065ef510de06a8d37a84366ed..7631ad19140ff57217b51b3f94fc825f1f611a51 100644 --- a/zh-cn/application-dev/reference/apis/Readme-CN.md +++ b/zh-cn/application-dev/reference/apis/Readme-CN.md @@ -83,16 +83,16 @@ - [事件注入](js-apis-inputeventclient.md) - 基本功能 - [应用上下文](js-apis-system-app.md) - - [日志打印](js-apis-basic-features-logs.md) + - [日志打印](js-apis-logs.md) - [页面路由](js-apis-router.md) - [弹窗](js-apis-prompt.md) - [应用配置](js-apis-system-configuration.md) - - [定时器](js-apis-basic-features-timer.md) + - [定时器](js-apis-timer.md) - [锁屏管理](js-apis-screen-lock.md) - [设置系统时间](js-apis-system-time.md) - [壁纸](js-apis-wallpaper.md) - [剪贴板](js-apis-pasteboard.md) - - [动画](js-apis-basic-features-animator.md) + - [动画](js-apis-animator.md) - [WebGL](js-apis-webgl.md) - [WebGL2](js-apis-webgl2.md) - [屏幕截图](js-apis-screenshot.md) diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-animator.md b/zh-cn/application-dev/reference/apis/js-apis-animator.md similarity index 100% rename from zh-cn/application-dev/reference/apis/js-apis-basic-features-animator.md rename to zh-cn/application-dev/reference/apis/js-apis-animator.md diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md b/zh-cn/application-dev/reference/apis/js-apis-logs.md similarity index 97% rename from zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md rename to zh-cn/application-dev/reference/apis/js-apis-logs.md index 0c6afae60d9aed4e0b2e8873510279255bb25928..7d674cff693aca7487a509296c378803051e5d8a 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-basic-features-logs.md +++ b/zh-cn/application-dev/reference/apis/js-apis-logs.md @@ -1,15 +1,5 @@ # 日志打印 - -## 导入模块 - -无需导入。 - -## 权限列表 - -无 - - ## console.debug debug(message: string): void diff --git a/zh-cn/application-dev/reference/apis/js-apis-basic-features-timer.md b/zh-cn/application-dev/reference/apis/js-apis-timer.md similarity index 98% rename from zh-cn/application-dev/reference/apis/js-apis-basic-features-timer.md rename to zh-cn/application-dev/reference/apis/js-apis-timer.md index 8011798edc241d42c0c59ed0cdbcda016146bb8f..16ce5e89fad5fc78d54ed02680f98782374a48cb 100644 --- a/zh-cn/application-dev/reference/apis/js-apis-basic-features-timer.md +++ b/zh-cn/application-dev/reference/apis/js-apis-timer.md @@ -1,16 +1,6 @@ # 定时器 -## 导入模块 - -无需导入。 - - -## 权限列表 - -无 - - ## setTimeout setTimeout(handler[,delay[,…args]]): number diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index f77cfe051697499a0d8125964a55a5a537c28bed..ec0630d641e9a0d17e61b4fa33b63a3fad9f9e49 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -46,7 +46,7 @@ | **开发范式名称** | **语言生态** | **UI更新方式** | **适用场景** | **适用人群** | | -------- | -------- | -------- | -------- | -------- | -| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的类小程序应用和卡片 | Web前端开发人员 | +| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 | | 声明式开发范式 | 扩展的TS语言(eTS) | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | diff --git a/zh-cn/application-dev/ui/js-framework-file.md b/zh-cn/application-dev/ui/js-framework-file.md index 9123b0378d49eb7213bc6411172a39f8f78d962a..2a1c64f12cb71c4ec32d93fb43871b13137be50e 100644 --- a/zh-cn/application-dev/ui/js-framework-file.md +++ b/zh-cn/application-dev/ui/js-framework-file.md @@ -9,6 +9,7 @@ JS FA应用的JS模块(entry/src/main/js/module)的典型开发目录结构如 ![zh-cn_image_0000001127284926](figures/zh-cn_image_0000001127284926.png) **图2** 多实例资源共享目录结构 + ![zh-cn_image_0000001173164777](figures/zh-cn_image_0000001173164777.png) 目录结构中文件分类如下: diff --git a/zh-cn/application-dev/ui/js-framework-syntax-css.md b/zh-cn/application-dev/ui/js-framework-syntax-css.md index 40d7579eaedb5c4f96acfcdf48007b98ff1f7e50..a9937650333f75338257615a82d5c6cb840b8b47 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-css.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-css.md @@ -4,11 +4,12 @@ CSS是描述HML页面结构的样式语言。所有组件均存在系统默认 ## 尺寸单位 -1. 逻辑像素px(文档中以<length>表示): - 1. 默认屏幕具有的逻辑宽度为720px(配置见[配置文件](js-framework-js-tag.md)中的window小节),实际显示时会将页面布局缩放至屏幕实际宽度,如100px在实际宽度为1440物理像素的屏幕上,实际渲染为200物理像素(从720px向1440物理像素,所有尺寸放大2倍)。 - 2. 额外配置autoDesignWidth为true时(配置见[配置文件](js-framework-js-tag.md)中的window小节),逻辑像素px将按照屏幕密度进行缩放,如100px在屏幕密度为3的设备上,实际渲染为300物理像素。应用需要适配多种设备时,建议采用此方法。 +- 逻辑像素px(文档中以<length>表示): -2. 百分比(文档中以<percentage>表示):表示该组件占父组件尺寸的百分比,如组件的width设置为50%,代表其宽度为父组件的50%。 + - 默认屏幕具有的逻辑宽度为720px(配置见[配置文件](js-framework-js-tag.md)中的window小节),实际显示时会将页面布局缩放至屏幕实际宽度,如100px在实际宽度为1440物理像素的屏幕上,实际渲染为200物理像素(从720px向1440物理像素,所有尺寸放大2倍)。 + - 额外配置autoDesignWidth为true时(配置见[配置文件](js-framework-js-tag.md)中的window小节),逻辑像素px将按照屏幕密度进行缩放,如100px在屏幕密度为3的设备上,实际渲染为300物理像素。应用需要适配多种设备时,建议采用此方法。 + +- 百分比(文档中以<percentage>表示):表示该组件占父组件尺寸的百分比,如组件的width设置为50%,代表其宽度为父组件的50%。 ## 样式导入 diff --git a/zh-cn/application-dev/ui/js-framework-syntax-hml.md b/zh-cn/application-dev/ui/js-framework-syntax-hml.md index 4adc4bf1bc8443fef15ac7d5e36cf9c08d4c5fb7..b4fc9e6a3ce4bc85dd6246ad823cf436f7115aa9 100644 --- a/zh-cn/application-dev/ui/js-framework-syntax-hml.md +++ b/zh-cn/application-dev/ui/js-framework-syntax-hml.md @@ -184,7 +184,7 @@ Touch触摸类事件支持捕获,捕获阶段位于冒泡阶段之前,捕获
-``` + ``` ``` // xxx.js @@ -215,6 +215,7 @@ Touch触摸类事件支持捕获,捕获阶段位于冒泡阶段之前,捕获 {{index}}.{{value.name}} + ``` ``` diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md index b9582c1867cd31b214bdb36e9f5336d10ffce2f4..c9042bf1835da2afe251cdfc74f02d4535162d40 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-environment.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-environment.md @@ -1,6 +1,6 @@ # 环境变量 -**Environment**是框架在应用程序启动时创建的单例对象,它为**AppStorage**提供了一系列应用程序需要的环境状态属性,这些属性描述了应用程序运行的设备环境。**Environment**及其属性是不可变的,所有属性值类型均为简单类型。如下示例展示了从**Environment**获取语音环境: +Environment是框架在应用程序启动时创建的单例对象,它为AppStorage提供了一系列应用程序需要的环境状态属性,这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的,所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境: ``` @@ -8,13 +8,12 @@ Environment.EnvProp("accessibilityEnabled", "default"); var enable = AppStorageGet("accessibilityEnabled"); ``` - -**accessibilityEnabled**是**Environment**提供默认系统变量识别符。首先需要将对应系统属性绑定到AppStorage中,再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。 +accessibilityEnabled是Environment提供默认系统变量识别符。首先需要将对应系统属性绑定到AppStorage中,再通过AppStorage中的方法或者装饰器访问对应系统的属性数据。 ## Environment接口 -| **key** | 参数 | 返回值 | **说明** | +| key | 参数 | 返回值 | 说明 | | -------- | -------- | -------- | -------- | | EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中,建议在app启动时使用此接口。如果该属性在AppStorage已存在,返回false。请勿使用AppStorage中的变量,在调用此方法关联环境变量。 | | EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 | @@ -23,7 +22,7 @@ var enable = AppStorageGet("accessibilityEnabled"); ## Environment内置的环境变量 -| **key** | **类型** | **说明** | +| key | 类型 | 说明 | | -------- | -------- | -------- | | accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 | | colorMode | ColorMode | 深浅色模式,可选值为:
- ColorMode.LIGHT:浅色模式;
- ColorMode.DARK:深色模式。 | diff --git a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md index b3aff456d882863047e7dced6230e791716e62d4..43a1fe25b4c5a87010b9ac00875f5b747af66439 100644 --- a/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-apis-persistentstorage.md @@ -1,6 +1,6 @@ # 持久化数据管理 -方舟开发框架通过**PersistentStorage**类提供了一些静态方法用来管理应用持久化数据,可以将特定标记的持久化数据链接到AppStorage中,并由AppStorage接口访问对应持久化数据,或者通过@StorageLink装饰器来访问对应key的变量。 +方舟开发框架通过PersistentStorage类提供了一些静态方法用来管理应用持久化数据,可以将特定标记的持久化数据链接到AppStorage中,并由AppStorage接口访问对应持久化数据,或者通过@StorageLink装饰器来访问对应key的变量。 | 方法 | 参数说明 | 返回值 | 定义 | diff --git a/zh-cn/application-dev/ui/ts-application-states-appstorage.md b/zh-cn/application-dev/ui/ts-application-states-appstorage.md index db91c87499216d52b317ef2c404da26d75e4821f..81494d5293b6e5499d4326223b79b9511a8fc0fa 100644 --- a/zh-cn/application-dev/ui/ts-application-states-appstorage.md +++ b/zh-cn/application-dev/ui/ts-application-states-appstorage.md @@ -1,15 +1,15 @@ # 应用程序的数据存储 -**AppStorage**是应用程序中的单例对象,由UI框架在应用程序启动时创建,在应用程序退出时销毁,为应用程序范围内的可变状态属性提供中央存储。**AppStorage**包含整个应用程序中需要访问的所有状态属性,只要应用程序保持运行,**AppStorage**就会保存所有属性及属性值,属性值可以通过唯一的键值进行访问。 +AppStorage是应用程序中的单例对象,由UI框架在应用程序启动时创建,在应用程序退出时销毁,为应用程序范围内的可变状态属性提供中央存储。AppStorage包含整个应用程序中需要访问的所有状态属性,只要应用程序保持运行,AppStorage就会保存所有属性及属性值,属性值可以通过唯一的键值进行访问。 -UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行同步,应用业务逻辑的实现也可以通过接口访问**AppStorage**。 +UI组件可以通过装饰器将应用程序状态数据与AppStorage进行同步,应用业务逻辑的实现也可以通过接口访问AppStorage。 -**AppStorage**的选择状态属性可以与不同的数据源或数据接收器同步,这些数据源和接收器可以是设备上的本地或远程,并具有不同的功能,如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 +AppStorage的选择状态属性可以与不同的数据源或数据接收器同步,这些数据源和接收器可以是设备上的本地或远程,并具有不同的功能,如数据持久性。这样的数据源和接收器可以独立于UI在业务逻辑中实现。 -默认情况下,**AppStorage**中的属性是可变的,**AppStorage**还可使用不可变(只读)属性。 +默认情况下,AppStorage中的属性是可变的,AppStorage还可使用不可变(只读)属性。 ## AppStorage接口 @@ -18,9 +18,9 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行 | -------- | -------- | -------- | -------- | | SetAndLink | key: string,
defaultValue: T | @Link | 与Link接口类似,如果当前的key保存于AppStorage,则返回该key对应的value。如果该key未被创建,则创建一个对应default值的Link返回。 | | Set | key: string,
newValue: T | void | 对已保存的key值,替换其value值。 | -| Link | key: string | @Link | 如果存在具有给定键的数据,则返回到此属性的双向数据绑定,该双向绑定意味着变量或者组件对数据的更改将同步到**AppStorage**,通过**AppStorage**对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读,则返回**undefined**。 | +| Link | key: string | @Link | 如果存在具有给定键的数据,则返回到此属性的双向数据绑定,该双向绑定意味着变量或者组件对数据的更改将同步到AppStorage,通过AppStorage对数据的修改将同步到变量或者组件。如果具有此键的属性不存在或属性为只读,则返回undefined。 | | SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似,如果当前的key保存于AppStorage,则返回该key对应的value。如果该key未被创建,则创建一个对应default值的Prop返回。 | -| Prop | key: string | @Prop | 如果存在具有给定键的属性,则返回此属性的单向数据绑定。该单向绑定意味着只能通过**AppStorage**将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量,适用于可变和不可变的状态属性,如果具有此键的属性不存在则返回**undefined**。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> prop方法对应的属性值类型为简单类型。 | +| Prop | key: string | @Prop | 如果存在具有给定键的属性,则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量,适用于可变和不可变的状态属性,如果具有此键的属性不存在则返回undefined。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> prop方法对应的属性值类型为简单类型。 | | SetOrCreate | key: string,
newValue: T | boolean | 如果已存在与给定键名字相同的属性,如果此属性可以被更改则替换其value值且返回true,否则不替换且返回false。
如果不存在存在与给定键名字相同的属性, 则创建一个键为key, 值为newValue的属性,属性值不支持null和undefined。 | | Get | key: string | T或undefined | 通过此接口获取对应key值的value。 | | Has | propName: string | boolean | 判断对应键值的属性是否存在。 | @@ -35,19 +35,19 @@ UI组件可以通过装饰器将应用程序状态数据与**AppStorage**进行 ## AppStorage与组件同步 -在[管理组件拥有的状态](ts-component-states-state.md)中,已经定义了如何将组件的状态变量与父组件或祖先组件中的**@State**装饰的状态变量同步,主要包括**@Prop**、**@Link**、**@Consume**。 +在[管理组件拥有的状态](ts-component-states-state.md)中,已经定义了如何将组件的状态变量与父组件或祖先组件中的@State装饰的状态变量同步,主要包括@Prop、@Link、@Consume。 -本章节定义如何将组件变量与**AppStorage**同步,主要提供**@StorageLink**和**@StorageProp**装饰器。 +本章节定义如何将组件变量与AppStorage同步,主要提供@StorageLink和@StorageProp装饰器。 ### @StorageLink装饰器 -组件通过使用@StorageLink(key)装饰的状态变量,与**AppStorage**建立双向数据绑定,**key**为**AppStorage**中的属性键值。当创建包含@StorageLink的状态变量的组件时,该状态变量的值将使用**AppStorage**中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到**AppStorage**,并从**AppStorage**同步到任何其他绑定实例中,如**PersistentStorage**或其他绑定的UI组件。 +组件通过使用@StorageLink(key)装饰的状态变量,与AppStorage建立双向数据绑定,key为AppStorage中的属性键值。当创建包含@StorageLink的状态变量的组件时,该状态变量的值将使用AppStorage中的值进行初始化。在UI组件中对@StorageLink的状态变量所做的更改将同步到AppStorage,并从AppStorage同步到任何其他绑定实例中,如PersistentStorage或其他绑定的UI组件。 ### @StorageProp装饰器 -组件通过使用@StorageProp(key)装饰的状态变量,将与**AppStorage**建立单向数据绑定,**key**标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时,该状态变量的值将使用**AppStorage**中的值进行初始化。**AppStorage**中的属性值的更改会导致绑定的UI组件进行状态更新。 +组件通过使用@StorageProp(key)装饰的状态变量,将与AppStorage建立单向数据绑定,key标识AppStorage中的属性键值。当创建包含@StoageProp的状态变量的组件时,该状态变量的值将使用AppStorage中的值进行初始化。AppStorage中的属性值的更改会导致绑定的UI组件进行状态更新。 ## 示例 diff --git a/zh-cn/application-dev/ui/ts-attribution-configuration.md b/zh-cn/application-dev/ui/ts-attribution-configuration.md index 57e3aa8afabf74f642ba7d0e05118b93ee205946..a497ba586acbc78f04d4ba8e893a1217ade85e1e 100644 --- a/zh-cn/application-dev/ui/ts-attribution-configuration.md +++ b/zh-cn/application-dev/ui/ts-attribution-configuration.md @@ -1,17 +1,17 @@ # 属性配置 -使用属性方法配置组件的属性,属性方法紧随组件,并用**“.”**运算符连接。 +使用属性方法配置组件的属性,属性方法紧随组件,并用“.”运算符连接。 -- 配置**Text**组件的字体大小属性: +- 配置Text组件的字体大小属性: ``` Text('123') .fontSize(12) ``` -- 使用**“.”**操作进行链式调用并同时配置组件的多个属性,如下所示: +- 使用“.”操作进行链式调用并同时配置组件的多个属性,如下所示: ``` Image('a.jpg') .alt('error.jpg') @@ -31,7 +31,7 @@ ``` -- 对于内置组件,框架还为其属性预定义了一些枚举类型,供开发人员调用,枚举值可以作为参数传递。枚举类型必须满足参数类型要求,有关特定属性的枚举类型定义的详细信息。可以按以下方式配置**Text**组件的颜色和字体属性: +- 对于内置组件,框架还为其属性预定义了一些枚举类型,供开发人员调用,枚举值可以作为参数传递。枚举类型必须满足参数类型要求,有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性: ``` Text('hello') .fontSize(20) diff --git a/zh-cn/application-dev/ui/ts-child-component-configuration.md b/zh-cn/application-dev/ui/ts-child-component-configuration.md index d31f64606d4013b1fed5e6aa3e6c12c8c31cf73e..4c7389173443f3ba02874dff923ed909dccacd06 100644 --- a/zh-cn/application-dev/ui/ts-child-component-configuration.md +++ b/zh-cn/application-dev/ui/ts-child-component-configuration.md @@ -1,10 +1,10 @@ # 子组件配置 -对于支持子组件配置的组件,例如容器组件,在**“{ ... }”**里为组件添加子组件的UI描述。**Column**、**Row**、**Stack**、**Button**、**Grid**和**List**组件都是容器组件。 +对于支持子组件配置的组件,例如容器组件,在“{ ... }”里为组件添加子组件的UI描述。Column、Row、Stack、Button、Grid和List组件都是容器组件。 -- 以下是简单的**Column**示例: +- 以下是简单的Column示例: ``` Column() { Text('Hello') diff --git a/zh-cn/application-dev/ui/ts-component-based-component.md b/zh-cn/application-dev/ui/ts-component-based-component.md index cdefcd02d747618ef1f1f44f7673d830b1dea896..1c39efe8311bd6a0b24648530962f440fb965cd0 100644 --- a/zh-cn/application-dev/ui/ts-component-based-component.md +++ b/zh-cn/application-dev/ui/ts-component-based-component.md @@ -1,15 +1,15 @@ # @Component -**@Component**装饰的**struct**表示该结构体具有组件化能力,能够成为一个独立的组件,这种类型的组件也称为自定义组件,在**build**方法里描述UI结构。自定义组件具有以下特点: +@Component装饰的struct表示该结构体具有组件化能力,能够成为一个独立的组件,这种类型的组件也称为自定义组件,在build方法里描述UI结构。自定义组件具有以下特点: -- **可组合:**允许开发人员组合使用内置组件、其他组件、公共属性和方法; +- 可组合:允许开发人员组合使用内置组件、其他组件、公共属性和方法; -- **可重用:**自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用; +- 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用; -- **生命周期:**生命周期的回调方法可以在组件中配置,用于业务逻辑处理; +- 生命周期:生命周期的回调方法可以在组件中配置,用于业务逻辑处理; -- **数据驱动更新:**由状态变量的数据驱动,实现UI自动更新。 +- 数据驱动更新:由状态变量的数据驱动,实现UI自动更新。 对组件化的深入描述,请参考[深入理解组件化](ts-a-deep-dive-into-component.md)。 @@ -21,7 +21,7 @@ > - 自定义组件禁止自定义构造函数。 -如下代码定义了**MyComponent**组件**:** +如下代码定义了MyComponent组件: ``` @@ -37,10 +37,10 @@ struct MyComponent { ``` -**MyComponent**的**build**方法会在初始渲染时执行,此外,当组件中的状态发生变化时,**build**方法将再次执行。 +MyComponent的build方法会在初始渲染时执行,此外,当组件中的状态发生变化时,build方法将再次执行。 -以下代码使用了**MyComponent**组件: +以下代码使用了MyComponent组件: ``` @@ -57,7 +57,7 @@ struct ParentComponent { ``` -可以多次使用**MyComponent**,并在不同的组件中进行重用: +可以多次使用MyComponent,并在不同的组件中进行重用: ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-customdialog.md b/zh-cn/application-dev/ui/ts-component-based-customdialog.md index 28e915392fb050cb8e345eaeaa97592905a91e65..72b8c9cb6b64b2e410caff9dc3934d6cc171c4aa 100644 --- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md +++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md @@ -1,6 +1,6 @@ # @CustomDialog -**@CustomDialog**装饰器用于装饰自定义弹窗。 +@CustomDialog装饰器用于装饰自定义弹窗。 ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-entry.md b/zh-cn/application-dev/ui/ts-component-based-entry.md index b725be696608e8e4166096eeca671c3cf404af97..24e1ec5772b4acae04f8e6b85b9c38013bb5b9d7 100644 --- a/zh-cn/application-dev/ui/ts-component-based-entry.md +++ b/zh-cn/application-dev/ui/ts-component-based-entry.md @@ -1,13 +1,13 @@ # @Entry -用**@Entry**装饰的自定义组件用作页面的默认入口组件,加载页面时,将首先创建并呈现**\@Entry**装饰的自定义组件。 +用@Entry装饰的自定义组件用作页面的默认入口组件,加载页面时,将首先创建并呈现@Entry装饰的自定义组件。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> 在单个源文件中,最多可以使用**\@Entry**装饰一个自定义组件。 +> 在单个源文件中,最多可以使用@Entry装饰一个自定义组件。 -**@Entry**的用法如下: +@Entry的用法如下: ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-extend.md b/zh-cn/application-dev/ui/ts-component-based-extend.md index b28a95235035fe2568da713a26f199187b675577..d8f8c63f1a42e41d87082f4efaa1477604026ae7 100644 --- a/zh-cn/application-dev/ui/ts-component-based-extend.md +++ b/zh-cn/application-dev/ui/ts-component-based-extend.md @@ -1,6 +1,6 @@ # @Extend -**@Extend**装饰器将新的属性函数添加到内置组件上,如**Text**、**Column**、**Button**等。通过**\@Extend**装饰器可以快速定义并复用组件的自定义样式。 +@Extend装饰器将新的属性函数添加到内置组件上,如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。 ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-preview.md b/zh-cn/application-dev/ui/ts-component-based-preview.md index 5016d05195beb63bbc2bdd69ed197415ff14187a..828093c7822267769a1cf43a054855fe9f71b2d8 100644 --- a/zh-cn/application-dev/ui/ts-component-based-preview.md +++ b/zh-cn/application-dev/ui/ts-component-based-preview.md @@ -1,13 +1,13 @@ # @Preview -用**@Preview**装饰的自定义组件可以在DevEco Studio的预览器上进行预览,加载页面时,将创建并呈现**@Preview**装饰的自定义组件。 +用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> 在单个源文件中,最多可以使用**@Preview**装饰一个自定义组件。 +> 在单个源文件中,最多可以使用@Preview装饰一个自定义组件。 -**@Preview**的用法如下: +@Preview的用法如下: ``` diff --git a/zh-cn/application-dev/ui/ts-component-based-styles.md b/zh-cn/application-dev/ui/ts-component-based-styles.md index 6f26561661d29ba5ab04a646b00c30dd5f07b3b6..015991ce4670546886ea9e0ba504c0621ee3d5af 100644 --- a/zh-cn/application-dev/ui/ts-component-based-styles.md +++ b/zh-cn/application-dev/ui/ts-component-based-styles.md @@ -2,7 +2,7 @@ -@Styles装饰器将新的属性函数添加到基本组件上,如**Text**、**Column**、**Button**等。当前@Styles仅支持[通用属性](../reference/arkui-ts/ts-universal-attributes.md)。通过@Styles装饰器可以快速定义并复用组件的自定义样式。 +@Styles装饰器将新的属性函数添加到基本组件上,如Text、Column、Button等。当前@Styles仅支持[通用属性](../reference/arkui-ts/ts-universal-attributes.md)。通过@Styles装饰器可以快速定义并复用组件的自定义样式。 @Styles可以定义在组件内或组件外,在组件外定义时需带上function关键字,组件内定义时不需要。 diff --git a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md index 97e6677b55175fcc65910b6c07dc08d643b59ced..1786a365cb4098141f02e8a0f9c2a79993abd91b 100644 --- a/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md +++ b/zh-cn/application-dev/ui/ts-component-creation-re-initialization.md @@ -2,46 +2,46 @@ ## 初始创建和渲染 -1. 创建父组件**ParentComp**; +1. 创建父组件ParentComp; -2. 本地初始化**ParentComp**的状态变量**isCountDown**; +2. 本地初始化ParentComp的状态变量isCountDown; -3. 执行**ParentComp**的**build**函数; +3. 执行ParentComp的build函数; -4. 创建**Column**内置组件; - 1. 创建**Text**内置组件,设置其文本展示内容,并将**Text**组件实例添加到**Column**中; - 2. 判断if条件,创建**true**分支上的组件; - 1. 创建**Image**内置组件,并设置其图片源地址; - 2. 使用给定的构造函数创建**TimerComponent**; - 1. 创建**TimerComponent**对象; +4. 创建Column内置组件; + 1. 创建Text内置组件,设置其文本展示内容,并将Text组件实例添加到Column中; + 2. 判断if条件,创建true分支上的组件; + 1. 创建Image内置组件,并设置其图片源地址; + 2. 使用给定的构造函数创建TimerComponent; + 1. 创建TimerComponent对象; 2. 本地初始化成员变量初始值; - 3. 使用**TimerComponent**构造函数提供的参数更新成员变量的值; - 4. 执行**TimerComponent**的**aboutToAppear**函数; - 5. 执行**TimerComponent**的**build**函数,创建相应的UI描述结构; - 3. 创建**Button**内置组件,设置相应的内容。 + 3. 使用TimerComponent构造函数提供的参数更新成员变量的值; + 4. 执行TimerComponent的aboutToAppear函数; + 5. 执行TimerComponent的build函数,创建相应的UI描述结构; + 3. 创建Button内置组件,设置相应的内容。 ## 状态更新 用户单击按钮时: -1. **ParentComp**的**isCountDown**状态变量的值更改为false; +1. ParentComp的isCountDown状态变量的值更改为false; -2. 执行**ParentComp**的**build**函数; +2. 执行ParentComp的build函数; -3. **Column**内置组件会被框架重用并执行重新初始化; +3. Column内置组件会被框架重用并执行重新初始化; -4. **Column**的子组件会重用内存中的对象,但会进行重新初始化; - 1. **Text**内置组件会被重用,但使用新的文本内容进行重新初始化; +4. Column的子组件会重用内存中的对象,但会进行重新初始化; + 1. Text内置组件会被重用,但使用新的文本内容进行重新初始化; 2. 判断if条件,使用false分支上的组件; 1. 原来true分支上的组件不在使用,这些组件会进行销毁; - 1. 创建的**Image**内置组件实例进行销毁; - 2. **TimerComponent**组件实例进行销毁,**aboutToDisappear**函数被调用; + 1. 创建的Image内置组件实例进行销毁; + 2. TimerComponent组件实例进行销毁,aboutToDisappear函数被调用; 2. 创建false分支上的组件; - 1. 创建**Image**内置组件,并设置其图片源地址; - 2. 使用给定的构造函数重新创建**TimerComponent**; - 3. 新创建的**TimerComponent**进行初始化,并调用**aboutToAppear**函数和**build**函数。 - 3. **Button**内置组件会被重用,但使用新的图片源地址。 + 1. 创建Image内置组件,并设置其图片源地址; + 2. 使用给定的构造函数重新创建TimerComponent; + 3. 新创建的TimerComponent进行初始化,并调用aboutToAppear函数和build函数。 + 3. Button内置组件会被重用,但使用新的图片源地址。 ## 示例 diff --git a/zh-cn/application-dev/ui/ts-component-states-link.md b/zh-cn/application-dev/ui/ts-component-states-link.md index 0fd6b9d230c92eb5d9060770d85fdbc4228952b9..25c48965083bd3f038802f641596f38273bf3db9 100644 --- a/zh-cn/application-dev/ui/ts-component-states-link.md +++ b/zh-cn/application-dev/ui/ts-component-states-link.md @@ -1,21 +1,21 @@ # @Link -**@Link**装饰的变量可以和父组件的**@State**变量建立双向数据绑定: +@Link装饰的变量可以和父组件的@State变量建立双向数据绑定: -- **支持多种类型:@Link**变量的值与**@State**变量的类型相同,即class、number、string、boolean或这些类型的数组; +- 支持多种类型:@Link变量的值与@State变量的类型相同,即class、number、string、boolean或这些类型的数组; -- **私有:**仅在组件内访问; +- 私有:仅在组件内访问; -- **单个数据源:**初始化**@Link**变量的父组件的变量必须是**@State**变量; +- 单个数据源:初始化@Link变量的父组件的变量必须是@State变量; -- **双向通信:**子组件对**@Link**变量的更改将同步修改父组件的**@State**变量; +- 双向通信:子组件对@Link变量的更改将同步修改父组件的@State变量; -- **创建自定义组件时需要将变量的引用传递给@Link变量:**在创建组件的新实例时,必须使用命名参数初始化所有**@Link**变量。**@Link**变量可以使用**@State**变量或**@Link**变量的引用进行初始化,**@State**变量可以通过'**$**'操作符创建引用。 +- 创建自定义组件时需要将变量的引用传递给@Link变量:在创建组件的新实例时,必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化,@State变量可以通过'$'操作符创建引用。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> **@Link**变量不能在组件内部进行初始化。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) 说明: +> @Link变量不能在组件内部进行初始化。 ## 简单类型示例 @@ -48,7 +48,7 @@ struct PlayButton { } ``` -**@Link**语义是从'**$**'操作符引出,即**$isPlaying**是**this.isPlaying**内部状态的双向数据绑定。当您单击**PlayButton**时,PlayButton 的**Image**组件和**Text**组件将同时进行刷新。 +@Link语义是从'$'操作符引出,即$isPlaying是this.isPlaying内部状态的双向数据绑定。当您单击PlayButton时,PlayButton 的Image组件和Text组件将同时进行刷新。 ## 复杂类型示例 @@ -88,7 +88,7 @@ struct Child { } ``` -在上面的示例中,点击**Button1**和**Button2**更改父组件中显示的文本项目列表。 +在上面的示例中,点击Button1和Button2更改父组件中显示的文本项目列表。 ## @Link、@State和@Prop结合使用示例 @@ -127,8 +127,8 @@ struct ChildB { } ``` -上述示例中,ParentView包含ChildA和ChildB两个子组件,ParentView的状态变量**counter**分别初始化ChildA和ChildB。 +上述示例中,ParentView包含ChildA和ChildB两个子组件,ParentView的状态变量counter分别初始化ChildA和ChildB。 -- ChildB使用**@Link**建立双向状态绑定。当**ChildB**修改**counterRef**状态变量值时,该更改将同步到**ParentView**和**ChildA**共享; +- ChildB使用@Link建立双向状态绑定。当ChildB修改counterRef状态变量值时,该更改将同步到ParentView和ChildA共享; -- ChildA使用**@Prop**建立从**ParentView**到自身的单向状态绑定。当**ChildA**修改状态时,**ChildA**将重新渲染,但该更改不会传达给**ParentView**和**ChildB**。 +- ChildA使用@Prop建立从ParentView到自身的单向状态绑定。当ChildA修改状态时,ChildA将重新渲染,但该更改不会传达给ParentView和ChildB。 diff --git a/zh-cn/application-dev/ui/ts-component-states-prop.md b/zh-cn/application-dev/ui/ts-component-states-prop.md index 1fcb7b8e5cb553487baba5b97d2062f3354e404d..e62d23fa7646714a0edfe187920213fe77c7f27c 100644 --- a/zh-cn/application-dev/ui/ts-component-states-prop.md +++ b/zh-cn/application-dev/ui/ts-component-states-prop.md @@ -1,17 +1,17 @@ # @Prop -**@Prop与@State**有相同的语义,但初始化方式不同。**@Prop**装饰的变量必须使用其父组件提供的**@State**变量进行初始化,允许组件内部修改**@Prop**变量,但更改不会通知给父组件,即**@Prop**属于单向数据绑定。 +@Prop与@State有相同的语义,但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化,允许组件内部修改@Prop变量,但更改不会通知给父组件,即@Prop属于单向数据绑定。 -**@Prop**状态数据具有以下特征: +@Prop状态数据具有以下特征: -- **支持简单类型:**仅支持number、string、boolean简单类型; +- 支持简单类型:仅支持number、string、boolean简单类型; -- **私有:**仅在组件内访问; +- 私有:仅在组件内访问; -- **支持多个实例:**一个组件中可以定义多个标有**@Prop**的属性; +- 支持多个实例:一个组件中可以定义多个标有@Prop的属性; -- **创建自定义组件时将值传递给@Prop变量进行初始化:**在创建组件的新实例时,必须初始化所有@Prop变量,不支持在组件内部进行初始化。 +- 创建自定义组件时将值传递给@Prop变量进行初始化:在创建组件的新实例时,必须初始化所有@Prop变量,不支持在组件内部进行初始化。 ## 示例 @@ -63,7 +63,7 @@ struct CountDownComponent { } ``` -在上述示例中,当按“+1”或“-1”按钮时,父组件状态发生变化,重新执行**build**方法,此时将创建一个新的**CountDownComponent**组件。父组件的**countDownStartValue**状态属性被用于初始化子组件的**@Prop**变量,当按下子组件的“Try again”按钮时,其**@Prop**变量**count**将被更改,**CountDownComponent**重新渲染。但是**count**值的更改不会影响父组件的**countDownStartValue**值。 +在上述示例中,当按“+1”或“-1”按钮时,父组件状态发生变化,重新执行build方法,此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量,当按下子组件的“Try again”按钮时,其@Prop变量count将被更改,CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。 -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> 创建新组件实例时,必须初始化其所有**@Prop**变量。 +> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** +> 创建新组件实例时,必须初始化其所有@Prop变量。 diff --git a/zh-cn/application-dev/ui/ts-component-states-state.md b/zh-cn/application-dev/ui/ts-component-states-state.md index 3ad723169c4d2ebaebe494c0bc7bee229cdaa988..de8b845a1952bddec47cf9efcf0733e47d03171a 100644 --- a/zh-cn/application-dev/ui/ts-component-states-state.md +++ b/zh-cn/application-dev/ui/ts-component-states-state.md @@ -1,19 +1,19 @@ # @State -**@State**装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的**build**方法进行UI刷新。 +@State装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新。 -**@State**状态数据具有以下特征: +@State状态数据具有以下特征: -- **支持多种类型:**允许**class**、**number**、**boolean**、**string**强类型的按值和按引用类型。允许这些强类型构成的数组,即**Array<class>**、**Array<string>**、**Array<boolean>**、**Array<number>。**不允许**object**和**any。** +- 支持多种类型:允许class、number、boolean、string强类型的按值和按引用类型。允许这些强类型构成的数组,即Array<class>、Array<string>、Array<boolean>、Array<number>。不允许object和any。 -- **支持多实例:**组件不同实例的内部状态数据独立。 +- 支持多实例:组件不同实例的内部状态数据独立。 -- **内部私有:**标记为**@State**的属性是私有变量,只能在组件内访问。 +- 内部私有:标记为@State的属性是私有变量,只能在组件内访问。 -- **需要本地初始化:**必须为所有**@State**变量分配初始值,将变量保持未初始化可能导致框架行为未定义。 +- 需要本地初始化:必须为所有@State变量分配初始值,将变量保持未初始化可能导致框架行为未定义。 -- **创建自定义组件时支持通过状态变量名设置初始值:**在创建组件实例时,可以通过变量名显式指定**@State**状态属性的初始值**。** +- 创建自定义组件时支持通过状态变量名设置初始值:在创建组件实例时,可以通过变量名显式指定@State状态属性的初始值。 ## 简单类型的状态属性示例 @@ -91,11 +91,11 @@ struct MyComponent { 在上述示例中: -- 用户定义的组件**MyComponent**定义了**@State**状态变量**count**和**title**。如果**count**或**title**的值发生变化,则执行**MyComponent**的**build**方法来重新渲染组件; +- 用户定义的组件MyComponent定义了@State状态变量count和title。如果count或title的值发生变化,则执行MyComponent的build方法来重新渲染组件; -- **EntryComponent**中有多个**MyComponent**组件实例,第一个**MyComponent**内部状态的更改不会影响第二个**MyComponent**; +- EntryComponent中有多个MyComponent组件实例,第一个MyComponent内部状态的更改不会影响第二个MyComponent; -- 创建**MyComponent**实例时通过变量名给组件内的变量进行初始化,如: +- 创建MyComponent实例时通过变量名给组件内的变量进行初始化,如: ``` MyComponent({title: {value: 'Hello, World 2'}, count: 7}) ``` diff --git a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md index 8d403839627e49c327a54a0897bac80fabc56753..25b4d88fe9516f416b22044a4ce099bc15062df0 100644 --- a/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md +++ b/zh-cn/application-dev/ui/ts-configuration-with-mandatory-parameters.md @@ -1,25 +1,25 @@ # 必选参数构造配置 -如果组件的接口定义中包含必选构造参数,则在组件后面的**“()”**中必须配置参数,参数可以使用常量进行赋值。 +如果组件的接口定义中包含必选构造参数,则在组件后面的“()”中必须配置参数,参数可以使用常量进行赋值。 例如: -- **Image**组件的必选参数**src**: +- Image组件的必选参数src: ``` Image('http://xyz/a.jpg') ``` -- **Text**组件的必选参数**content**: +- Text组件的必选参数content: ``` Text('123') ``` -变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。例如,传递变量或表达式来构造**Image**和**Text**组件的参数: +变量或表达式也可以用于参数赋值,其中表达式返回的结果类型必须满足参数类型要求。例如,传递变量或表达式来构造Image和Text组件的参数: ``` diff --git a/zh-cn/application-dev/ui/ts-custom-component-initialization.md b/zh-cn/application-dev/ui/ts-custom-component-initialization.md index 5644890d83cd8b8817eb1a7bb52833b174829515..0e407eb84db9a6b15f82a9bd24214b2c35b4b9c5 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-initialization.md +++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md @@ -33,9 +33,9 @@ 从上表中可以看出: -- **@State**变量需要本地初始化,初始化的值可以被构造参数覆盖; +- @State变量需要本地初始化,初始化的值可以被构造参数覆盖; -- **@Prop**和**@Link**变量必须且仅通过构造函数参数进行初始化。 +- @Prop和@Link变量必须且仅通过构造函数参数进行初始化。 通过构造函数方法初始化成员变量,需要遵循如下规则: @@ -54,13 +54,13 @@ 从上表中可以看出: -- 父组件的常规变量可以用于初始化子组件的**@State**变量,但不能用于初始化**@Link**或**@Prop**变量。 +- 父组件的常规变量可以用于初始化子组件的@State变量,但不能用于初始化@Link或@Prop变量。 -- 父组件的**@State**变量可以初始化子组件的**@Prop**、**@Link(通过$)**或常规变量,但不能初始化子组件的**@State**变量。 +- 父组件的@State变量可以初始化子组件的@Prop、@Link(通过$)或常规变量,但不能初始化子组件的@State变量。 -- 父组件的**@Link**变量可以初始化子组件的@Link或常规变量。但是初始化子组件的**@State**成员是语法错误,此外不建议初始化**@prop。** +- 父组件的@Link变量可以初始化子组件的@Link或常规变量。但是初始化子组件的@State成员是语法错误,此外不建议初始化@prop。 -- 父组件的**@Prop**变量可以初始化子组件的常规变量或**@Prop**变量,但不能初始化子组件的**@State**或**@Link**变量。 +- 父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量,但不能初始化子组件的@State或@Link变量。 - @StorageLink和@StorageProp不允许由父组件中传递到子组件。 diff --git a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md index 52fdd30c2330f6e9787db6d3cd7aefa26e4bcbba..ed805d83cc240e92b51c0e180ec60977406ddd8e 100644 --- a/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md +++ b/zh-cn/application-dev/ui/ts-custom-component-lifecycle-callbacks.md @@ -7,8 +7,8 @@ | 函数名 | 描述 | | -------- | -------- | -| aboutToAppear | 函数在创建自定义组件的新实例后,在执行其**build**函数之前执行。允许在**aboutToAppear**函数中改变状态变量,更改将在后续执行build函数中生效。 | -| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在**aboutToDisappear**函数中改变状态变量,特别是**@Link**变量的修改可能会导致应用程序行为不稳定。 | +| aboutToAppear | 函数在创建自定义组件的新实例后,在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量,更改将在后续执行build函数中生效。 | +| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量,特别是@Link变量的修改可能会导致应用程序行为不稳定。 | | onPageShow | 页面显示时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 | | onPageHide | 页面消失时触发一次,包括路由过程、应用进入前后台等场景,仅@Entry修饰的自定义组件生效。 | | onBackPress | 当用户点击返回按钮时触发,仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 | @@ -49,6 +49,6 @@ struct CountDownTimerComponent { > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> - 允许在生命周期函数中使用**Promise**和异步回调函数,比如网络资源获取,定时器设置等; +> - 允许在生命周期函数中使用Promise和异步回调函数,比如网络资源获取,定时器设置等; > -> - 不允许在生命周期函数中使用**async await**。 +> - 不允许在生命周期函数中使用async await。 diff --git a/zh-cn/application-dev/ui/ts-event-configuration.md b/zh-cn/application-dev/ui/ts-event-configuration.md index 78af2d2464fca6bc589b09eb41443cd62e41603b..9ded73d381b0a29f0d6a1115a65a778596dac212 100644 --- a/zh-cn/application-dev/ui/ts-event-configuration.md +++ b/zh-cn/application-dev/ui/ts-event-configuration.md @@ -13,7 +13,7 @@ ``` -- 使用匿名函数表达式配置组件的事件方法,要求使用**bind**,以确保函数体中的this引用包含的组件: +- 使用匿名函数表达式配置组件的事件方法,要求使用bind,以确保函数体中的this引用包含的组件: ``` // Counter is a private data variable defined in the component. Button('add counter') diff --git a/zh-cn/application-dev/ui/ts-function-build.md b/zh-cn/application-dev/ui/ts-function-build.md index 91f46f8e4f2fe0a8d441d200c68b142eec54830b..240d262cddc48ade5dcea88a66de7bb284e9b2db 100644 --- a/zh-cn/application-dev/ui/ts-function-build.md +++ b/zh-cn/application-dev/ui/ts-function-build.md @@ -1,6 +1,6 @@ # build函数 -**build**函数满足**Builder**构造器接口定义,用于定义组件的声明式UI描述。必须遵循上述**Builder**接口约束,在**build**方法中以声明式方式进行组合自定义组件或系统内置组件,在组件创建和更新场景中都会调用**build**方法。 +build函数满足Builder构造器接口定义,用于定义组件的声明式UI描述。必须遵循上述Builder接口约束,在build方法中以声明式方式进行组合自定义组件或系统内置组件,在组件创建和更新场景中都会调用build方法。 ``` diff --git a/zh-cn/application-dev/ui/ts-general-ui-concepts.md b/zh-cn/application-dev/ui/ts-general-ui-concepts.md index 75e757af1fe4d18c1024623343c766e78113e9a3..3b56f1795a766404c5edf60a7822158e29ba80ce 100644 --- a/zh-cn/application-dev/ui/ts-general-ui-concepts.md +++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md @@ -36,14 +36,14 @@ struct Hello { 上述示例代码描述了简单页面的结构,并介绍了以下基本概念: -- **装饰器:**方舟开发框架定义了一些具有特殊含义的装饰器,用于装饰类、结构、方法和变量。例如,上例中的**@Entry**、**@Component**和**@State**都是装饰器。 +- 装饰器:方舟开发框架定义了一些具有特殊含义的装饰器,用于装饰类、结构、方法和变量。例如,上例中的@Entry、@Component和@State都是装饰器。 -- **自定义组件:**可重用的UI单元,可以与其他组件组合,如**@Component**装饰的**struct Hello**。 +- 自定义组件:可重用的UI单元,可以与其他组件组合,如@Component装饰的struct Hello。 -- **UI描述:**声明性描述UI结构,例如**build()**方法中的代码块。 +- UI描述:声明性描述UI结构,例如build()方法中的代码块。 -- **内置组件:**框架中默认内置的基本组件和布局组件,开发者可以直接调用,如**Column**、**Text**、**Divider**、**Button**等。 +- 内置组件:框架中默认内置的基本组件和布局组件,开发者可以直接调用,如Column、Text、Divider、Button等。 -- **属性方法:**用于配置组件属性,如**fontSize()**、**width()**、**height()**、**color()**等。 +- 属性方法:用于配置组件属性,如fontSize()、width()、height()、color()等。 -- **事件方法:**在事件方法的回调中添加组件响应逻辑。例如,为Button组件添加onClick方法,在onClick方法的回调中添加点击响应逻辑。 +- 事件方法:在事件方法的回调中添加组件响应逻辑。例如,为Button组件添加onClick方法,在onClick方法的回调中添加点击响应逻辑。 diff --git a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md index 20d91eb13ec5a768f794d0cb7ffe6965c18605eb..3166aba4f90567802fba7c869b2c0be25d15e94d 100644 --- a/zh-cn/application-dev/ui/ts-other-states-consume-provide.md +++ b/zh-cn/application-dev/ui/ts-other-states-consume-provide.md @@ -2,7 +2,7 @@ Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。Consume在感知到Provide数据的更新后,会触发当前view的重新渲染。 -**表1** @Provide +表1 @Provide | 名称 | 说明 | | -------- | -------- | @@ -11,7 +11,7 @@ Provide作为数据的提供方,可以更新其子孙节点的数据,并触 | 初始值 | 必须制定初始值。 | | 页面重渲染场景 | 触发页面渲染的修改:
- 基础类型(boolean,string,number)变量的改变;
- @Observed class类型变量及其属性的修改;
- 添加,删除,更新数组中的元素。 | -**表2** @Consume +表2 @Consume | 类型 | 说明 | | -------- | -------- | diff --git a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md index f37d1b09dac450a846d33720f575b4ee37423635..73f9e1e94a07bb851e3fada592e12d7dd299bb5b 100644 --- a/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md +++ b/zh-cn/application-dev/ui/ts-other-states-observed-objectlink.md @@ -3,9 +3,9 @@ 本章将引入两个新的装饰符@Observed和@ObjectLink: -- **@Observed**应用于类,表示该类中的数据变更被UI页面管理,例如:@Observed class ClassA {}。 +- @Observed应用于类,表示该类中的数据变更被UI页面管理,例如:@Observed class ClassA {}。 -- **@ObjectLink**应用于被@Observed所装饰类的对象,例如:@ObjectLink a: ClassA。 +- @ObjectLink应用于被@Observed所装饰类的对象,例如:@ObjectLink a: ClassA。 ## 引入动机 diff --git a/zh-cn/application-dev/ui/ts-parameterless-configuration.md b/zh-cn/application-dev/ui/ts-parameterless-configuration.md index d7bfea37a140bdb7cd23896f710e47dc2b6b4355..51a176b90867e515db529c44084c17d756ba71b2 100644 --- a/zh-cn/application-dev/ui/ts-parameterless-configuration.md +++ b/zh-cn/application-dev/ui/ts-parameterless-configuration.md @@ -1,7 +1,7 @@ # 无参数构造配置 -组件的接口定义不包含必选构造参数,组件后面的**“()”**中不需要配置任何内容。例如,**Divider**组件不包含构造参数: +组件的接口定义不包含必选构造参数,组件后面的“()”中不需要配置任何内容。例如,Divider组件不包含构造参数: ``` diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md index d41fbef1ad0edf7abe293ec1a0ecb3adeca30f20..a4f390c0b09714c13a1ad5bd109df8c6a298aeef 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-foreach.md @@ -1,6 +1,6 @@ # 循环渲染 -开发框架提供**循环渲染(**ForEach组件)来迭代数组,并为每个数组项创建相应的组件。**ForEach**定义如下: +开发框架提供循环渲染(ForEach组件)来迭代数组,并为每个数组项创建相应的组件。ForEach定义如下: ``` @@ -18,19 +18,19 @@ ForEach( ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGenerator?: (item: any, index?: number) => string):void -**表1** 参数说明 +表1 参数说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | -| arr | any[] | 是 | - | 必须是数组,允许空数组,空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数,例如arr.slice(1, 3),设置的函数不得改变包括数组本身在内的任何状态变量,如**Array.splice**、**Array.sort**或**Array.reverse**这些改变原数组的函数。 | -| itemGenerator | (item: any, index?: number) => void | 是 | - | 生成子组件的lambda函数,为给定数组项生成一个或多个子组件,单个组件和子组件列表必须括在大括号“**{....}**”中。 | +| arr | any[] | 是 | - | 必须是数组,允许空数组,空数组场景下不会创建子组件。同时允许设置返回值为数组类型的函数,例如arr.slice(1, 3),设置的函数不得改变包括数组本身在内的任何状态变量,如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 | +| itemGenerator | (item: any, index?: number) => void | 是 | - | 生成子组件的lambda函数,为给定数组项生成一个或多个子组件,单个组件和子组件列表必须括在大括号“{....}”中。 | | keyGenerator | (item: any, index?: number) => string | 否 | - | 匿名参数,用于给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时,子项的键值不得更改,当数组中的子项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则ForEach中的所有节点都将重建。 | > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > - 必须在容器组件内使用; > -> - 生成的子组件允许在**ForEach**的父容器组件中,允许子组件生成器函数中包含**if/else**条件渲染,同时也允许**ForEach**包含在**if/else**条件渲染语句中; +> - 生成的子组件允许在ForEach的父容器组件中,允许子组件生成器函数中包含if/else条件渲染,同时也允许ForEach包含在if/else条件渲染语句中; > > - 子项生成器函数的调用顺序不一定和数组中的数据项相同,在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作: > ``` diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md index faab1b9af7930d197d570b8305455a69a4fee41d..8bbe9f8734f6f0d523bb60502fd0fd4efabda4c0 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-if-else.md @@ -1,6 +1,6 @@ # 条件渲染 -使用**if/else**进行条件渲染。 +使用if/else进行条件渲染。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** diff --git a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md index 29222e5ca82a4cf3068a6a11ded16c437daa013f..1b3604307c78cd28b1c4d14ecb92e39f4b9a7bc5 100644 --- a/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md +++ b/zh-cn/application-dev/ui/ts-rending-control-syntax-lazyforeach.md @@ -1,6 +1,6 @@ # 数据懒加载 -开发框架提供**数据懒加载**(LazyForEach组件)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。**LazyForEach**定义如下: +开发框架提供数据懒加载(LazyForEach组件)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。LazyForEach定义如下: ``` @@ -34,16 +34,16 @@ interface DataChangeListener { LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyGenerator?: (item: any) => string):void -**表1** 参数说明 +表1 参数说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象,需要开发者实现相关接口。 | -| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数,为给定数组项生成一个或多个子组件,单个组件和子组件列表必须括在大括号“**{....}**”中。 | +| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数,为给定数组项生成一个或多个子组件,单个组件和子组件列表必须括在大括号“{....}”中。 | | keyGenerator | (item: any) => string | 否 | - | 匿名函数,用于键值生成,为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时,子项的键值不得更改,当数组中的子项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则LazyForEach中的所有节点都将重建。 | -**表2** IDataSource类型说明 +表2 IDataSource类型说明 | 名称 | 描述 | | -------- | -------- | @@ -53,7 +53,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG | unregisterDataChangeListener(listener:DataChangeListener): void | 注销改变数据的控制器。 | -**表3** DataChangeListener类型说明 +表3 DataChangeListener类型说明 | 名称 | 描述 | | -------- | -------- | @@ -71,11 +71,11 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > - 数据懒加载必须在容器组件内使用,且仅有List、Grid以及Swiper组件支持数据的懒加载(即只加载可视部分以及其前后少量数据用于缓冲),其他组件仍然是一次加载所有的数据; > -> - **LazyForEach**在每次迭代中,必须且只允许创建一个子组件; +> - LazyForEach在每次迭代中,必须且只允许创建一个子组件; > -> - 生成的子组件必须允许在**LazyForEach**的父容器组件中; +> - 生成的子组件必须允许在LazyForEach的父容器组件中; > -> - 允许**LazyForEach**包含在**if/else**条件渲染语句中,不允许**LazyForEach**中出现**if/else**条件渲染语句; +> - 允许LazyForEach包含在if/else条件渲染语句中,不允许LazyForEach中出现if/else条件渲染语句; > > - 为了高性能渲染,通过DataChangeListener对象的onDataChange方法来更新UI时,仅itemGenerator中的UI描述的组件内使用了状态变量时,才会触发组件刷新; > diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md index 91dee41347f3cb0f717ad95ee0bd23976a96a409..bc36b2e26aea9dcc3fd45850a628a80d81940535 100644 --- a/zh-cn/application-dev/ui/ts-syntactic-sugar.md +++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md @@ -41,20 +41,20 @@ struct MyComponent { | 装饰器 | 装饰内容 | 说明 | | -------- | -------- | -------- | -| @Component | struct | 结构体在装饰后具有基于组件的能力,需要实现**build**方法来更新UI。 | +| @Component | struct | 结构体在装饰后具有基于组件的能力,需要实现build方法来更新UI。 | | @Entry | struct | 组件被装饰后作为页面的入口,页面加载时将被渲染显示。 | | @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览,加载页面时,将创建并呈现@Preview装饰的自定义组件。 | | @Builder | 方法 | 在@Builder装饰的方法用通过声明式UI描述,可以在一个自定义组件内快速生成多个布局内容。 | | @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上,通过@Extend装饰器可以快速定义并复用组件的自定义样式。 | | @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 | -| @State | 基本数据类型,类,数组 | 修饰的状态数据被修改时会触发组件的**build**方法进行UI界面更新。 | +| @State | 基本数据类型,类,数组 | 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。 | | @Prop | 基本数据类型 | 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时,更新当前组件的UI。 | | @Link | 基本数据类型,类,数组 | 父子组件之间的双向数据绑定,父组件的内部状态数据作为数据源,任何一方所做的修改都会反映给另一方。 | | @Observed | 类 | @Observed应用于类,表示该类中的数据变更被UI页面管理。 | | @ObjectLink | 被@Observed所装饰类的对象 | 装饰的状态数据被修改时,在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会更新UI。 | | @Consume | 基本数据类型,类,数组 | @Consume装饰的变量在感知到@Provide装饰的变量更新后,会触发当前自定义组件的重新渲染。 | | @Provide | 基本数据类型,类,数组 | @Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。 | -| @Watch | 被@State, @Prop, @Link, @ObjectLink, @Provide, @Consume, @StorageProp, @StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化,应用可以注册回调方法。 | +| @Watch | 被@State, @Prop, @Link, @ObjectLink, 
@Provide, @Consume, @StorageProp, @StorageLink中任意一个装饰的变量 | @Watch用于监听状态变量的变化,应用可以注册回调方法。 | ## 链式调用 @@ -73,7 +73,7 @@ Column() { ## struct对象 -组件可以基于**struct**实现,组件不能有继承关系,**struct**可以比**class**更加快速的创建和销毁。 +组件可以基于struct实现,组件不能有继承关系,struct可以比class更加快速的创建和销毁。 ``` @Component @@ -88,7 +88,7 @@ struct MyComponent { ## 在实例化过程中省略"new" -对于**struct**的实例化,可以省略**new**。 +对于struct的实例化,可以省略new。 ``` // 定义 @@ -120,7 +120,7 @@ TS语言的使用在生成器函数中存在一定的限制: - 生成器函数内部不能有局部变量。 -上述限制都不适用于事件处理函数(例如**onClick**)的匿名函数实现。 +上述限制都不适用于事件处理函数(例如onClick)的匿名函数实现。 非法示例: diff --git a/zh-cn/application-dev/ui/ts-syntax-intro.md b/zh-cn/application-dev/ui/ts-syntax-intro.md index 39619c8bd25d6d55bdd272d06ec71323e45adcb2..5742c454454752221f2fa7379f0ff577491c9bed 100644 --- a/zh-cn/application-dev/ui/ts-syntax-intro.md +++ b/zh-cn/application-dev/ui/ts-syntax-intro.md @@ -9,6 +9,6 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > - 所有示例都以TypeScript (TS)语言为例,请遵循相应语言的语法要求。 > -> - 示例中的**Image**、**Button**、**Text**、**Divider**、**Row**和**Column**等组件是UI框架中预置的组件控件,仅用于解释UI描述规范。 +> - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件,仅用于解释UI描述规范。 > > - 通用属性方法和事件方法通常支持所有组件,而组件内的属性方法和事件方法仅对当前组件有效。 diff --git a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md index 1942043620db9d54882c2178341477a2e041f05b..9ee8bcd9bb7da37b8480687feab450a2c45ca5ff 100644 --- a/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md +++ b/zh-cn/application-dev/ui/ts-ui-state-mgmt-concepts.md @@ -8,22 +8,22 @@ ## 状态变量装饰器 -- **@State:**组件拥有的状态属性,当**@State**装饰的变量更改时,组件会重新渲染更新UI。 +- @State:组件拥有的状态属性,当@State装饰的变量更改时,组件会重新渲染更新UI。 -- **@Link:**组件依赖于其父组件拥有的某些状态属性,当任何一个组件中的数据更新时,另一个组件的状态都会更新,父子组件重新渲染。 +- @Link:组件依赖于其父组件拥有的某些状态属性,当任何一个组件中的数据更新时,另一个组件的状态都会更新,父子组件重新渲染。 -- **@Prop:**原理类似**@Link**,但是子组件所做的更改不会同步到父组件上,属于单向传递。 +- @Prop:原理类似@Link,但是子组件所做的更改不会同步到父组件上,属于单向传递。 > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > 状态变量名称不能使用id,如@Prop id:number 。 ## 应用程序状态数据 -**AppStorage**是整个UI应用程序状态的中心“数据库”,UI框架会针对应用程序创建单例**AppStorage**对象,并提供相应的装饰器和接口供应用程序使用。 +AppStorage是整个UI应用程序状态的中心“数据库”,UI框架会针对应用程序创建单例AppStorage对象,并提供相应的装饰器和接口供应用程序使用。 -- **@StorageLink**:**@StorageLink(name)的原理类似于@Consume(name),**不同的是,该给定名称的链接对象是从**AppStorage**中获得的,在**UI组件**和**AppStorage**之间建立双向绑定同步数据。 +- @StorageLink:@StorageLink(name)的原理类似于@Consume(name),不同的是,该给定名称的链接对象是从AppStorage中获得的,在UI组件和AppStorage之间建立双向绑定同步数据。 -- **@StorageProp:@StorageProp(name)将UI组件属性与AppStorage进行单向同步,** **AppStorage**中值的更改会更新组件中的属性,但UI组件无法更改**AppStorage**中的属性值。 +- @StorageProp:@StorageProp(name)将UI组件属性与AppStorage进行单向同步,AppStorage中值的更改会更新组件中的属性,但UI组件无法更改AppStorage中的属性值。 -- **AppStorage**还提供用于业务逻辑实现的API,用于添加、读取、修改和删除应用程序的状态属性,此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 +- AppStorage还提供用于业务逻辑实现的API,用于添加、读取、修改和删除应用程序的状态属性,此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md index 17c6e77962df4f40aa94b8a273ad04a7aa577ba1..070efe2fd5b06eddf290c99ca91a9d24dddb49db 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md +++ b/zh-cn/application-dev/ui/ui-js-animate-attribute-style.md @@ -87,6 +87,6 @@ text{ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> 1. animation取值不区分先后,duration (动画执行时间)/ delay (动画延迟执行时间)按照出现的先后顺序解析。 +> - animation取值不区分先后,duration (动画执行时间)/ delay (动画延迟执行时间)按照出现的先后顺序解析。 > -> 2. 必须设置animation-duration样式,否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时,组件直接展示最后一帧的样式。 +> - 必须设置animation-duration样式,否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时,组件直接展示最后一帧的样式。 diff --git a/zh-cn/application-dev/ui/ui-js-animate-transform.md b/zh-cn/application-dev/ui/ui-js-animate-transform.md index 78a10d9622b2301b9208ff5c156396b9cfa46fc2..84ba60eeeb7f9b199b2db5bf6f138318965e6fee 100644 --- a/zh-cn/application-dev/ui/ui-js-animate-transform.md +++ b/zh-cn/application-dev/ui/ui-js-animate-transform.md @@ -565,8 +565,8 @@ transform可以设置多个值并且多个值可同时设置,下面案例中 ![zh-cn_image_0000001220554911](figures/zh-cn_image_0000001220554911.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> 1. 当设置多个transform时,后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法,例:transform: scale(1) rotate(0) translate(0,0)。 +> - 当设置多个transform时,后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法,例:transform: scale(1) rotate(0) translate(0,0)。 > -> 2. transform进行复合写法时,变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 +> - transform进行复合写法时,变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 > -> 3. transform属性设置的样式值要一一对应,若前后不对应,则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 +> - transform属性设置的样式值要一一对应,若前后不对应,则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md index 38c52678dd6122d566ae24c025f44f833dab3f21..eeecc674d8f2242e81e35cd0709bb812d89515dc 100755 --- a/zh-cn/application-dev/ui/ui-js-building-ui-animation.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-animation.md @@ -56,6 +56,7 @@ **图1** 静态动画效果图 + ![zh-cn_image_0000001071134933](figures/zh-cn_image_0000001071134933.png) @@ -157,4 +158,5 @@ export default { ``` **图2** 连续动画效果图 + ![zh-cn_image_0000001063148757](figures/zh-cn_image_0000001063148757.gif) diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md index fead97863e69229838d8e9c427f095c2264b1014..4cd08468f5c427b5d566ad4d8d82521aabb5fe6d 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-layout-intro.md @@ -25,7 +25,9 @@ 将页面中的元素分解之后再对每个基本元素按顺序实现,可以减少多层嵌套造成的视觉混乱和逻辑混乱,提高代码的可读性,方便对页面做后续的调整。以下图为例进行分解: + **图1** 页面布局分解 + ![zh-cn_image_0000001070558189](figures/zh-cn_image_0000001070558189.png) **图2** 留言区布局分解 diff --git a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md index 7f2f6fb16d031823df447c6f2983bf1386ab6885..a59b394a7a902f74cbdd6775418f68f22f970d5f 100644 --- a/zh-cn/application-dev/ui/ui-js-building-ui-routes.md +++ b/zh-cn/application-dev/ui/ui-js-building-ui-routes.md @@ -82,5 +82,4 @@ export default { 运行效果如下图所示: -**图1** 页面路由效果 ![zh-cn_image_0000001070707559](figures/zh-cn_image_0000001070707559.png) diff --git a/zh-cn/application-dev/ui/ui-js-components-button.md b/zh-cn/application-dev/ui/ui-js-components-button.md index 51de5a7d098e427ba9872d9d90ddf523f7d31f07..ea30278322fffc7e711ecde9c53a588fad1bf680 100644 --- a/zh-cn/application-dev/ui/ui-js-components-button.md +++ b/zh-cn/application-dev/ui/ui-js-components-button.md @@ -169,7 +169,7 @@ export default { ![zh-cn_image_0000001208393581](figures/zh-cn_image_0000001208393581.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> - setProgress方法只支持button的类型为download。 +> setProgress方法只支持button的类型为download。 ## 场景示例 diff --git a/zh-cn/application-dev/ui/ui-js-components-input.md b/zh-cn/application-dev/ui/ui-js-components-input.md index b6a772ea8446f27a50339750758709988da340ca..b37afa8a946c8886352ca77754c0ad1acc3f8cd8 100644 --- a/zh-cn/application-dev/ui/ui-js-components-input.md +++ b/zh-cn/application-dev/ui/ui-js-components-input.md @@ -222,7 +222,7 @@ import prompt from '@system.prompt' ![zh-cn_image_0000001189248178](figures/zh-cn_image_0000001189248178.gif) > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> - 该方法在Input类型为text、email、date、time、number和password时生效。 +> 该方法在Input类型为text、email、date、time、number和password时生效。 ## 场景示例 diff --git a/zh-cn/application-dev/ui/ui-js-components-text.md b/zh-cn/application-dev/ui/ui-js-components-text.md index ed62fcf89144793cd7eba5b4baf44c2803e67c9b..96dfb5a196b80a0cf9f24d836bb71c8668159927 100644 --- a/zh-cn/application-dev/ui/ui-js-components-text.md +++ b/zh-cn/application-dev/ui/ui-js-components-text.md @@ -34,198 +34,198 @@ Text是文本组件,用于呈现一段文本信息。具体用法请参考[Tex - 添加文本样式 -设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 - - -``` - -
- - This is a passage - - - This is a passage - -
-``` - - -``` -/* xxx.css */ -.container { - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; - background-color: #F1F3F5; -} -``` - - -![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) + 设置color、font-size、allow-scale、word-spacing、text-valign属性分别为文本添加颜色、大小、缩放、文本之间的间距和文本在垂直方向的对齐方式。 + + + ``` + +
+ + This is a passage + + + This is a passage + +
+ ``` + + + ``` + /* xxx.css */ + .container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #F1F3F5; + } + ``` + + + ![zh-cn_image_0000001220778205](figures/zh-cn_image_0000001220778205.png) - 添加划线 -设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。 - - -``` - -
- - This is a passage - - - This is a passage - -
-``` - - -``` -/* xxx.css */ -.container { - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - justify-content: center; -} -text{ - font-size: 50px; -} -``` - - -![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) + 设置text-decoration和text-decoration-colo属性为文本添加划线和划线颜色,text-decoration枚举值请参考Text自有样式。 + + + ``` + +
+ + This is a passage + + + This is a passage + +
+ ``` + + + ``` + /* xxx.css */ + .container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + } + text{ + font-size: 50px; + } + ``` + + + ![zh-cn_image_0000001220856725](figures/zh-cn_image_0000001220856725.png) - 隐藏文本内容 -当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。 - - -``` - -
- - This is a passage - -
-``` - - -``` -/* xxx.css */ -.container { - width: 100%; - height: 100%; - flex-direction: column; - align-items: center; - background-color: #F1F3F5; - justify-content: center; -} -.text{ - width: 200px; - max-lines: 1; - text-overflow:ellipsis; -} -``` - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。 -> -> - max-lines属性设置文本最多可以展示的行数。 - - -![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) + 当文本内容过多而显示不全时,添加text-overflow属性将隐藏内容以省略号的形式展现。 + + + ``` + +
+ + This is a passage + +
+ ``` + + + ``` + /* xxx.css */ + .container { + width: 100%; + height: 100%; + flex-direction: column; + align-items: center; + background-color: #F1F3F5; + justify-content: center; + } + .text{ + width: 200px; + max-lines: 1; + text-overflow:ellipsis; + } + ``` + + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** + > - text-overflow样式需要与max-lines样式配套使用,设置了最大行数的情况下生效。 + > + > - max-lines属性设置文本最多可以展示的行数。 + + + ![zh-cn_image_0000001163656706](figures/zh-cn_image_0000001163656706.png) - 设置文本折行 -设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。 - - -``` - -
-
- - Welcome to the world - - - Welcome to the world - -
-
-``` - - -``` -/* xxx.css */ -.container { - background-color: #F1F3F5; - flex-direction: column; - align-items: center; - justify-content: center; -} -.content{ - width: 50%; - flex-direction: column; - align-items: center; - justify-content: center; -} -.text1{ - height: 200px; - border:1px solid #1a1919; - margin-bottom: 50px; - text-align: center; - word-break: break-word; - font-size: 40px; -} -.text2{ - height: 200px; - border:1px solid #0931e8; - text-align: center; - word-break: break-all; - font-size: 40px; -} -``` - - -![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) + 设置word-break属性对文本内容做断行处理,word-break枚举值请参考Text自有样式。 + + + ``` + +
+
+ + Welcome to the world + + + Welcome to the world + +
+
+ ``` + + + ``` + /* xxx.css */ + .container { + background-color: #F1F3F5; + flex-direction: column; + align-items: center; + justify-content: center; + } + .content{ + width: 50%; + flex-direction: column; + align-items: center; + justify-content: center; + } + .text1{ + height: 200px; + border:1px solid #1a1919; + margin-bottom: 50px; + text-align: center; + word-break: break-word; + font-size: 40px; + } + .text2{ + height: 200px; + border:1px solid #0931e8; + text-align: center; + word-break: break-all; + font-size: 40px; + } + ``` + + + ![zh-cn_image_0000001209033195](figures/zh-cn_image_0000001209033195.png) - Text组件支持[Span](../reference/arkui-js/js-components-basic-span.md)子组件 - -``` - -
- - This is a passage - - - This 1 is a 1 passage - -
-``` - - -![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) - - -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** -> - 当使用Span子组件组成文本段落时,如果Span属性样式异常(例如:font-weight设置为1000),将导致文本段落显示异常。 -> -> - 在使用Span子组件时,注意Text组件内不能存在文本内容,如果存在文本内容也只会显示子组件Span里的内容。 - + + ``` + +
+ + This is a passage + + + This 1 is a 1 passage + +
+ ``` + + + ![zh-cn_image_0000001163372568](figures/zh-cn_image_0000001163372568.png) + + + > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** + > - 当使用Span子组件组成文本段落时,如果Span属性样式异常(例如:font-weight设置为1000),将导致文本段落显示异常。 + > + > - 在使用Span子组件时,注意Text组件内不能存在文本内容,如果存在文本内容也只会显示子组件Span里的内容。 + ## 场景示例 diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index 29704277835fd6c06d5807e0da4cacfb07b19b7d..c955cb6a7a60c37d0fb621f4c0779e67f70bb16f 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -1,11 +1,6 @@ # 概述 -基于JS扩展的类Web开发范式的方舟开发框架是UI开发框架,提供基础类、容器类、画布类等UI组件和标准CSS动画能力,支持类Web范式编程。 - - -## 基础能力 - - 采用类HTML和CSS Web编程语言作为页面布局和页面样式的开发语言,页面业务逻辑则支持ECMAScript规范的JavaScript语言。方舟开发框架提供的类Web编程范式,可以让开发者避免编写UI状态切换的代码,视图配置信息更加直观。 +基于JS扩展的类Web开发范式的方舟开发框架,采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建,使用CSS文件进行样式描述,使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联,当数据发生变化时,UI界面自动触发更新。此种开发方式,更接近Web前端开发者的使用习惯,快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 ## 整体架构 diff --git a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md index 4d52f9a847b47cfb19626f65ae9c4a68637fbe08..ee4985b077a850d20f5ce1cb2ef441643afb9a94 100644 --- a/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md +++ b/zh-cn/application-dev/ui/ui-ts-creating-simple-page.md @@ -24,7 +24,7 @@ ![zh-cn_image_0000001214128687](figures/zh-cn_image_0000001214128687.png) 2. 食物图片展示。 - 创建Image组件,指定Image组件的url,Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用“$rawfile('filename')”的形式**,**filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。 + 创建Image组件,指定Image组件的url,Image组件和Text组件都是必选构造参数组件。为了让Text组件在Image组件上方显示,所以要先声明Image组件。图片资源放在resources下的rawfile文件夹内,引用rawfile下资源时使用“$rawfile('filename')”的形式,filename为rawfile目录下的文件相对路径。当前$rawfile仅支持Image控件引用图片资源。 ``` @Entry @Component @@ -538,4 +538,5 @@ 针对创建简单视图,有以下示例工程可供参考: - [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSBuildCommonView) + 本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。 diff --git a/zh-cn/application-dev/ui/ui-ts-overview.md b/zh-cn/application-dev/ui/ui-ts-overview.md index 04181f5146bf07ec062be53b0fc3bb12cb9d16d2..1b2d23da3af31a98e56a123a6ab0646ed778fefb 100644 --- a/zh-cn/application-dev/ui/ui-ts-overview.md +++ b/zh-cn/application-dev/ui/ui-ts-overview.md @@ -9,18 +9,22 @@ - **开箱即用的组件** + 框架提供丰富的系统预置组件,可以通过链式调用的方式设置系统组件的渲染效果。开发者可以组合系统组件为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、开发和复用,使页面具有更强的工程性。 - **丰富的动效接口** + 提供svg标准的绘制图形能力,同时开放了丰富的动效接口,开发者可以通过封装的物理模型或者调用动画能力接口来实现自定义动画轨迹。 - **状态与数据管理** + 状态数据管理作为基于TS扩展的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。 - **系统能力接口** + 使用基于TS扩展的声明式开发范式的方舟开发框架,还封装了丰富的系统能力接口,开发者可以通过简单的接口调用,实现从UI设计到系统能力调用的极简开发。 @@ -31,16 +35,21 @@ ![zh-cn_image_0000001169532276](figures/zh-cn_image_0000001169532276.png) - **声明式UI前端** + 提供了UI开发范式的基础语言规范,并提供内置的UI组件、布局和动画,提供了多种状态管理机制,为应用开发者提供一系列接口支持。 - **语言运行时** + 选用方舟语言运行时,提供了针对UI范式语法的解析能力,提供了跨语言调用支持,提供了TS语言高性能运行环境。 - **声明式UI后端引擎** + 后端引擎提供了兼容不同开发范式的UI渲染管线,提供多种基础组件、布局计算、动效、交互事件,提供了状态管理和绘制能力。 - **渲染引擎** + 提供了高效的绘制能力,将渲染管线收集的渲染指令,绘制到屏幕能力。 - **平台适配层** + 提供了对系统平台的抽象接口,具备接入不同系统的能力,如系统渲染管线、生命周期调度等。 diff --git a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md index e834ed7542abf5b876167b70b7455aedd38fe437..0c0bc3943a0c604ddefe14bfa20f772551dcf553 100644 --- a/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md +++ b/zh-cn/application-dev/ui/ui-ts-page-redirection-data-transmission.md @@ -268,4 +268,5 @@ 针对页面布局与连接,有以下示例工程可供参考: - [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/eTSDefiningPageLayoutAndConnection) + 本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。 diff --git a/zh-cn/application-dev/website.md b/zh-cn/application-dev/website.md index cef4b91047390be63bbe6855f74cfdd54680d6ce..ccbdde2f2c80d1706ab82187a73a865feb904d01 100644 --- a/zh-cn/application-dev/website.md +++ b/zh-cn/application-dev/website.md @@ -609,13 +609,13 @@ - [事件注入](js-apis-inputeventclient.md) - 基本功能 - [应用上下文](reference/apis/js-apis-system-app.md) - - [日志打印](reference/apis/js-apis-basic-features-logs.md) + - [日志打印](reference/apis/js-apis-logs.md) - [页面路由](reference/apis/js-apis-router.md) - [弹窗](reference/apis/js-apis-prompt.md) - [应用配置](reference/apis/js-apis-system-configuration.md) - - [定时器](reference/apis/js-apis-basic-features-timer.md) + - [定时器](reference/apis/js-apis-timer.md) - [设置系统时间](reference/apis/js-apis-system-time.md) - - [动画](reference/apis/js-apis-basic-features-animator.md) + - [动画](reference/apis/js-apis-animator.md) - [WebGL](reference/apis/js-apis-webgl.md) - [WebGL2](reference/apis/js-apis-webgl2.md) - [屏幕截图](reference/apis/js-apis-screenshot.md)