@@ -225,7 +225,7 @@ Touch触摸类事件支持捕获，捕获阶段位于冒泡阶段之前，捕获
```
-```
+```js
// xxx.js
export default {
data: {
@@ -252,7 +252,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
- for="(i, v) in array"：其中元素索引为i，元素变量为v，遍历数组对象array。
->  **说明：**
+> **说明：**
> - 数组中的每个元素必须存在tid指定的数据属性，否则运行时可能会导致异常。
>
> - 数组中被tid指定的属性要保证唯一性，如果不是则会造成性能损耗。比如，示例中只有id和name可以作为tid字段，因为它们属于唯一字段。
@@ -265,7 +265,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
条件渲染分为2种：if/elif/else和show。两种写法的区别在于：第一种写法里if为false时，组件不会在vdom中构建，也不会渲染，而第二种写法里show为false时虽然也不渲染，但会在vdom中构建；另外，当使用if/elif/else写法时，节点必须是兄弟节点，否则编译无法通过。实例如下：
-```
+```html
```
-```
+```css
/* xxx.css */
.container{
flex-direction: column;
@@ -289,7 +289,7 @@ tid属性主要用来加速for循环的重渲染，旨在列表中的数据有
}
```
-```
+```js
// xxx.js
export default {
data: {
@@ -309,7 +309,7 @@ export default {
优化渲染优化：show方法。当show为true时，节点正常渲染；当为false时，仅仅设置display样式为none。
-```
+```html
```
-```
+```css
/* xxx.css */
.container{
flex-direction: column;
@@ -330,7 +330,7 @@ export default {
}
```
-```
+```js
// xxx.js
export default {
data: {
@@ -342,7 +342,7 @@ export default {
}
```
->  **说明：**
+> **说明：**
> 禁止在同一个元素上同时设置for和if属性。
@@ -351,7 +351,7 @@ export default {
<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
-```
+```html
```
-```
+```js
// xxx.js
export default {
data: {
@@ -385,7 +385,7 @@ export default {
HML可以通过element引用模板文件，详细介绍可参考[自定义组件](../reference/arkui-js/js-components-custom-basic-usage.md)章节。
-```
+```html
diff --git a/zh-cn/application-dev/ui/js-framework-syntax-js.md b/zh-cn/application-dev/ui/js-framework-syntax-js.md
index 9aac5acd159d34fd1fa19ca2370155b71da2b8f5..8233a1903b741f09f847ec542912db31c55bf8da 100644
--- a/zh-cn/application-dev/ui/js-framework-syntax-js.md
+++ b/zh-cn/application-dev/ui/js-framework-syntax-js.md
@@ -10,14 +10,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
- 模块声明
使用import方法引入功能模块：
- ```
+ ```js
import router from '@system.router';
```
- 代码引用
使用import方法导入js代码：
- ```
+ ```js
import utils from '../../common/utils.js';
```
@@ -25,13 +25,13 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 对象
- 应用对象
- | 属性 | 类型 | 描述 |
- | -------- | -------- | -------- |
+ | 属性 | 类型 | 描述 |
+ | ---- | ------ | ---------------------------------------- |
| $def | Object | 使用this.$app.$def获取在app.js中暴露的对象。
>  **说明：**
> 应用对象不支持数据绑定，需主动触发UI更新。 |
示例代码
- ```
+ ```js
// app.js
export default {
onCreate() {
@@ -51,7 +51,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
};
```
- ```
+ ```js
// index.js页面逻辑代码
export default {
data: {
@@ -72,26 +72,26 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
- 页面对象
- | 属性 | 类型 | 描述 |
- | -------- | -------- | -------- |
- | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
data与private和public不能重合使用。 |
- | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
- | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
- | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 |
- | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
- | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
+ | 属性 | 类型 | 描述 |
+ | -------- | --------------- | ---------------------------------------- |
+ | data | Object/Function | 页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
data与private和public不能重合使用。 |
+ | $refs | Object | 持有注册过ref 属性的DOM元素或子组件实例的对象。示例见[获取DOM元素](#获取dom元素)。 |
+ | private | Object | 页面的数据模型，private下的数据属性只能由当前页面修改。 |
+ | public | Object | 页面的数据模型，public下的数据属性的行为与data保持一致。 |
+ | props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
+ | computed | Object | 用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。 |
## 方法
- 数据方法
- | 方法 | 参数 | 描述 |
- | -------- | -------- | -------- |
- | $set | key: string, value: any | 添加新的数据属性或者修改已有数据属性。
用法：
this.$set('key',value)：添加数据属性。 |
- | $delete | key: string | 删除数据属性。
用法：
this.$delete('key')：删除数据属性。 |
+ | 方法 | 参数 | 描述 |
+ | ------- | -------------------------------------- | ---------------------------------------- |
+ | $set | key: string, value: any | 添加新的数据属性或者修改已有数据属性。
用法：
this.$set('key',value)：添加数据属性。 |
+ | $delete | key: string | 删除数据属性。
用法：
this.$delete('key')：删除数据属性。 |
示例代码
- ```
+ ```js
// index.js
export default {
data: {
@@ -103,7 +103,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
getAppVersion() {
this.$set('keyMap.Version', '3.0');
console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0
-
+
this.$delete('keyMap');
console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
}
@@ -111,37 +111,37 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
- 公共方法
- | 方法 | 参数 | 描述 |
- | -------- | -------- | -------- |
- | $element | id: string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。
用法：
<div id='xxx'></div>
- this.$element('xxx')：获得id为xxx的组件对象。
- this.$element()：获得根组件对象。 |
- | $rootElement | 无 | 获取根组件对象。
用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 |
- | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
- | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
- | $child | id: string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
用法：
this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。 |
+ | 方法 | 参数 | 描述 |
+ | ------------ | --------------- | ---------------------------------------- |
+ | $element | id: string | 获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见[获取DOM元素](#获取dom元素)。
用法：
<div id='xxx'></div>
- this.$element('xxx')：获得id为xxx的组件对象。
- this.$element()：获得根组件对象。 |
+ | $rootElement | 无 | 获取根组件对象。
用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 |
+ | $root | 无 | 获得顶级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
+ | $parent | 无 | 获得父级ViewModel实例。[获取ViewModel](#获取viewmodel)示例。 |
+ | $child | id: string | 获得指定id的子级自定义组件的ViewModel实例。[获取ViewModel](#获取viewmodel)示例。
用法：
this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。 |
- 事件方法
- | 方法 | 参数 | 描述 |
- | -------- | -------- | -------- |
- | $watch | data: string, callback: string \| Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。
用法：
this.$watch('key', callback) |
+ | 方法 | 参数 | 描述 |
+ | ---------------------------------------- | ---- | ---- |
+ | $watch | data: string, callback: string \| Function | 观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见[自定义组件](../reference/arkui-js/js-components-custom-props.md)。
用法：
this.$watch('key', callback) | | |
- 页面方法
- | 方法 | 参数 | 描述 |
- | -------- | -------- | -------- |
+ | 方法 | 参数 | 描述 |
+ | --------------------- | -------------------------------- | ------------------------------- |
| scrollTo
6+ | scrollPageParam: ScrollPageParam | 将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。 |
**表1** ScrollPageParam
6+
-
- | 名称 | 类型 | 默认值 | 描述 |
- | -------- | -------- | -------- | -------- |
- | position | number | - | 指定滚动位置。 |
- | id | string | - | 指定需要滚动到的元素id。 |
- | duration | number | 300 | 指定滚动时长，单位为毫秒。 |
- | timingFunction | string | ease | 指定滚动动画曲线，可选值参考
[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 |
- | complete | () => void | - | 指定滚动完成后需要执行的回调函数。 |
+
+ | 名称 | 类型 | 默认值 | 描述 |
+ | -------------- | ----------------------- | ---- | ---------------------------------------- |
+ | position | number | - | 指定滚动位置。 |
+ | id | string | - | 指定需要滚动到的元素id。 |
+ | duration | number | 300 | 指定滚动时长，单位为毫秒。 |
+ | timingFunction | string | ease | 指定滚动动画曲线，可选值参考
[动画样式animation-timing-function](../reference/arkui-js/js-components-common-animation.md)。 |
+ | complete | () => void | - | 指定滚动完成后需要执行的回调函数。 |
示例：
- ```
+ ```js
this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})
```
@@ -150,14 +150,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
## 获取DOM元素
1. 通过$refs获取DOM元素
- ```
+ ```html
```
- ```
+ ```js
// index.js
export default {
data: {
@@ -182,14 +182,14 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
2. 通过$element获取DOM元素
- ```
+ ```html
```
- ```
+ ```js
// index.js
export default {
data: {
@@ -219,7 +219,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
根节点所在页面：
-```
+```html
@@ -230,7 +230,7 @@ JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语
```
-```
+```js
// root.js
export default {
data: {
@@ -243,7 +243,7 @@ export default {
自定义parent组件：
-```
+```html
@@ -253,7 +253,7 @@ export default {
```
-```
+```js
// parent.js
export default {
data: {
@@ -272,7 +272,7 @@ export default {
自定义child组件：
-```
+```html
child component clicked
@@ -280,7 +280,7 @@ export default {
```
-```
+```js
// child.js
export default {
data: {
diff --git a/zh-cn/application-dev/ui/ts-application-resource-access.md b/zh-cn/application-dev/ui/ts-application-resource-access.md
deleted file mode 100644
index d12e3fd86fb38f34f06b9528af1d1cf8bd87676c..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/ui/ts-application-resource-access.md
+++ /dev/null
@@ -1,171 +0,0 @@
-# 访问应用资源
-
-
-## 资源定义
-
-应用资源由开发者在工程的resources目录中定义，resources目录按照两级目录的形式来组织：
-
-- 一级目录为base目录、限定词目录以及rawfile目录
- - base目录是默认存在的目录。当应用的resources资源目录中没有与设备状态匹配的限定词目录时，会自动引用该目录中的资源文件。
- - 限定词目录需要开发者自行创建，其可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括移动国家码和移动网络码、语言、文字、国家或地区、横竖屏、设备类型、颜色模式和屏幕密度等维度，限定词之间通过下划线（_）或者中划线（-）连接。
- - 在引用rawfile中的资源时，不会根据系统的状态去匹配，rawfile目录中可以直接存放资源文件。
-
-- 二级目录为资源目录
- - 用于存放字符串、颜色、浮点数等基础元素，以及媒体等资源文件。
- - 当前支持的文件和资源类型如下：
- | 文件名 | 资源类型 |
- | -------- | -------- |
- | color.json | 颜色资源。 |
- | float.json | 间距、圆角、字体等资源。 |
- | string.json | 字符串资源。 |
- | plural.json | 字符串资源。 |
- | media目录 | 图片资源。 |
-
-
-## 资源引用
-
-在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
-
-引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
-
->  **说明：**
-> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
-
-
-## 示例
-
-base目录中部分自定义资源如下所示：
-
-
-```
- resources
- ├─ base
- │ ├─ element
- │ │ ├─ color.json
- │ │ ├─ string.json
- │ │ └─ float.json
- │ └─ media
- │ └─ my_background_image.png
- └─ rawfile
- ├─ test.png
- └─ newDir
- └─ newTest.png
-```
-
-color.json文件的内容如下：
-
-
-```
-{
- "color": [
- {
- "name": "color_hello",
- "value": "#ffff0000"
- },
- {
- "name": "color_world",
- "value": "#ff0000ff"
- }
- ]
-}
-```
-
-float.json文件的内容如下：
-
-
-```
-{
- "float":[
- {
- "name":"font_hello",
- "value":"28.0fp"
- },
- {
- "name":"font_world",
- "value":"20.0fp"
- }
- ]
-}
-```
-
-string.json文件的内容如下：
-
-
-```
-{
- "string":[
- {
- "name":"string_hello",
- "value":"Hello"
- },
- {
- "name":"string_world",
- "value":"World"
- },
- {
- "name":"message_arrive",
- "value":"We will arrive at %s."
- }
- ]
-}
-```
-
-plural.json文件的内容如下：
-
-
-```
-{
- "plural":[
- {
- "name":"eat_apple",
- "value":[
- {
- "quantity":"one",
- "value":"%d apple"
- },
- {
- "quantity":"other",
- "value":"%d apples"
- }
- ]
- }
- ]
-}
-```
-
- 在ets文件中，可以使用在resources目录中定义的资源。
-
-```
-Text($r('app.string.string_hello'))
- .fontColor($r('app.color.color_hello'))
- .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.string.string_world'))
- .fontColor($r('app.color.color_world'))
- .fontSize($r('app.float.font_world'))
-}
-
-Text($r('app.string.message_arrive', "five of the clock")) // 引用string资源，$r的第二个参数用于替换%s
- .fontColor($r('app.color.color_hello'))
- .fontSize($r('app.float.font_hello'))
-}
-
-Text($r('app.plural.eat_apple', 5, 5)) // plural$r引用，第一个指定plural资源，第二个参数指定单复数的数量，此处第三个数字为对%d的替换
- .fontColor($r('app.color.color_world'))
- .fontSize($r('app.float.font_world'))
-}
-
-Image($r('app.media.my_background_image')) // media资源的$r引用
-
-Image($rawfile('test.png')) // rawfile$r引用rawfile目录下图片
-
-Image($rawfile('newDir/newTest.png')) // rawfile$r引用rawfile目录下图片
-```
-
-
-## 相关实例
-
-针对访问应用资源，有以下相关实例可供参考：
-
-- [`ResourceManager`：资源管理器（eTS）（API8）](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)
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 b4354b222772bffddb301b77de9b8ef045103ee3..54c3703e6bf98ac25926741fe4fdc18bf25c3bbe 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
@@ -3,7 +3,7 @@
Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态属性，这些属性描述了应用程序运行的设备环境。Environment及其属性是不可变的，所有属性值类型均为简单类型。如下示例展示了从Environment获取语音环境：
-```
+```ts
Environment.EnvProp("accessibilityEnabled", "default");
var enable = AppStorage.Get("accessibilityEnabled");
```
@@ -13,20 +13,20 @@ accessibilityEnabled是Environment提供默认系统变量识别符。首先需
## Environment接口
-| key | 参数 | 返回值 | 说明 |
-| -------- | -------- | -------- | -------- |
-| EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
-| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 |
-| Keys | Array<string> | number | 返回关联的系统项。 |
+| key | 参数 | 返回值 | 说明 |
+| -------- | ---------------------------------------- | ------- | ---------------------------------------- |
+| EnvProp | key: string,
defaultValue: any | boolean | 关联此系统项到AppStorage中，建议在app启动时使用此接口。如果该属性在AppStorage已存在，返回false。请勿使用AppStorage中的变量，在调用此方法关联环境变量。 |
+| EnvProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联此系统项数组到AppStorage中。 |
+| Keys | Array<string> | number | 返回关联的系统项。 |
## Environment内置的环境变量
-| key | 类型 | 说明 |
-| -------- | -------- | -------- |
-| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
-| colorMode | ColorMode | 深浅色模式，可选值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 |
-| fontScale | number | 字体大小比例，取值范围为[0.85, 1.45]。 |
-| fontWeightScale | number | 字体权重比例，取值范围为[0.6, 1.6]。 |
-| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 |
-| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 |
+| key | 类型 | 说明 |
+| -------------------- | --------------- | ---------------------------------------- |
+| accessibilityEnabled | boolean | 无障碍屏幕朗读是否启用。 |
+| colorMode | ColorMode | 深浅色模式，可选值为：
- ColorMode.LIGHT：浅色模式；
- ColorMode.DARK：深色模式。 |
+| fontScale | number | 字体大小比例，取值范围为[0.85, 1.45]。 |
+| fontWeightScale | number | 字体权重比例，取值范围为[0.6, 1.6]。 |
+| layoutDirection | LayoutDirection | 布局方向类型，可选值为：
- LayoutDirection.LTR：从左到右；
- LayoutDirection.RTL：从右到左。 |
+| languageCode | string | 设置当前系统的语言，小写字母，例如zh。 |
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 43a1fe25b4c5a87010b9ac00875f5b747af66439..6c8c29d7ca078f56ae8fccbd14aaf61fb75931d9 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
@@ -3,21 +3,22 @@
方舟开发框架通过PersistentStorage类提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。
-| 方法 | 参数说明 | 返回值 | 定义 |
-| -------- | -------- | -------- | -------- |
-| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：
- 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
- 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
- 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 |
-| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 |
-| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 |
-| Keys | void | Array<string> | 返回所有持久化属性的标记。 |
+| 方法 | 参数说明 | 返回值 | 定义 |
+| ------------ | ---------------------------------------- | ------------------- | ---------------------------------------- |
+| PersistProp | key : string
defaultValue: T | void | 关联命名的属性在AppStorage变为持久化数据，赋值覆盖顺序如下：
- 首先，如果该属性存在于AppStorage，将Persistent中的数据复写为AppStorage中的属性值。
- 其次，Persistent中有此命名的属性，使用Persistent中的属性值。
- 最后，以上条件均不满足，则使用defaultValue，不支持null和undefined。 |
+| DeleteProp | key: string | void | 取消双向数据绑定，该属性值将从持久存储中删除。 |
+| PersistProps | keys: {
key: string,
defaultValue: any
}[] | void | 关联多个命名的属性绑定。 |
+| Keys | void | Array<string> | 返回所有持久化属性的标记。 |
->  **说明：**
+> **说明：**
> - PersistProp接口使用时，需要保证输入对应的key应当在AppStorage存在。
->
+>
> - DeleteProp接口使用时，只能对本次启动已经link过的数据生效。
-```
+```ts
+// xxx.ets
PersistentStorage.PersistProp("highScore", "0");
@Entry
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 4a2c477f8f873575be97ca9b913ab675c0adf414..6562cc1a9e3fd1b019432026952d5ec616b3c885 100644
--- a/zh-cn/application-dev/ui/ts-application-states-appstorage.md
+++ b/zh-cn/application-dev/ui/ts-application-states-appstorage.md
@@ -14,20 +14,20 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## 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。 |
-| SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 |
-| Prop | key: string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。
>  **说明：**
> 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 | 判断对应键值的属性是否存在。 |
-| Keys | void | array<string> | 返回包含所有键的字符串数组。 |
-| Delete | key: string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 |
-| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 |
-| IsMutable | key: string | boolean | 返回此属性是否存在并且是否可以改变。 |
+| 方法 | 参数说明 | 返回值 | 定义 |
+| ----------- | ---------------------------------------- | ------------------- | ---------------------------------------- |
+| 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。 |
+| SetAndProp | propName: string,
defaultValue: S | @Prop | 与Prop接口类似，如果当前的key保存于AppStorage，则返回该key对应的value。如果该key未被创建，则创建一个对应default值的Prop返回。 |
+| Prop | key: string | @Prop | 如果存在具有给定键的属性，则返回此属性的单向数据绑定。该单向绑定意味着只能通过AppStorage将属性的更改同步到变量或者组件。该方法返回的变量为不可变变量，适用于可变和不可变的状态属性，如果具有此键的属性不存在则返回undefined。
>  **说明：**
> 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 | 判断对应键值的属性是否存在。 |
+| Keys | void | array<string> | 返回包含所有键的字符串数组。 |
+| Delete | key: string | boolean | 删除key指定的键值对，如果存在且删除成功返回true，不存在或删除失败返回false。 |
+| Clear | void | boolean | 删除所有的属性，如果当前有状态变量依旧引用此属性，则返回false。 |
+| IsMutable | key: string | boolean | 返回此属性是否存在并且是否可以改变。 |
## AppStorage与组件同步
@@ -49,7 +49,8 @@ AppStorage的选择状态属性可以与不同的数据源或数据接收器同
## 示例
-```
+```ts
+// xxx.ets
let varA = AppStorage.Link('varA')
let envLang = AppStorage.Prop('languageCode')
diff --git a/zh-cn/application-dev/ui/ts-attribution-configuration.md b/zh-cn/application-dev/ui/ts-attribution-configuration.md
index a497ba586acbc78f04d4ba8e893a1217ade85e1e..64834f2571e3819a8c3cb5084b42c150f6ff6a2d 100644
--- a/zh-cn/application-dev/ui/ts-attribution-configuration.md
+++ b/zh-cn/application-dev/ui/ts-attribution-configuration.md
@@ -5,14 +5,14 @@
- 配置Text组件的字体大小属性：
- ```
+ ```ts
Text('123')
.fontSize(12)
```
- 使用“.”操作进行链式调用并同时配置组件的多个属性，如下所示：
- ```
+ ```ts
Image('a.jpg')
.alt('error.jpg')
.width(100)
@@ -21,7 +21,7 @@
- 除了直接传递常量参数外，还可以传递变量或表达式，如下所示：
- ```
+ ```ts
// Size, count, and offset are private variables defined in the component.
Text('hello')
.fontSize(this.size)
@@ -32,7 +32,7 @@
- 对于内置组件，框架还为其属性预定义了一些枚举类型，供开发人员调用，枚举值可以作为参数传递。枚举类型必须满足参数类型要求，有关特定属性的枚举类型定义的详细信息。可以按以下方式配置Text组件的颜色和字体属性：
- ```
+ ```ts
Text('hello')
.fontSize(20)
.fontColor(Color.Red)
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 4c7389173443f3ba02874dff923ed909dccacd06..926d1d1c4f49a35598ef46597382285468fa50fb 100644
--- a/zh-cn/application-dev/ui/ts-child-component-configuration.md
+++ b/zh-cn/application-dev/ui/ts-child-component-configuration.md
@@ -5,7 +5,7 @@
- 以下是简单的Column示例：
- ```
+ ```ts
Column() {
Text('Hello')
.fontSize(100)
@@ -18,7 +18,7 @@
- 可以嵌套多个子组件：
- ```
+ ```ts
Column() {
Column() {
Button() {
diff --git a/zh-cn/application-dev/ui/ts-component-based-builder.md b/zh-cn/application-dev/ui/ts-component-based-builder.md
index fd0d4f5be109fdd4cb43df3f78244b93b08657be..1a380688ea6f740b09291bbc41d5353a2819053f 100644
--- a/zh-cn/application-dev/ui/ts-component-based-builder.md
+++ b/zh-cn/application-dev/ui/ts-component-based-builder.md
@@ -4,7 +4,8 @@
@Builder装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。\@Builder装饰方法的功能和语法规范与[build函数](ts-function-build.md)相同。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CompA {
@@ -51,7 +52,8 @@ struct CompA {
### 参数初始化组件
通过参数初始化组件时，将@Builder装饰的方法赋值给@BuilderParam修饰的属性，并在自定义组件内调用content属性值。对@BuilderParam修饰的属性进行赋值时不带参数（如：`content: this.specificParam`），则此属性的类型需定义成无返回值的函数（如：`@BuilderParam content: () => void`）。若带参数（如：`callContent: this.specificParam1("111")`），则此属性的类型需定义成any（如：`@BuilderParam callContent: any;`）。
-```
+```ts
+// xxx.ets
@Component
struct CustomContainer {
header: string = "";
@@ -100,7 +102,8 @@ struct CustomContainerUser {
在自定义组件中使用@BuilderParam修饰的属性接收尾随闭包（在初始化自定义组件时，组件名称紧跟一个大括号“{}”形成尾随闭包场景（`CustomComponent(){}`）。开发者可把尾随闭包看做一个容器，向其填充内容，如在闭包内增加组件（`{Column(){Text("content")}`），闭包内语法规范与[build](../ui/ts-function-build.md)一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。
示例：在闭包内增加Column组件并添加点击事件，在新增的Column组件内调用@Builder修饰的specificParam方法，点击Column组件后该改变自定义组件中header的属性值为“changeHeader”。并且在初始化自定义组件时会把尾随闭包的内容赋值给使用@BuilderParam修饰的closer属性。
-```
+```ts
+// xxx.ets
@Component
struct CustomContainer {
header: string = "";
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 fcf5a833d2b567ecc4d2d423d784a31b878f269d..e5f624b3288d5fa9ccdc5dfc68a8f4ae6c370a15 100644
--- a/zh-cn/application-dev/ui/ts-component-based-component.md
+++ b/zh-cn/application-dev/ui/ts-component-based-component.md
@@ -17,15 +17,15 @@
> **说明：**
>
-> - 自定义组件必须定义build方法。
->
-> - 自定义组件禁止自定义构造函数。
+> - 自定义组件必须定义build方法。
+>
+> - 自定义组件禁止自定义构造函数。
如下代码定义了MyComponent组件：
-```
+```ts
@Component
struct MyComponent {
build() {
@@ -44,7 +44,7 @@ MyComponent的build方法会在初始渲染时执行，此外，当组件中的
以下代码使用了MyComponent组件：
-```
+```ts
@Component
struct ParentComponent {
build() {
@@ -61,7 +61,7 @@ struct ParentComponent {
可以多次使用MyComponent，并在不同的组件中进行重用：
-```
+```ts
@Component
struct ParentComponent {
build() {
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 72b8c9cb6b64b2e410caff9dc3934d6cc171c4aa..13082cfa353e705fcd464a21cfba17b7d0b61f21 100644
--- a/zh-cn/application-dev/ui/ts-component-based-customdialog.md
+++ b/zh-cn/application-dev/ui/ts-component-based-customdialog.md
@@ -3,7 +3,7 @@
@CustomDialog装饰器用于装饰自定义弹窗。
-```
+```ts
// custom-dialog-demo.ets
@CustomDialog
struct DialogExample {
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 24e1ec5772b4acae04f8e6b85b9c38013bb5b9d7..74e81fe05e1681b687a5b6827d6c41bbd903bac4 100644
--- a/zh-cn/application-dev/ui/ts-component-based-entry.md
+++ b/zh-cn/application-dev/ui/ts-component-based-entry.md
@@ -3,14 +3,14 @@
用@Entry装饰的自定义组件用作页面的默认入口组件，加载页面时，将首先创建并呈现@Entry装饰的自定义组件。
->  **说明：**
+> **说明：**
> 在单个源文件中，最多可以使用@Entry装饰一个自定义组件。
@Entry的用法如下：
-```
+```ts
// Only MyComponent decorated by @Entry is rendered and displayed. "hello world" is displayed, but "goodbye" is not displayed.
@Entry
@Component
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 d8f8c63f1a42e41d87082f4efaa1477604026ae7..567f5b7f04aa76809a2785c5ddaee22a34472cfe 100644
--- a/zh-cn/application-dev/ui/ts-component-based-extend.md
+++ b/zh-cn/application-dev/ui/ts-component-based-extend.md
@@ -3,7 +3,8 @@
@Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过@Extend装饰器可以快速定义并复用组件的自定义样式。
-```
+```ts
+// xxx.ets
@Extend(Text) function fancy(fontSize: number) {
.fontColor(Color.Red)
.fontSize(fontSize)
@@ -25,5 +26,5 @@ struct FancyUse {
```
->  **说明：**
+> **说明：**
> @Extend装饰器不能用在自定义组件struct定义框内。
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 b7c790de7201fddbf0e6fe68cff729bf06fa9933..574ba980deb2eb261fe82c40ddf06729b66f3bd6 100644
--- a/zh-cn/application-dev/ui/ts-component-based-preview.md
+++ b/zh-cn/application-dev/ui/ts-component-based-preview.md
@@ -3,14 +3,15 @@
用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。
->  **说明：**
+> **说明：**
> 在单个源文件中，最多可以使用10个@Preview装饰自定义组件。
@Preview的用法如下：
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MyComponent {
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 03a0ab8c6b61890e9456cd5123b130d156046723..288081d69ff3d0c4a7908c883319d5a4f430f7f0 100644
--- a/zh-cn/application-dev/ui/ts-component-based-styles.md
+++ b/zh-cn/application-dev/ui/ts-component-based-styles.md
@@ -7,7 +7,8 @@
@Styles可以定义在组件内或组件外，在组件外定义时需在方法前添加function关键字，组件内定义时不需要添加function关键字。
-```
+```ts
+// xxx.ets
@Styles function globalFancy() {
.backgroundColor(Color.Red)
}
@@ -39,7 +40,8 @@ struct FancyUse {
在StateStyles内可以直接调用组件外定义的Styles，但需要通过this关键字调用组件内定义的Styles。
-```
+```ts
+// xxx.ets
@Styles function globalFancy() {
.width(100)
.height(100)
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 1786a365cb4098141f02e8a0f9c2a79993abd91b..2ec686adbe79f83c44d548b31d928c51d7f841f9 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
@@ -46,7 +46,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ParentComp {
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 6855651df3ac977b3237e81666120a6d191e4842..e6aef9bf933352edd56b46dfc8050cc91259b377 100644
--- a/zh-cn/application-dev/ui/ts-component-states-link.md
+++ b/zh-cn/application-dev/ui/ts-component-states-link.md
@@ -14,13 +14,14 @@
- 创建自定义组件时需要将变量的引用传递给@Link变量，在创建组件的新实例时，必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化，@State变量可以通过`'$'`操作符创建引用。
->  说明：
+> 说明：
> @Link变量不能在组件内部进行初始化。
## 简单类型示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Player {
@@ -53,7 +54,8 @@ struct PlayButton {
## 复杂类型示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Parent {
@@ -93,7 +95,8 @@ struct Child {
## @Link、@State和@Prop结合使用示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ParentView {
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 e62d23fa7646714a0edfe187920213fe77c7f27c..997bf63e91803ccfef3f03fcad26021bc28968b8 100644
--- a/zh-cn/application-dev/ui/ts-component-states-prop.md
+++ b/zh-cn/application-dev/ui/ts-component-states-prop.md
@@ -16,7 +16,8 @@
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct ParentComponent {
@@ -65,5 +66,5 @@ struct CountDownComponent {
在上述示例中，当按“+1”或“-1”按钮时，父组件状态发生变化，重新执行build方法，此时将创建一个新的CountDownComponent组件。父组件的countDownStartValue状态属性被用于初始化子组件的@Prop变量，当按下子组件的“Try again”按钮时，其@Prop变量count将被更改，CountDownComponent重新渲染。但是count值的更改不会影响父组件的countDownStartValue值。
->  **说明：**
+> **说明：**
> 创建新组件实例时，必须初始化其所有@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 6db720203f0641239c0c4084deca000201db9893..2dd964f10e9d8ac6c85741c57a8ce9051a5ad0cf 100644
--- a/zh-cn/application-dev/ui/ts-component-states-state.md
+++ b/zh-cn/application-dev/ui/ts-component-states-state.md
@@ -18,7 +18,8 @@
## 简单类型的状态属性示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MyComponent {
@@ -42,8 +43,9 @@ struct MyComponent {
## 复杂类型的状态变量示例
-```
+```ts
// Customize the status data class.
+// xxx.ets
class Model {
value: string
constructor(value: string) {
@@ -97,6 +99,6 @@ struct MyComponent {
- EntryComponent中有多个MyComponent组件实例，第一个MyComponent内部状态的更改不会影响第二个MyComponent；
- 创建MyComponent实例时通过变量名给组件内的变量进行初始化，如：
- ```
+ ```ts
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 25b4d88fe9516f416b22044a4ce099bc15062df0..17c9aa3f3fa21e28cb37de06095141bde7ec7ddf 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
@@ -8,13 +8,13 @@
- Image组件的必选参数src：
- ```
+ ```ts
Image('http://xyz/a.jpg')
```
- Text组件的必选参数content：
- ```
+ ```ts
Text('123')
```
@@ -22,7 +22,7 @@
变量或表达式也可以用于参数赋值，其中表达式返回的结果类型必须满足参数类型要求。例如，传递变量或表达式来构造Image和Text组件的参数：
-```
+```ts
// imagePath, where imageUrl is a private data variable defined in the component.
Image(this.imagePath)
Image('http://' + this.imageUrl)
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 965671a1e26d392e4083b1e17b30afce9a0ef02e..761b9375f01599f66994b6cf459a80b0b55fb262 100644
--- a/zh-cn/application-dev/ui/ts-custom-component-initialization.md
+++ b/zh-cn/application-dev/ui/ts-custom-component-initialization.md
@@ -4,12 +4,12 @@
- 本地初始化，例如：
- ```
+ ```ts
@State counter: Counter = new Counter()
```
- 在构造组件时通过构造参数初始化，例如：
- ```
+ ```ts
MyComponent({counter: $myCounter})
```
@@ -17,17 +17,17 @@
具体允许哪种方式取决于状态变量的装饰器：
-| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 |
-| -------- | -------- | -------- |
-| @State | 必须 | 可选 |
-| @Prop | 禁止 | 必须 |
-| @Link | 禁止 | 必须 |
-| @StorageLink | 必须 | 禁止 |
-| @StorageProp | 必须 | 禁止 |
-| @Provide | 必须 | 可选 |
-| @Consume | 禁止 | 禁止 |
-| @ObjectLink | 禁止 | 必须 |
-| 常规成员变量 | 推荐 | 可选 |
+| 装饰器类型 | 本地初始化 | 通过构造函数参数初始化 |
+| ------------ | ----- | ----------- |
+| @State | 必须 | 可选 |
+| @Prop | 禁止 | 必须 |
+| @Link | 禁止 | 必须 |
+| @StorageLink | 必须 | 禁止 |
+| @StorageProp | 必须 | 禁止 |
+| @Provide | 必须 | 可选 |
+| @Consume | 禁止 | 禁止 |
+| @ObjectLink | 禁止 | 必须 |
+| 常规成员变量 | 推荐 | 可选 |
从上表中可以看出：
@@ -42,13 +42,13 @@
| 从父组件中的变量（下）到子组件中的变量（右） | @State | @Link | @Prop | 常规变量 |
-| -------- | -------- | -------- | -------- | -------- |
-| @State | 不允许 | 允许 | 允许 | 允许 |
-| @Link | 不允许 | 允许 | 不推荐 | 允许 |
-| @Prop | 不允许 | 不允许 | 允许 | 允许 |
-| @StorageLink | 不允许 | 允许 | 不允许 | 允许 |
-| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 |
-| 常规变量 | 允许 | 不允许 | 不允许 | 允许 |
+| ---------------------- | ------ | ----- | ----- | ---- |
+| @State | 不允许 | 允许 | 允许 | 允许 |
+| @Link | 不允许 | 允许 | 不推荐 | 允许 |
+| @Prop | 不允许 | 不允许 | 允许 | 允许 |
+| @StorageLink | 不允许 | 允许 | 不允许 | 允许 |
+| @StorageProp | 不允许 | 不允许 | 不允许 | 允许 |
+| 常规变量 | 允许 | 不允许 | 不允许 | 允许 |
从上表中可以看出：
@@ -69,7 +69,8 @@
## 示例
-```
+```ts
+// xxx.ets
class ClassA {
public a:number
constructor(a: number) {
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 9c1cd67d3df25064d8f45d9d63ecdf2b5bf9ae8d..7057e34756c738d113ba3e65bc67d51c86491a20 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
@@ -5,18 +5,19 @@
## 生命周期回调函数定义
-| 函数名 | 描述 |
-| -------- | -------- |
-| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
+| 函数名 | 描述 |
+| ---------------- | ---------------------------------------- |
+| aboutToAppear | 函数在创建自定义组件的新实例后，在执行其build函数之前执行。允许在aboutToAppear函数中改变状态变量，更改将在后续执行build函数中生效。 |
| aboutToDisappear | 函数在自定义组件析构消耗之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。 |
-| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
-| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
-| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 |
+| onPageShow | 页面显示时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
+| onPageHide | 页面消失时触发一次，包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。 |
+| onBackPress | 当用户点击返回按钮时触发，仅\@Entry修饰的自定义组件生效。
- 返回true表示页面自己处理返回逻辑, 不进行页面路由。
- 返回false表示使用默认的返回逻辑。
- 不返回值会作为false处理。 |
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CountDownTimerComponent {
@@ -48,7 +49,7 @@ struct CountDownTimerComponent {
上述示例表明，生命周期函数对于允许CountDownTimerComponent管理其计时器资源至关重要，类似的函数也包括异步从网络请求加载资源。
->  **说明：**
+> **说明：**
> - 允许在生命周期函数中使用Promise和异步回调函数，比如网络资源获取，定时器设置等；
->
+>
> - 不允许在生命周期函数中使用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 9ded73d381b0a29f0d6a1115a65a778596dac212..aa5637d2a01dd3701d06c924822a20a6ef13086b 100644
--- a/zh-cn/application-dev/ui/ts-event-configuration.md
+++ b/zh-cn/application-dev/ui/ts-event-configuration.md
@@ -4,7 +4,7 @@
- 使用lambda表达式配置组件的事件方法：
- ```
+ ```ts
// Counter is a private data variable defined in the component.
Button('add counter')
.onClick(() => {
@@ -14,7 +14,7 @@
- 使用匿名函数表达式配置组件的事件方法，要求使用bind，以确保函数体中的this引用包含的组件：
- ```
+ ```ts
// Counter is a private data variable defined in the component.
Button('add counter')
.onClick(function () {
@@ -24,13 +24,13 @@
- 使用组件的成员函数配置组件的事件方法：
- ```
+ ```ts
myClickHandler(): void {
// do something
}
-
+
...
-
+
Button('add counter')
.onClick(this.myClickHandler)
```
diff --git a/zh-cn/application-dev/ui/ts-framework-directory.md b/zh-cn/application-dev/ui/ts-framework-directory.md
index 70c440aaa079787674094c18b2218ac22eb2d186..3e54186c563e33551e47c32ba34f27a165aa456b 100644
--- a/zh-cn/application-dev/ui/ts-framework-directory.md
+++ b/zh-cn/application-dev/ui/ts-framework-directory.md
@@ -24,7 +24,7 @@ FA应用的eTS模块(entry/src/main)的典型开发目录结构如下：
- **common**目录用于存放公共代码文件，比如：自定义组件和公共方法。
->  **说明：**
+> **说明：**
>
> - 资源目录resources文件夹位于src/main下，此目录下资源文件的详细规范以及子目录结构规范参看[资源文件的分类](../quick-start/basic-resource-file-categories.md)。
>
diff --git a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md
index ffc32f5b1b0b2c7c51fb17f919a5f93ea70a6fef..3d8a3b5709b49781d3aa3d51dafdf38c7ec2a3b3 100644
--- a/zh-cn/application-dev/ui/ts-framework-file-access-rules.md
+++ b/zh-cn/application-dev/ui/ts-framework-file-access-rules.md
@@ -12,7 +12,8 @@
## 示例
-```
+```ts
+// xxx.ets
import { FoodData, FoodList } from "../common/utils/utils.ets";
@Entry
@@ -33,7 +34,7 @@ struct FoodCategoryList {
导入文件示例：
-```
+```ts
//common/utils/utils.ets
export class FoodData {
diff --git a/zh-cn/application-dev/ui/ts-framework-js-tag.md b/zh-cn/application-dev/ui/ts-framework-js-tag.md
index c86383841617c4f0157c9a6371f82e9cf54e8da1..fd31748b849bd62ea9379e35ab82ad5b0f7f9423 100644
--- a/zh-cn/application-dev/ui/ts-framework-js-tag.md
+++ b/zh-cn/application-dev/ui/ts-framework-js-tag.md
@@ -3,19 +3,19 @@
开发框架需要应用的config.json中配置相关的js标签，其中包含了实例名称、页面路由、视图窗口配置信息。
-| 标签 | 类型 | 默认值 | 必填 | 描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| name | string | default | 是 | 标识ETS实例的名字。 |
-| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 |
-| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 |
-| mode | Object | - | 否 | 配置Js Component运行类型与语法风格，详见[mode](#mode)说明。 |
+| 标签 | 类型 | 默认值 | 必填 | 描述 |
+| ------ | ------ | ------- | ---- | ---------------------------------------- |
+| name | string | default | 是 | 标识ETS实例的名字。 |
+| pages | Array | - | 是 | 页面路由信息，详见[pages](#pages)说明。 |
+| window | Object | - | 否 | 视图窗口配置信息，详见[window](#window)说明。 |
+| mode | Object | - | 否 | 配置Js Component运行类型与语法风格，详见[mode](#mode)说明。 |
## pages
定义每个页面入口组件的路由信息，每个页面由页面路径和页面名组成，页面的文件名就是页面名。比如：
-```
+```json
{
"pages": [
"pages/index",
@@ -24,11 +24,11 @@
}
```
->  **说明：**
+> **说明：**
> - pages列表中第一个页面为应用的首页入口。
->
+>
> - 页面文件名不能使用组件名称，比如：Text.ets、Button.ets等。
->
+>
> - 每个页面文件中必须包含[页面入口组件](../ui/ts-component-based-entry.md)(\@Entry装饰)。
@@ -36,11 +36,11 @@
window用于配置相关视图显示窗口，支持配置如下属性：
-| 类型 | 默认值 | 说明 |
-| -------- | -------- | -------- |
-| designWidth | - | 配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见[lpx像素单位](../ui/ts-pixel-units.md)说明。 |
+| 类型 | 默认值 | 说明 |
+| ----------- | ---- | ---------------------------------------- |
+| designWidth | - | 配置视图显示的逻辑宽度，缺省默认720（智能穿戴默认454）。视图显示的逻辑宽度决定了lpx像素单位大小，如designWidth配置720时，在视图宽度为1440物理像素时，1lpx为2物理像素。详见[lpx像素单位](../ui/ts-pixel-units.md)说明。 |
-```
+```json
{
...
"window": {
@@ -55,12 +55,12 @@ window用于配置相关视图显示窗口，支持配置如下属性：
mode用于配置JS Component的运行类型与语法风格，支持如下属性：
-| 类型 | 默认值 | 说明 |
-| -------- | -------- | -------- |
-| type | - | 配置该JS Component的运行类型，可选值为：
- pageAbility：以ability的方式运行该JS Component。
- form：以卡片的方式运行该JS Component。 |
-| syntax | - | 配置该JS Component的语法风格，可选值为：
- hml：以hml/css/js风格进行编写。
- ets：以声明式语法风格进行编写。 |
+| 类型 | 默认值 | 说明 |
+| ------ | ---- | ---------------------------------------- |
+| type | - | 配置该JS Component的运行类型，可选值为：
- pageAbility：以ability的方式运行该JS Component。
- form：以卡片的方式运行该JS Component。 |
+| syntax | - | 配置该JS Component的语法风格，可选值为：
- hml：以hml/css/js风格进行编写。
- ets：以声明式语法风格进行编写。 |
->  **说明：**
+> **说明：**
> 不支持同时配置type类型为form，syntax类型为ets。
@@ -68,7 +68,7 @@ mode用于配置JS Component的运行类型与语法风格，支持如下属性
config.json:
-```
+```json
{
"app": {
"bundleName": "com.example.player",
diff --git a/zh-cn/application-dev/ui/ts-function-build.md b/zh-cn/application-dev/ui/ts-function-build.md
index 240d262cddc48ade5dcea88a66de7bb284e9b2db..82d6b93c4f563e013c6d3c9b8930d4d4dca34334 100644
--- a/zh-cn/application-dev/ui/ts-function-build.md
+++ b/zh-cn/application-dev/ui/ts-function-build.md
@@ -3,12 +3,12 @@
build函数满足Builder构造器接口定义，用于定义组件的声明式UI描述。必须遵循上述Builder接口约束，在build方法中以声明式方式进行组合自定义组件或系统内置组件，在组件创建和更新场景中都会调用build方法。
-```
+```ts
interface Builder {
build: () => void
}
```
->  **说明：**
+> **说明：**
> 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 3b56f1795a766404c5edf60a7822158e29ba80ce..d155cd948d690b9d9fee99f50c0e1d15af18bb46 100644
--- a/zh-cn/application-dev/ui/ts-general-ui-concepts.md
+++ b/zh-cn/application-dev/ui/ts-general-ui-concepts.md
@@ -5,8 +5,9 @@
## HelloWorld基本示例
-```
+```ts
// An example of displaying Hello World. After you click the button, Hello UI is displayed.
+// xxx.ets
@Entry
@Component
struct Hello {
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 3166aba4f90567802fba7c869b2c0be25d15e94d..020490d649adba95d3dfe17fc0693d9c356e17e5 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
@@ -4,28 +4,29 @@ Provide作为数据的提供方，可以更新其子孙节点的数据，并触
表1 @Provide
-| 名称 | 说明 |
-| -------- | -------- |
-| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
-| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 |
-| 初始值 | 必须制定初始值。 |
+| 名称 | 说明 |
+| ------- | ---------------------------------------- |
+| 装饰器参数 | 是一个string类型的常量，用于给装饰的变量起别名。如果规定别名，则提供对应别名的数据更新。如果没有，则使用变量名作为别名。推荐使用@Provide("alias")这种形式。 |
+| 同步机制 | @Provide的变量类似@state，可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量，反向修改@State变量。 |
+| 初始值 | 必须制定初始值。 |
| 页面重渲染场景 | 触发页面渲染的修改：
- 基础类型（boolean，string，number）变量的改变；
- @Observed class类型变量及其属性的修改；
- 添加，删除，更新数组中的元素。 |
表2 @Consume
-| 类型 | 说明 |
-| -------- | -------- |
-| 初始值 | 不可设置默认值。 |
+| 类型 | 说明 |
+| ---- | -------- |
+| 初始值 | 不可设置默认值。 |
->  **说明：**
+> **说明：**
> 使用@Provide 和@Consume时避免循环引用导致死循环。
其他属性说明与Provide一致。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CompA {
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 ab86d632486c287664da6a25e227fb5b383e31c5..7a76f0d0c4fa4a308610b992697f2c8b71f4b368 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
@@ -120,7 +120,7 @@ struct ViewB {
### 案例2
```ts
-//父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新
+// 父组件ViewB中的类对象ClassA与子组件ViewA保持数据同步时，可以使用@ObjectLink和@Observed，绑定该数据对象的父组件和其他子组件同步更新
var nextID: number = 0;
@Observed
class ClassA {
diff --git a/zh-cn/application-dev/ui/ts-other-states-watch.md b/zh-cn/application-dev/ui/ts-other-states-watch.md
index 40c9dd2d5047db2e43be2f6d0b6ae130cb42317b..b1a6feb21e920d193d44e5a8b06f8fe79bd20e4a 100644
--- a/zh-cn/application-dev/ui/ts-other-states-watch.md
+++ b/zh-cn/application-dev/ui/ts-other-states-watch.md
@@ -3,7 +3,7 @@
@Watch用于监听状态变量的变化，语法结构为：
-```
+```ts
@State @Watch("onChanged") count : number = 0
```
@@ -14,7 +14,8 @@
装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink装饰的变量可以监听其变化。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct CompA {
diff --git a/zh-cn/application-dev/ui/ts-parameterless-configuration.md b/zh-cn/application-dev/ui/ts-parameterless-configuration.md
index 51a176b90867e515db529c44084c17d756ba71b2..b328a96662d96cced6ec5d664aede1f3e2bdc355 100644
--- a/zh-cn/application-dev/ui/ts-parameterless-configuration.md
+++ b/zh-cn/application-dev/ui/ts-parameterless-configuration.md
@@ -4,7 +4,7 @@
组件的接口定义不包含必选构造参数，组件后面的“()”中不需要配置任何内容。例如，Divider组件不包含构造参数：
-```
+```ts
Column() {
Text('item 1')
Divider() // No parameter configuration of the divider component
diff --git a/zh-cn/application-dev/ui/ts-pixel-units.md b/zh-cn/application-dev/ui/ts-pixel-units.md
index 928baecba03f8f12aefae155be0df96604ebd893..eda7b03168d427675641436eeeef4cf75fed7de2 100644
--- a/zh-cn/application-dev/ui/ts-pixel-units.md
+++ b/zh-cn/application-dev/ui/ts-pixel-units.md
@@ -3,31 +3,32 @@
为开发者提供4种像素单位，框架采用vp为基准数据单位。
-| 名称 | 描述 |
-| -------- | -------- |
-| px | 屏幕物理像素单位。 |
-| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 |
-| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 |
-| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 |
+| 名称 | 描述 |
+| ---- | ---------------------------------------- |
+| px | 屏幕物理像素单位。 |
+| vp | 屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。 |
+| fp | 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。 |
+| lpx | 视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过[designWidth](../ui/ts-framework-js-tag.md)配置）的比值。如配置designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。 |
## 像素单位转换
提供其他单位与px单位互相转换的方法。
-| 接口 | 描述 |
-| -------- | -------- |
-| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。 |
-| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。 |
-| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 |
-| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 |
+| 接口 | 描述 |
+| ---------------------------------------- | ---------------------- |
+| vp2px(value : number) : number | 将vp单位的数值转换为以px为单位的数值。 |
+| px2vp(value : number) : number | 将px单位的数值转换为以vp为单位的数值。 |
+| fp2px(value : number) : number | 将fp单位的数值转换为以px为单位的数值。 |
+| px2fp(value : number) : number | 将px单位的数值转换为以fp为单位的数值。 |
| lpx2px(value : number) : number | 将lpx单位的数值转换为以px为单位的数值。 |
| px2lpx(value : number) : number | 将px单位的数值转换为以lpx为单位的数值。 |
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct Example {
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 a4f390c0b09714c13a1ad5bd109df8c6a298aeef..387c082ab3be7adff6fae61fa0538f10d487b873 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
@@ -3,7 +3,7 @@
开发框架提供循环渲染（ForEach组件）来迭代数组，并为每个数组项创建相应的组件。ForEach定义如下：
-```
+```ts
ForEach(
arr: any[], // Array to be iterated
itemGenerator: (item: any, index?: number) => void, // child component generator
@@ -20,26 +20,26 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGen
表1 参数说明
-| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| 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中的所有节点都将重建。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| ------------- | ---------------------------------------- | ---- | ---- | ---------------------------------------- |
+| 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中的所有节点都将重建。 |
->  **说明：**
+> **说明：**
> - 必须在容器组件内使用；
->
+>
> - 生成的子组件允许在ForEach的父容器组件中，允许子组件生成器函数中包含if/else条件渲染，同时也允许ForEach包含在if/else条件渲染语句中；
->
+>
> - 子项生成器函数的调用顺序不一定和数组中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
-> ```
+> ```ts
> ForEach(anArray, item => {Text(`${++counter}. item.label`)})
> ```
->
+>
> 正确的示例如下：
->
-> ```
+>
+> ```ts
> ForEach(anArray.map((item1, index1) => { return { i: index1 + 1, data: item1 }; }),
> item => Text(`${item.i}. item.data.label`),
> item => item.data.id.toString())
@@ -50,7 +50,8 @@ ForEach(arr: any[],itemGenerator: (item: any, index?: number) => void, keyGen
简单类型数组示例：
-```
+```ts
+// xxx.ets
@Entry
@Component
struct MyComponent {
@@ -76,7 +77,8 @@ struct MyComponent {
```
复杂类型数组示例：
-```
+```ts
+// xxx.ets
class Month {
year: number
month: number
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 8bbe9f8734f6f0d523bb60502fd0fd4efabda4c0..fc496c42b66c5d45e44490b5c8356123f14fafd6 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
@@ -3,13 +3,13 @@
使用if/else进行条件渲染。
->  **说明：**
+> **说明：**
> - if条件语句可以使用状态变量。
->
+>
> - 使用if可以使子组件的渲染依赖条件语句。
->
+>
> - 必须在容器组件内使用。
->
+>
> - 某些容器组件限制子组件的类型或数量。将if放置在这些组件内时，这些限制将应用于if和else语句内创建的组件。例如，Grid组件的子组件仅支持GridItem组件，在Grid组件内使用if时，则if条件语句内仅允许使用GridItem组件。
@@ -17,7 +17,7 @@
使用if条件语句：
-```
+```ts
Column() {
if (this.count > 0) {
Text('count is positive')
@@ -29,7 +29,7 @@ Column() {
使用if、else if、else条件语句：
-```
+```ts
Column() {
if (this.count < 0) {
Text('count is negative')
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 1b3604307c78cd28b1c4d14ecb92e39f4b9a7bc5..7c70032decd5629764a49e0998cc12bc6285147a 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
@@ -3,7 +3,7 @@
开发框架提供数据懒加载（LazyForEach组件）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。LazyForEach定义如下：
-```
+```ts
LazyForEach(
dataSource: IDataSource, // Data source to be iterated
itemGenerator: (item: any) => void, // child component generator
@@ -36,57 +36,57 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG
表1 参数说明
-| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
-| -------- | -------- | -------- | -------- | -------- |
-| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
-| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
-| keyGenerator | (item: any) => string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
+| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
+| ------------- | --------------------------------------- | ---- | ---- | ---------------------------------------- |
+| dataSource | IDataSource | 是 | - | 实现IDataSource接口的对象，需要开发者实现相关接口。 |
+| itemGenerator | (item: any) => void | 是 | - | 生成子组件的lambda函数，为给定数组项生成一个或多个子组件，单个组件和子组件列表必须括在大括号“{....}”中。 |
+| keyGenerator | (item: any) => string | 否 | - | 匿名函数，用于键值生成，为给定数组项生成唯一且稳定的键值。当子项在数组中的位置更改时，子项的键值不得更改，当数组中的子项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 |
表2 IDataSource类型说明
-| 名称 | 描述 |
-| -------- | -------- |
-| totalCount(): number | 获取数据总数。 |
-| getData(index: number): any | 获取索引对应的数据。 |
+| 名称 | 描述 |
+| ---------------------------------------- | ----------- |
+| totalCount(): number | 获取数据总数。 |
+| getData(index: number): any | 获取索引对应的数据。 |
| registerDataChangeListener(listener:DataChangeListener): void | 注册改变数据的控制器。 |
| unregisterDataChangeListener(listener:DataChangeListener): void | 注销改变数据的控制器。 |
表3 DataChangeListener类型说明
-| 名称 | 描述 |
-| -------- | -------- |
-| onDataReloaded(): void | 重新加载所有数据。 |
-| onDataAdded(index: number): void
(deprecated) | 通知组件index的位置有数据添加。 |
-| onDataMoved(from: number, to: number): void
(deprecated) | 通知组件数据从from的位置移到to的位置。 |
-| onDataDeleted(index: number): void
(deprecated) | 通知组件index的位置有数据删除。 |
-| onDataChanged(index: number): void
(deprecated) | 通知组件index的位置有数据变化。 |
-| onDataAdd(index: number): void
8+ | 通知组件index的位置有数据添加。 |
+| 名称 | 描述 |
+| ---------------------------------------- | ---------------------- |
+| onDataReloaded(): void | 重新加载所有数据。 |
+| onDataAdded(index: number): void
(deprecated) | 通知组件index的位置有数据添加。 |
+| onDataMoved(from: number, to: number): void
(deprecated) | 通知组件数据从from的位置移到to的位置。 |
+| onDataDeleted(index: number): void
(deprecated) | 通知组件index的位置有数据删除。 |
+| onDataChanged(index: number): void
(deprecated) | 通知组件index的位置有数据变化。 |
+| onDataAdd(index: number): void
8+ | 通知组件index的位置有数据添加。 |
| onDataMove(from: number, to: number): void
8+ | 通知组件数据从from的位置移到to的位置。 |
-| onDataDelete(index: number): void
8+ | 通知组件index的位置有数据删除。 |
-| onDataChange(index: number): void
8+ | 通知组件index的位置有数据变化。 |
+| onDataDelete(index: number): void
8+ | 通知组件index的位置有数据删除。 |
+| onDataChange(index: number): void
8+ | 通知组件index的位置有数据变化。 |
->  **说明：**
+> **说明：**
> - 数据懒加载必须在容器组件内使用，且仅有List、Grid以及Swiper组件支持数据的懒加载（即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次加载所有的数据；
->
+>
> - LazyForEach在每次迭代中，必须且只允许创建一个子组件；
->
+>
> - 生成的子组件必须允许在LazyForEach的父容器组件中；
->
+>
> - 允许LazyForEach包含在if/else条件渲染语句中，不允许LazyForEach中出现if/else条件渲染语句；
->
+>
> - 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，仅itemGenerator中的UI描述的组件内使用了状态变量时，才会触发组件刷新；
->
+>
> - 子项生成器函数的调用顺序不一定和数据源中的数据项相同，在开发过程中不要假设子项生成器和键值生成器函数是否执行以及执行顺序。如下示例可能无法正常工作：
-> ```
+> ```ts
> LazyForEach(dataSource, item => {Text(`${++counter}. item.label`)})
> ```
->
+>
> 正确的示例如下：
->
-> ```
+>
+> ```ts
> LazyForEach(dataSource,
> item => Text(`${item.i}. item.data.label`)),
> item => item.data.id.toString())
@@ -95,7 +95,7 @@ LazyForEach(dataSource: IDataSource, itemGenerator: (item: any) => void, keyG
## 示例
-```
+```ts
// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
private listeners: DataChangeListener[] = []
diff --git a/zh-cn/application-dev/ui/ts-resource-access.md b/zh-cn/application-dev/ui/ts-resource-access.md
index b71591bbdca383c1302b4e10bb3f216e7abe1851..7858ba7a8adee799dbf99aede2092ce54b21513a 100644
--- a/zh-cn/application-dev/ui/ts-resource-access.md
+++ b/zh-cn/application-dev/ui/ts-resource-access.md
@@ -5,7 +5,7 @@
在工程中，通过```"$r('app.type.name')"```的形式引用应用资源。app代表是应用内resources目录中定义的资源；type代表资源类型（或资源的存放位置），可以取“color”、“float”、“string”、“plural”、“media”，name代表资源命名，由开发者定义资源时确定。
-引用rawfile下资源时使用```"$rawfile('filename')"```的形式，当前$rawfile仅支持Image控件引用图片资源，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
+引用rawfile下资源时使用```"$rawfile('filename')"```的形式，filename需要表示为rawfile目录下的文件相对路径，文件名需要包含后缀，路径开头不可以以"/"开头。
> **说明：**
> 资源描述符不能拼接使用，仅支持普通字符串如`'app.type.name'`。
@@ -63,7 +63,7 @@ Image($r('sys.media.ohos_app_icon'))
color.json文件的内容如下：
-```
+```json
{
"color": [
{
@@ -81,7 +81,7 @@ color.json文件的内容如下：
float.json文件的内容如下：
-```
+```json
{
"float":[
{
@@ -99,7 +99,7 @@ float.json文件的内容如下：
string.json文件的内容如下：
-```
+```json
{
"string":[
{
@@ -121,7 +121,7 @@ string.json文件的内容如下：
plural.json文件的内容如下：
-```
+```json
{
"plural":[
{
diff --git a/zh-cn/application-dev/ui/ts-syntactic-sugar.md b/zh-cn/application-dev/ui/ts-syntactic-sugar.md
index 92b9df0a8905896b5433cad07d7b2ffa220103b3..0ce4cad3b5efa6ba2184a88f79649eeda9a133ac 100644
--- a/zh-cn/application-dev/ui/ts-syntactic-sugar.md
+++ b/zh-cn/application-dev/ui/ts-syntactic-sugar.md
@@ -9,7 +9,7 @@
如下示例为@Component和@State的使用，被 @Component装饰的元素具备了组件化的含义，使用@State装饰的变量具备了状态数据的含义。
-```
+```ts
@Component
struct MyComponent {
@State count: number = 0
@@ -20,7 +20,7 @@ struct MyComponent {
装饰器定义在同一行上的描述如下：
-```
+```ts
@Entry @Component struct MyComponent {
}
```
@@ -29,7 +29,7 @@ struct MyComponent {
但更推荐定义在多行上：
-```
+```ts
@Entry
@Component
struct MyComponent {
@@ -39,29 +39,29 @@ struct MyComponent {
### 支持的装饰器列表
-| 装饰器 | 装饰内容 | 说明 |
-| -------- | -------- | -------- |
-| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 |
-| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 |
-| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 |
-| @Builder | 方法 | 在@Builder装饰的方法里，通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 |
-| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 |
-| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 |
-| @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用于监听状态变量的变化，应用可以注册回调方法。 |
+| 装饰器 | 装饰内容 | 说明 |
+| ------------- | ---------------------------------------- | ---------------------------------------- |
+| @Component | struct | 结构体在装饰后具有基于组件的能力，需要实现build方法来更新UI。 |
+| @Entry | struct | 组件被装饰后作为页面的入口，页面加载时将被渲染显示。 |
+| @Preview | struct | 用@Preview装饰的自定义组件可以在DevEco Studio的预览器上进行预览，加载页面时，将创建并呈现@Preview装饰的自定义组件。 |
+| @Builder | 方法 | 在@Builder装饰的方法里，通过声明式UI描述，可以在一个自定义组件内快速生成多个布局内容。 |
+| @Extend | 方法 | @Extend装饰器将新的属性函数添加到内置组件上，通过@Extend装饰器可以快速定义并复用组件的自定义样式。 |
+| @CustomDialog | struct | @CustomDialog装饰器用于装饰自定义弹窗。 |
+| @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用于监听状态变量的变化，应用可以注册回调方法。 |
## 链式调用
允许开发者以“.”链式调用的方式配置UI结构及其属性、事件等。
-```
+```ts
Column() {
Image('1.jpg')
.alt('error.jpg')
@@ -75,7 +75,7 @@ Column() {
组件可以基于struct实现，组件不能有继承关系，struct可以比class更加快速的创建和销毁。
-```
+```ts
@Component
struct MyComponent {
@State data: string = ''
@@ -90,7 +90,7 @@ struct MyComponent {
对于struct的实例化，可以省略new。
-```
+```ts
// 定义
@Component
struct MyComponent {
@@ -124,7 +124,7 @@ TS语言的使用在生成器函数中存在一定的限制：
非法示例：
-```
+```ts
build() {
let a: number = 1 // invalid: variable declaration not allowed
Column() {
@@ -137,14 +137,15 @@ build() {
```
-## $$
+## $
$$支持变量双向绑定，支持简单变量、@State、@Link、@Prop等类型。
当前$$仅支持[bindPopup](../reference/arkui-ts/ts-universal-attributes-popup.md)属性的show参数和@State变量之间的渲染，以及Radio组件的checked属性。
-```
+```ts
+// xxx.ets
@Entry
@Component
struct bindPopup {
diff --git a/zh-cn/application-dev/ui/ts-syntax-intro.md b/zh-cn/application-dev/ui/ts-syntax-intro.md
index cd2e1b5bc67c5fbc4414a926f31658cb055b7102..129f1d5459c04ed6d859ee5cf50088e564e84206 100644
--- a/zh-cn/application-dev/ui/ts-syntax-intro.md
+++ b/zh-cn/application-dev/ui/ts-syntax-intro.md
@@ -6,7 +6,7 @@
本节为应用开发人员开发UI提供了参考规范。有关组件的详细信息，请参考组件说明。
->  **说明：**
+> **说明：**
> - 本节所有示例都以TS语言为例，请遵循相应语言的语法要求。
>
> - 示例中的Image、Button、Text、Divider、Row和Column等组件是UI框架中预置的组件控件，仅用于解释UI描述规范。
diff --git a/zh-cn/application-dev/ui/ts-types.md b/zh-cn/application-dev/ui/ts-types.md
index 665108d5c1e259ed0d058b646033f927349a1226..dac58cd28269a296acc0dc234b546e2d93324dcb 100644
--- a/zh-cn/application-dev/ui/ts-types.md
+++ b/zh-cn/application-dev/ui/ts-types.md
@@ -2,58 +2,58 @@
## 长度类型
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
+| 名称 | 类型定义 | 描述 |
+| ------ | -------------------------- | ---------------------------------------- |
+| Length | string \| number | 用于描述尺寸单位，输入为number类型时，使用vp单位；输入为string类型时，需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。 |
## 角度类型
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 |
+| 名称 | 类型定义 | 描述 |
+| ----- | -------------------------- | ---------------------------------------- |
+| Angle | string \| number | 用于角度单位，输入为number类型时，使用deg单位；输入为string类型时需要显示指定角度单位，支持以下两种角度单位：
- deg：如'100deg'。
- rad：如'3.14rad'。 |
## 点类型
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
+| 名称 | 类型定义 | 描述 |
+| ----- | --------------------- | --------------------------- |
+| Point | [Length, Length] | 用于描述点坐标，第一个值为x轴坐标，第二个值为y坐标。 |
## 颜色类型
组件属性方法使用的颜色Color说明如下：
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 |
+| 名称 | 类型定义 | 描述 |
+| ----- | ---------------------------------------- | ---------------------------------------- |
+| Color | string \| number \| Color | 用于描述颜色信息，输入为string类型时，使用rgb或者rgba进行描述；输入为number类型是，使用HEX格式颜色；输入类型为Color枚举时，使用颜色枚举值。
- 'rgb(255, 255, 255)'。
- 'rgba(255, 255, 255, 1.0)'。
- HEX格式：0xrrggbb，0xaarrggbb，'\#FFFFFF'。
- 枚举格式：Color.Black，Color.White等。 |
当前支持的Color颜色枚举：
-| 颜色名称 | 颜色值 | 颜色示意 |
-| -------- | -------- | -------- |
-| Black | 0x000000 |  |
-| Blue | 0x0000ff |  |
-| Brown | 0xa52a2a |  |
-| Gray | 0x808080 |  |
-| Green | 0x008000 |  |
-| Orange | 0xffa500 |  |
-| Pink | 0xffc0cb |  |
-| Red | 0xff0000 |  |
-| White | 0xffffff |  |
-| Yellow | 0xffff00 |  |
+| 颜色名称 | 颜色值 | 颜色示意 |
+| ------ | -------- | ---------------------------------------- |
+| Black | 0x000000 |  |
+| Blue | 0x0000ff |  |
+| Brown | 0xa52a2a |  |
+| Gray | 0x808080 |  |
+| Green | 0x008000 |  |
+| Orange | 0xffa500 |  |
+| Pink | 0xffc0cb |  |
+| Red | 0xff0000 |  |
+| White | 0xffffff |  |
+| Yellow | 0xffff00 |  |
## ColorStop类型
颜色断点类型，用于描述渐进色颜色断点。
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
+| 名称 | 类型定义 | 描述 |
+| --------- | -------------------- | -------------------------------------- |
+| ColorStop | [Color, number] | 描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。 |
## Resource类型
@@ -74,42 +74,43 @@
filename：工程中resources/rawfile目录下的文件名称。
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | - id：资源id值。
- type：资源类型（枚举值）。
- params：可选参数。
通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
+| 名称 | 类型定义 | 描述 |
+| -------- | ---------------------------------------- | ---------------------------------------- |
+| Resource | {
readonly id: [number];
readonly type: [number];
readonly params?: any[];
} | - id：资源id值。
- type：资源类型（枚举值）。
- params：可选参数。
通过`$r`或者`$rawfile`创建Resource类型对象，不可以修改Resource中的各属性的值。 |
## ResourceStr类型
8+
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| ResourceStr | string \| Resource| 用于描述资源字符串的类型。 |
+| 名称 | 类型定义 | 描述 |
+| ----------- | ---------------------------- | ------------- |
+| ResourceStr | string \| Resource | 用于描述资源字符串的类型。 |
## ResourceColor类型
8+
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
-| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 |
+| 名称 | 类型定义 | 描述 |
+| ------------- | ---------------------------------------- | ----------- |
+| ResourceColor | Color \| number \| string \| Resource | 用于描述资源颜色类型。 |
## Font类型
8+
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
+| 名称 | 类型定义 | 描述 |
+| ---- | ---------------------------------------- | ---------------------------------------- |
| Font | {
size?: Length;
weight?:
FontWeight \| number \| string;
family?: string \|
Resource;
style?:
FontStyle;
} | 设置文本样式：
size: 设置文本尺寸，Length为number类型时，使用fp单位。
weight: 设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。
family: 设置文本的字体列表。使用多个字体，使用','进行分割，优先级按顺序生效。例如：'Arial, sans-serif'。
style: 设置文本的字体样式。 |
## CustomBuilder类型
8+
组件属性方法参数可使用CustomBuilder类型来自定义UI描述。
-| 名称 | 类型定义 | 描述 |
-| -------- | -------- | -------- |
+| 名称 | 类型定义 | 描述 |
+| ------------- | ---------------------- | ---------------------------------------- |
| CustomBuilder | () => any | 这种方法类型必须使用@Builder装饰器修饰。具体用法见[@Builder](ts-component-based-builder.md)。 |
## 示例
-```
+```ts
+// xxx.ets
@Entry
@Component
struct dataTypeExample {
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 9ee8bcd9bb7da37b8480687feab450a2c45ca5ff..4ae1fd27f0dae8477177bcab5eac2acb0dfa1646 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
@@ -13,7 +13,7 @@
- @Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。
- @Prop：原理类似@Link，但是子组件所做的更改不会同步到父组件上，属于单向传递。
->  **说明：**
+> **说明：**
> 状态变量名称不能使用id，如@Prop id:number 。
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 070efe2fd5b06eddf290c99ca91a9d24dddb49db..ed82f95ad103deb99230ef795154d7f268b2bac0 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
@@ -5,7 +5,7 @@
在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。
-```
+```html
@@ -18,7 +18,7 @@
```
-```
+```css
/* xxx.css */
.container {
background-color:#F1F3F5;
@@ -86,7 +86,7 @@ text{
->  **说明：**
+> **说明：**
> - animation取值不区分先后，duration （动画执行时间）/ delay （动画延迟执行时间）按照出现的先后顺序解析。
->
+>
> - 必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。
diff --git a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
index c293ca9b6a00b0eb11f0fa65220b0041525a450d..b9fb5bb919b03b5c25a67a96f828c2f663527903 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-background-position-style.md
@@ -5,7 +5,7 @@
通过改变background-position属性（第一个值为X轴的位置，第二个值为Y轴的位置）移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。
-```
+```html
@@ -14,7 +14,7 @@
```
-```
+```css
/* xxx.css */
.container {
height: 100%;
@@ -80,7 +80,7 @@
```
->  **说明：**
+> **说明：**
> background-position仅支持背景图片的移动，不支持背景颜色（background-color）。
diff --git a/zh-cn/application-dev/ui/ui-js-animate-component.md b/zh-cn/application-dev/ui/ui-js-animate-component.md
index 91baf79e1993a469e46f03560e64d79e3c14e0ae..03b8b958ea70a55e62714ef492b18a84430bd3f9 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-component.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-component.md
@@ -7,14 +7,14 @@
通过调用animate方法获得animation对象，animation对象支持动画属性、动画方法和动画事件。
-```
+```html
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -30,7 +30,7 @@
}
```
-```
+```js
/* xxx.js */
export default {
data: {
@@ -60,23 +60,23 @@ export default {
->  **说明：**
->- 使用animate方法时必须传入Keyframes和Options参数。
->- 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。
+> **说明：**
+> - 使用animate方法时必须传入Keyframes和Options参数。
+> - 多次调用animate方法时，采用replace策略，即最后一次调用时传入的参数生效。
## 设置动画参数
在获取动画对象后，通过设置参数Keyframes设置动画在组件上的样式。
-```
+```html
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -92,7 +92,7 @@ export default {
}
```
-```
+```js
/* xxx.js */
export default {
data: {
@@ -138,21 +138,21 @@ export default {
->  **说明：**
+> **说明：**
> - translate、scale和rtotate的先后顺序会影响动画效果。
->
+>
> - transformOrigin只对scale和rtotate起作用。
在获取动画对象后，通过设置参数Options来设置动画的属性。
-```
+```html
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -168,7 +168,7 @@ export default {
}
```
-```
+```js
/* xxx.js */
export default {
data: {
@@ -206,15 +206,15 @@ export default {
->  **说明：**
+> **说明：**
> direction：指定动画的播放模式。
->
+>
> normal： 动画正向循环播放。
->
+>
> reverse： 动画反向循环播放。
->
+>
> alternate：动画交替循环播放，奇数次正向播放，偶数次反向播放。
->
+>
> alternate-reverse：动画反向交替循环播放，奇数次反向播放，偶数次正向播放。
@@ -222,7 +222,7 @@ export default {
animation对象支持动画事件和动画方法。可以通过添加开始和取消事件，调用播放、暂停、倒放和结束方法实现预期动画。
-```
+```html
@@ -238,7 +238,7 @@ animation对象支持动画事件和动画方法。可以通过添加开始和
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -270,8 +270,8 @@ button{
}
```
-```
-/* xxx.js */
+```js
+// xxx.js
import prompt from '@system.prompt';
export default {
data: {
@@ -348,7 +348,7 @@ export default {
通过改变playStat的属性实现动画状态的改变。
-```
+```html
@@ -362,7 +362,7 @@ export default {
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -394,8 +394,8 @@ button{
}
```
-```
-/* xxx.js */
+```js
+// xxx.js
import prompt from '@system.prompt';
export default {
data: {
diff --git a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
index 1d56e5a4f7c5e59d14771f7570b1bb91f354efbf..e9d60c5cf47743b28b909dcdfd84d06e837284f2 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-dynamic-effects.md
@@ -3,7 +3,7 @@
通过设置插值器来实现动画效果。
->  **说明：**
+> **说明：**
> 从API Version 6 开始支持。
@@ -11,7 +11,7 @@
通过createAnimator创建一个动画对象，通过设置参数options来设置动画的属性。
-```
+```html
@@ -22,7 +22,7 @@
```
-```
+```css
/* xxx.css */
.container {
width:100%;
@@ -44,8 +44,8 @@ button{
}
```
-```
-/* xxx.js */
+```js
+// xxx.js
import animator from '@ohos.animator';
export default {
data: {
@@ -78,7 +78,7 @@ export default {
->  **说明：**
+> **说明：**
> - 使用createAnimator创建动画对象时必须传入options参数。
>
> - begin插值起点，不设置时默认为0。
@@ -90,7 +90,7 @@ export default {
animator支持事件和接口，可以通过添加frame、cancel、repeat、finish事件和调用update、play、pause、cancel、reverse、finish接口自定义动画效果。animator支持的事件和接口具体见动画中的[createAnimator](../reference/apis/js-apis-animator.md)。
-```
+```html
@@ -25,7 +25,7 @@ runframe在调用requestAnimationFrame时传入带有timestamp参数的回调函
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -39,8 +39,8 @@ button{
}
```
-```
-/* xxx.js */
+```js
+// xxx.js
export default {
data: {
timer: null,
@@ -95,7 +95,7 @@ export default {
->  **说明：**
+> **说明：**
> requestAnimationFrame函数在调用回调函数时在第一个参数位置传入timestamp时间戳，表示requestAnimationFrame开始去执行回调函数的时刻。
@@ -103,7 +103,7 @@ export default {
通过cancelAnimationFrame函数取消逐帧回调，在调用cancelAnimationFrame函数时取消requestAnimationFrame函数的请求。
-```
+```html
@@ -122,7 +122,7 @@ export default {
```
-```
+```css
/* xxx.css */
.container {
flex-direction: column;
@@ -136,8 +136,8 @@ button{
}
```
-```
-/* xxx.js */
+```js
+// xxx.js
export default {
data: {
timer: null,
@@ -184,5 +184,5 @@ export default {
->  **说明：**
+> **说明：**
> 在调用该函数时需传入一个具有标识id的参数。
diff --git a/zh-cn/application-dev/ui/ui-js-animate-svg.md b/zh-cn/application-dev/ui/ui-js-animate-svg.md
index f4e20529894244958e7bfee674e8b4ac3eeb6cff..beed6f9df285dc966a03ea46f63085d962fc16be 100644
--- a/zh-cn/application-dev/ui/ui-js-animate-svg.md
+++ b/zh-cn/application-dev/ui/ui-js-animate-svg.md
@@ -9,7 +9,7 @@
在Svg的子组件[animate](../reference/arkui-js/js-components-svg-animate.md)中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。
-```
+```html