](js-service-widget-basic-span.md)。
+
+
+## 属性
+
+支持[通用属性](js-service-widget-common-attributes.md)。
+
+
+## 样式
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| color | <color> | - | 否 | 设置文本段落的文本颜色。 |
+| font-size | <length> | 30px | 否 | 设置文本段落的文本尺寸。 |
+| font-style | string | normal | 否 | 设置文本段落的字体样式，见[text组件font-style的样式属性](js-service-widget-basic-text.md#样式)。 |
+| font-weight | number \| string | normal | 否 | 设置文本段落的字体粗细，见[text组件font-weight的样式属性](js-service-widget-basic-text.md#样式)。 |
+| text-decoration | string | none | 否 | 设置文本段落的文本修饰，见[text组件text-decoration样式属性](js-service-widget-basic-text.md#样式)。 |
+| font-family | string | sans-serif | 否 | 设置文本段落的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-service-widget-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+
+
+## 事件
+
+不支持。
+
+## 示例
+
+详见[text示例](js-service-widget-basic-text.md#示例)。
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-text.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-text.md
new file mode 100644
index 0000000000000000000000000000000000000000..f96d625c8a3f7c98fdbaeb6ef25b43de3f442de4
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-basic-text.md
@@ -0,0 +1,111 @@
+# text
+
+
+文本，用于呈现一段信息。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## 子组件
+
+支持<[span](js-service-widget-basic-span.md)>。
+
+
+## 属性
+
+支持[通用属性](js-service-widget-common-attributes.md)。
+
+
+## 样式
+
+除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| color | <color> | - | 否 | 设置文本的颜色。 |
+| font-size | <length> | 30px | 否 | 设置文本的尺寸。 |
+| letter-spacing | <length> | 0px | 否 | 设置文本的字符间距。 |
+| font-style | string | normal | 否 | 设置文本的字体样式，可选值为：
- normal：标准的字体样式；
- italic：斜体的字体样式。 |
+| font-weight | number \| string | normal | 否 | 设置文本的字体粗细，number类型取值[100, 900]，默认为400，取值越大，字体越粗。
- number取值必须为100的整数倍。
- string类型取值支持如下四个值：lighter、normal、bold、bolder。 |
+| text-decoration | string | none | 否 | 设置文本的文本修饰，可选值为：
- underline：文字下划线修饰；
- line-through：穿过文本的修饰线n
- none：标准文本。 |
+| text-align | string | start | 否 | 设置文本的文本对齐方式，可选值为：
- left：文本左对齐；
- center：文本居中对齐；
- right：文本右对齐；
- start：根据文字书写相同的方向对齐；
- end：根据文字书写相反的方向对齐。
如文本宽度未指定大小，文本的宽度和父容器的宽度大小相等的情况下，对齐效果可能会不明显。 |
+| line-height | <length> | 0px | 否 | 设置文本的文本行高，设置为0px时，不限制文本行高，自适应字体大小。 |
+| text-overflow | string | clip | 否 | 在设置了最大行数的情况下生效，可选值为：
- clip：将文本根据父容器大小进行裁剪显示；
- ellipsis：根据父容器大小显示，显示不下的文本用省略号代替。需配合max-lines使用。 |
+| font-family | string | sans-serif
| 否 | 设置文本的字体列表，用逗号分隔，每个字体用字体名或者字体族名设置。列表中第一个系统中存在的或者通过[自定义字体](js-service-widget-common-customizing-font.md)指定的字体，会被选中作为文本的字体。 |
+| max-lines | number | - | 否 | 设置文本的最大行数。 |
+| min-font-size | <length> | - | 否 | 文本最小字号，需要和文本最大字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
+| max-font-size | <length> | - | 否 | 文本最大字号，需要和文本最小字号同时设置，支持文本字号动态变化。设置最大最小字体样式后，font-size不生效。 |
+| font-size-step | <length> | 1px | 否 | 文本动态调整字号时的步长，需要设置最小，最大字号样式生效。 |
+| prefer-font-sizes | <array> | - | 否 | 预设的字号集合，在动态尺寸调整时，优先使用预设字号集合中的字号匹配设置的最大行数，如果预设字号集合未设置，则使用最大最小和步长调整字号。针对仍然无法满足最大行数要求的情况，使用text-overflow设置项进行截断，设置预设尺寸集后，font-size、max-font-size、min-font-size和font-size-step不生效。
如：prefer-font-sizes: 12px,14px,16px |
+| word-break | string | normal | 否 | 设置文本折行模式，可选值为：
- normal：默认换行规则，依据各自语言的规则，允许在字间发生换行。
- break-all：对于非中文/日文/韩文的文本，可在任意字符间断行。
- break-word：与break-all相同，不同的地方在于它要求一个没有断行破发点的词必须保持为一个整体单位。 |
+
+> **说明：**
+> - 字体动态缩放：预设尺寸集合和最小最大字号调节基于是否满足最大行数要求，预设尺寸集合会按照从左到右顺序查看是否满足最大行数要求，最小最大字号调节则基于从大到小顺序查看是否满足最大行数要求。
+>
+> - 文本换行：文本可以通过转义字符\r\n进行换行。
+>
+> - 文本标签内支持以下转义字符：\a，\b，\f，\n，\r，\t，\v，\'，\"，\0。
+>
+> - 当使用子组件span组成文本段落时，如果span属性样式异常，将导致text段落无法显示。
+>
+> - letter-spacing、text-align、line-height、text-overflow和max-lines样式作用于text及其子组件（span）组成的文本内容。
+>
+> - text组件说明：不支持text内同时存在文本内容和span子组件。（如果同时存在，只显示span内的内容)
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+## 示例
+
+```html
+
+
+ 这是设置了行高的文本。
+
+ 这是设置了字符间距的文本。
+ 这是设置为斜体的文本。
+ 这是添加了下划线的文本。
+ 文本过长可省略，省略文本。
+
+```
+
+```css
+.container{
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ margin-top: 10px;
+ margin-left: 30px;
+}
+.line_height{
+ font-size: 20px;
+ line-height: 40px;
+}
+.letter_spacing{
+ font-size: 20px;
+ letter-spacing: 5px;
+}
+.font_style{
+ font-size: 20px;
+ font-style: italic;
+}
+.text_decoration_style{
+ font-size: 20px;
+ text-decoration: underline;
+ text-decoration-color: red;
+}
+.text_over_flow{
+ font-size: 20px;
+ width: 40%;
+ max-lines: 1;
+ text-overflow: ellipsis;
+}
+```
+
+**4*4卡片**
+
+
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-accessibility.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-accessibility.md
new file mode 100644
index 0000000000000000000000000000000000000000..19c0e92894a0255bf28a7adf39acfcadc0423be7
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-accessibility.md
@@ -0,0 +1,61 @@
+# 无障碍
+
+组件可以设置相应的无障碍属性和事件来更好地使用无障碍能力。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 无障碍属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| accessibilitygroup | boolean | false | 无障碍组，设置为true时表示该组件及其所有子组件为一整个可以选中的组件，无障碍服务将不再关注其子组件内容。 |
+| accessibilitytext | string | - | 无障碍文本，当组件不包含文本属性时，屏幕朗读选中此组件时不播报，使用者无法清楚地知道当前选中了什么组件。为了解决此场景，开发人员可为不包含文字信息的组件设置无障碍文本，当屏幕朗读选中此组件时播报无障碍文本的内容，帮助屏幕朗读的使用者清楚地知道自己选中了什么组件。若组件既拥有文本属性，又拥有无障碍文本属性，则组件被选中时，仅播报无障碍文本内容。 |
+| accessibilitydescription | string | - | 无障碍说明，用于为用户进一步说明当前组件，如帮助用户理解将要执行的操作可能导致什么后果，尤其是当这些后果无法从组件本身属性与无障碍文本中了解到时。开发人员可为组件的该属性设置相对较详细的解释文本，帮助用户理解将要执行的操作。若组件既拥有文本属性又拥有无障碍说明属性，则组件被选中时，先播报组件的文本属性，再播报无障碍说明属性的内容。 |
+| accessibilityimportance | string | auto | 无障碍重要性，用于控制某个组件是否可被无障碍辅助服务所识别。具体值可以设置为auto，yes，no和no-hide-descendants（最后一个值会使屏幕朗读忽略当前组件及其所有子组件）。若设置为yes，当前组件对无障碍辅助服务而言可选中；若设置为no，则当前组件对无障碍辅助服务来说是不可选中的。 |
+
+- accessibilitygroup
+
+ ```html
+
+ text1
+ text2
+
+ ```
+
+- accessibilitytext
+
+ ```html
+
+ ```
+
+- accessibilitydescription
+
+ ```html
+
+ ```
+
+- accessibilityimportance
+ 此情况下，div和text都不会被无障碍框选中。若想让某些默认不会被无障碍框选中的组件可以被选中，则给该组件增加一个accessibilityimportance="yes"即可。
+
+
+ ```html
+
+ text
+
+ ```
+
+
+## 无障碍事件
+
+| 名称 | 参数 | 描述 |
+| -------- | -------- | -------- |
+| accessibility | AbilityEvent | 无障碍服务下发的事件。 |
+
+ **表1**AbilityEvent属性列表
+
+| 属性 | 类型 | 说明 |
+| -------- | -------- | -------- |
+| eventType | number | 事件类型：
- 0：custom event
- 1：accessibility focus
- 2：clear accessibility focus
无障碍系统下发的非焦点相关的事件为0，无障碍系统下发的获焦事件为1，无障碍系统下发的失焦事件为2。 |
+| param | Object | 无障碍辅助应用发送自定义事件时需传入对应参数。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-atomic-layout.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-atomic-layout.md
new file mode 100644
index 0000000000000000000000000000000000000000..81d672704b3ea750ae1e07e67f8baa9903e0c996
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-atomic-layout.md
@@ -0,0 +1,35 @@
+# 原子布局
+
+在屏幕形态和规格不同等情况下，布局效果需要实现自适应，因此系统提供了面向不同屏幕尺寸界面自适应适配的布局能力，称为原子布局。设计师可以考虑使用原子能力，定义元素在不同形态的尺寸界面上体现的自适应规则。开发者可以使用原子布局能力，快速实现让应用在多形态屏幕上有与设计效果相匹配的自适应效果。
+
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## 隐藏能力
+
+在非折行flex布局基础上，增加了显示优先级标记，可以调整组件内元素水平/垂直方向的显示优先级，根据当前组件容器的可用空间来显示内容。
+
+| 样式 | 类型 | 默认值 | 说明 |
+| -------- | -------- | -------- | -------- |
+| display-index | number | 0 | 适用于div等支持flex布局的容器组件中的子组件上，当容器组件在flex主轴上尺寸不足以显示全部内容时，按照display-index值从小到大的顺序进行隐藏，具有相同display-index值的组件同时隐藏，默认值为0，表示隐藏。 |
+
+
+## 占比能力
+
+在非折行的flex布局中，定义了占比能力的组件，保证指定元素始终在容器的某一个比例空间中进行布局。
+
+| 样式 | 类型 | 默认值 | 说明 |
+| -------- | -------- | -------- | -------- |
+| flex-weight | number | - | 指明当前元素在flex主轴方向上尺寸权值，当且仅当容器组件中所有节点均设置此属性时生效，当前元素尺寸为： 容器主轴尺寸 \* 当前权值 / 所有子元素权值和。 |
+
+
+## 固定比例
+
+定义了组件固定比例调整尺寸的能力。
+
+| 样式 | 类型 | 默认值 | 说明 |
+| -------- | -------- | -------- | -------- |
+| aspect-ratio | number | - | 接受任意大于0的浮点值，定义为该节点的宽度与高度比，设置该属性后，该元素尺寸宽高比按照此属性值进行调整。
遵守最大值与最小值的限制。
在flex布局中，主轴尺寸先进行调整，后根据该尺寸调整交叉轴。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-attributes.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-attributes.md
new file mode 100644
index 0000000000000000000000000000000000000000..c611597c309f7d757ffe6b2bb694078bd46d7d69
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-attributes.md
@@ -0,0 +1,32 @@
+# 通用属性
+
+> **说明：**
+>
+>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 常规属性
+
+常规属性指的是组件普遍支持的用来设置组件基本标识和外观显示特征的属性。
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| id | string | - | 否 | 组件的唯一标识。 |
+| style | string | - | 否 | 组件的样式声明。 |
+| class | string | - | 否 | 组件的样式类，用于引用样式表。 |
+| ref | string | - | 否 | 用来指定指向子元素或子组件的引用信息，该引用将注册到父组件的$refs 属性对象上。 |
+| disabled | boolean | false | 否 | 当前组件是否被禁用，在禁用场景下，组件将无法响应用户交互。 |
+| dir | string | auto | 否 | 设置元素布局模式，支持设置rtl、ltr和auto三种属性值：
- "rtl"：使用从右往左布局模式。
- "ltr"：使用从左往右布局模式。
- "auto"：跟随系统语言环境。 |
+
+
+## 渲染属性
+
+组件普遍支持的用来设置组件是否渲染的属性。
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| for | Array | - | 根据设置的数据列表，展开当前元素。 |
+| if | boolean | - | 根据设置的boolean值，添加或移除当前元素。 |
+| show | boolean | - | 根据设置的boolean值，显示或隐藏当前元素。 |
+
+> **说明：**
+> 属性和样式不能混用，不能在属性字段中进行样式设置。
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-customizing-font.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-customizing-font.md
new file mode 100644
index 0000000000000000000000000000000000000000..3293ef9f812c022be7769541776a370a5de5476f
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-customizing-font.md
@@ -0,0 +1,59 @@
+# 自定义字体样式
+
+
+font-face用于定义字体样式。应用可以在style中定义font-face来指定相应的字体名和字体资源，然后在font-family样式中引用该字体。
+
+
+自定义字体可以是从项目中的字体文件或网络字体文件中加载的字体。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+> 字体格式支持ttf和otf。
+
+
+## 定义font-face
+
+
+```css
+@font-face {
+ font-family: HWfont;
+ src: url('/common/HWfont.ttf');
+}
+```
+
+**font-family：** 自定义字体的名称。
+
+**src：** 自定义字体的来源，支持如下类别。
+
+- 项目中的字体文件：通过url指定项目中的字体文件路径(只支持绝对路径，详见[文件组织](js-service-widget-file.md))。
+
+- 网络字体文件：通过url指定网络字体的地址。
+
+- 不支持设置多个src。
+
+
+## 使用font-face
+
+可以在style中定义font-face，然后在font-family样式中指定该font-face的名称，从而应用font-face定义的字体。示例如下：
+
+- 页面布局
+
+ ```html
+
+ 测试自定义字体
+
+ ```
+
+- 页面样式
+
+ ```css
+ @font-face {
+ font-family: HWfont;
+ src: url("/common/HWfont.ttf");
+ }
+ .demo-text {
+ font-family: HWfont;
+ }
+ ```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-events.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-events.md
new file mode 100644
index 0000000000000000000000000000000000000000..14824bcf39a1e6f91a9d24ea5ca1359355f399c4
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-events.md
@@ -0,0 +1,12 @@
+# 通用事件
+
+
+相对于私有事件，大部分组件都可以绑定如下事件。(如果需要响应键盘的回车和空格发生Key Up事件，需要在最外层的控件上添加click事件)
+
+> **说明：**
+>
+>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+| 名称 | 参数 | 描述 |
+| -------- | -------- | -------- |
+| click | - | 点击动作触发该事件。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
new file mode 100644
index 0000000000000000000000000000000000000000..09c9dd4160f9ac5dedf8849f71e68535f9b5db0c
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
@@ -0,0 +1,85 @@
+# 渐变样式
+
+组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。
+
+> **说明：**
+>
+>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+开发框架支持线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变效果。
+
+
+## 线性渐变/重复线性渐变
+
+使用渐变样式，需要定义过渡方向和过渡颜色。
+
+
+### 过渡方向
+
+ 通过direction或者angle指定过渡方向。
+
+- direction：进行方向渐变。
+
+- angle：进行角度渐变。
+
+
+```css
+background: linear-gradient(direction/angle, color, color, ...);
+background: repeating-linear-gradient(direction/angle, color, color, ...);
+```
+
+
+### 过渡颜色
+
+支持以下四种方式：\#ff0000、\#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)，需要指定至少两种颜色。
+
+- 参数
+
+ | 名称 | 类型 | 默认值 | 必填 | 描述 |
+ | -------- | -------- | -------- | -------- | -------- |
+ | direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (由上到下渐变) | 否 | 指定过渡方向，如：to left (从右向左渐变) ，或者to bottom right (从左上角到右下角)。 |
+ | angle | <deg> | 180deg | 否 | 指定过渡方向，以元素几何中心为坐标原点，水平方向为X轴，angle指定了渐变线与Y轴的夹角(顺时针方向)。 |
+ | color | <color> [<length>\|<percentage>] | - | 是 | 定义使用渐变样式区域内颜色的渐变效果。 |
+
+- 示例
+
+ 1. 默认渐变方向为从上向下渐变。
+
+ ```css
+ #gradient {
+ height: 300px;
+ width: 600px;
+ /* 从顶部开始向底部由红色向绿色渐变 */
+ background: linear-gradient(red, #00ff00);
+ }
+ ```
+
+ 
+
+ 2. 45度夹角渐变。
+
+
+ ```css
+ /* 45度夹角，从红色渐变到绿色 */
+ background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
+ ```
+
+ 
+
+ 3. 设置方向从左向右渐变。
+
+ ```css
+ /* 从左向右渐变，在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
+ background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);
+ ```
+
+
+ 
+
+ 4. 重复渐变。
+
+ ```css
+ /* 从左向右重复渐变，重复渐变区域30px（60-30）透明度0.5 */
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
+ ```
+ 
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-mediaquery.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-mediaquery.md
new file mode 100644
index 0000000000000000000000000000000000000000..6fa60061f6d0f4f29a2ecf1180b9b65ec94cdabc
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-mediaquery.md
@@ -0,0 +1,179 @@
+# 媒体查询
+
+
+媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：
+
+1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。
+
+2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。
+
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+> media属性值默认为设备的真实尺寸大小、物理像素和真实的屏幕分辨率。请勿与以720px为基准的项目配置宽度px混淆。
+
+
+## CSS语法规则
+
+使用\@media来引入查询语句，具体规则如下：
+
+
+```css
+@media [media-type] [and|not|only] [(media-feature)] {
+ CSS-Code;
+}
+```
+
+例子：
+
+\@media screen and (round-screen: true) { … } // 当设备屏幕是圆形时条件成立
+
+\@media (max-height: 800) { … } // 范围查询，CSS level 3 写法
+
+\@media (height <= 800) { … } // 范围查询，CSS level 4 写法，与CSS level3写法等价
+
+\@media screen and (device-type: tv) or (resolution < 2) { … } // 同时包含媒体类型和多个媒体特征的多条件复杂语句查询
+
+
+## 页面中引用资源
+
+通过\@import方式引入媒体查询，具体使用方法如下：
+
+
+```
+@import url [media-type] [and|not|only] [(media-feature)];
+```
+
+例如：
+
+
+```
+@import '../common/style.css' screen and (min-width: 600) and (max-width: 1200);
+```
+
+
+## 媒体类型
+
+| 类型 | 说明 |
+| -------- | -------- |
+| screen | 按屏幕相关参数进行媒体查询。 |
+
+
+## 媒体逻辑操作
+
+媒体逻辑操作符：and、or、not、only用于构成复杂媒体查询，也可以通过comma（,）将其组合起来，详细解释说明如下表。
+
+ **表1** 媒体逻辑操作符
+
+| 类型 | 说明 |
+| -------- | -------- |
+| and | 将多个媒体特征（Media Feature）以“与”的方式连接成一个媒体查询，只有当所有媒体特征都为true，查询条件成立。另外，它还可以将媒体类型和媒体功能结合起来。
例如：screen and (device-type: wearable) and (max-height: 600) 表示当设备类型是智能穿戴同时应用的最大高度小于等于600个像素单位时成立。 |
+| not | 取反媒体查询结果，媒体查询结果不成立时返回true，否则返回false。在媒体查询列表中应用not，则not仅取反应用它的媒体查询。
例如：not screen and (min-height: 50) and (max-height: 600) 表示当应用高度小于50个像素单位或者大于600个像素单位时成立。
使用not运算符时必须指定媒体类型。 |
+| only | 当整个表达式都匹配时，才会应用选择的样式，可以应用在防止某些较早的版本的浏览器上产生歧义的场景。一些较早版本的浏览器对于同时包含了媒体类型和媒体特征的语句会产生歧义，比如：
screen and (min-height: 50)
老版本浏览器会将这句话理解成screen，从而导致仅仅匹配到媒体类型（screen），就应用了指定样式，使用only可以很好地规避这种情况。
使用only时必须指定媒体类型。 |
+| ,(comma) | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。其效果等同于or运算符。
例如：screen and (min-height: 1000), （round-screen：true） 表示当应用高度大于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+| or | 将多个媒体特征以“或”的方式连接成一个媒体查询，如果存在结果为true的媒体特征，则查询条件成立。
例如：screen and (max-height: 1000) or （round-screen：true）表示当应用高度小于等于1000个像素单位或者设备屏幕是圆形时，条件成立。 |
+
+在MediaQuery Level 4中引入了范围查询，使其能够使用max-，min-的同时，也支持了<=，>=，<，>操作符。
+
+ **表2** 媒体逻辑范围操作符
+
+| 类型 | 说明 |
+| -------- | -------- |
+| <= | 小于等于，例如：screen and (height <= 50)。 |
+| >= | 大于等于，例如：screen and (height >= 600)。 |
+| < | 小于，例如：screen and (height < 50)。 |
+| > | 大于，例如：screen and (height > 600)。 |
+
+
+## 媒体特征
+
+| 类型 | 说明 |
+| -------- | -------- |
+| height | 应用页面显示区域的高度。 |
+| min-height | 应用页面显示区域的最小高度。 |
+| max-height | 应用页面显示区域的最大高度。 |
+| width | 应用页面显示区域的宽度。 |
+| min-width | 应用页面显示区域的最小宽度。 |
+| max-width | 应用页面显示区域的最大宽度。 |
+| resolution | 设备的分辨率，支持dpi，dppx和dpcm单位。其中：
- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；
- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；
- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。 |
+| min-resolution | 设备的最小分辨率。 |
+| max-resolution | 设备的最大分辨率。 |
+| orientation | 屏幕的方向。
可选值：
- orientation: portrait（设备竖屏）
- orientation: landscape（设备横屏） |
+| aspect-ratio | 应用页面显示区域的宽度与高度的比值。
例如：aspect-ratio:1/2 |
+| min-aspect-ratio | 应用页面显示区域的宽度与高度的最小比值。 |
+| max-aspect-ratio | 应用页面显示区域的宽度与高度的最大比值。 |
+| device-height | 设备的高度。 |
+| min-device-height | 设备的最小高度。 |
+| max-device-height | 设备的最大高度。 |
+| device-width | 设备的宽度。 |
+| min-device-width | 设备的最小宽度。 |
+| max-device-width | 设备的最大宽度。 |
+| round-screen | 屏幕类型，圆形屏幕为true， 非圆形屏幕为 false。 |
+| dark-mode6+ | 系统为深色模式时为true，否则为false。 |
+
+
+## 示例代码
+
+
+```html
+
+
+```
+
+
+```css
+/* xxx.css */
+.container {
+ width: 300px;
+ height: 600px;
+ background-color: #008000;
+}
+
+@media (device-type: wearable) {
+ .container-inner {
+ justify-content: center;
+ align-items: center;
+ padding: 40px 26px;
+ }
+
+ .title {
+ text-align: center;
+ }
+
+ .detail_text {
+ max-lines: 2;
+ text-align: center;
+ }
+}
+
+@media (device-type: tv) {
+ .title {
+ font-size: 16px;
+ }
+
+ .detail_text {
+ font-size: 12px;
+ }
+}
+
+@media (device-type: car) {
+ .title {
+ font-size: 12px;
+ color: #FFFFFF;
+ font-family: @id_text_font_family_medium;
+ }
+
+ .detail_text {
+ font-size: 12px;
+ margin-top: 2px;
+ font-family: @id_text_font_family_regular;
+ color: #FFFFFF;
+ }
+}
+```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-styles.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-styles.md
new file mode 100644
index 0000000000000000000000000000000000000000..6b2f2dce0c207642614621dafe327244cb8db36f
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-common-styles.md
@@ -0,0 +1,59 @@
+# 通用样式
+
+组件普遍支持的可以在style或css中设置组件外观样式，均不是必填项。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- |
+| width | <length> \| <percentage> | - | 设置组件自身的宽度。
缺省时使用元素自身内容需要的宽度。
未设置时组件宽度默认为0。 |
+| height | <length> \| <percentage> | - | 设置组件自身的高度。
缺省时使用元素自身内容需要的高度。
未设置时组件高度默认为0。 |
+| min-width | <length> \| <percentage> | 0 | 设置元素的最小宽度。 |
+| min-height | <length> \| <percentage> | 0 | 设置元素的最小高度。 |
+| max-width | <length> \| <percentage> | - | 设置元素的最大宽度。默认无限制。 |
+| max-height | <length> \| <percentage> | - | 设置元素的最大高度。默认无限制。 |
+| padding | <length> \| <percentage> | 0 | 使用简写属性设置所有的内边距属性。
该属性可以有1到4个值：
- 指定一个值时，该值指定四个边的内边距。
- 指定两个值时，第一个值指定上下两边的内边距，第二个指定左右两边的内边距。
- 指定三个值时，第一个指定上边的内边距，第二个指定左右两边的内边距，第三个指定下边的内边距。
- 指定四个值时分别为上、右、下、左边的内边距（顺时针顺序）。 |
+| padding-[left\|top\|right\|bottom] | <length> \| <percentage> | 0 | 设置左、上、右、下内边距属性。 |
+| padding-[start\|end] | <length> \| <percentage> | 0 | 设置起始和末端内边距属性。 |
+| margin | <length> \| <percentage> | 0 | 使用简写属性设置所有的外边距属性，该属性可以有1到4个值。
- 只有一个值时，这个值会被指定给全部的四个边。
- 两个值时，第一个值被匹配给上和下，第二个值被匹配给左和右。
- 三个值时，第一个值被匹配给上, 第二个值被匹配给左和右，第三个值被匹配给下。
- 四个值时，会依次按上、右、下、左的顺序匹配 (即顺时针顺序)。 |
+| margin-[left\|top\|right\|bottom] | <length> \| <percentage> | 0 | 设置左、上、右、下外边距属性。 |
+| margin-[start\|end] | <length> \| <percentage> | 0 | 设置起始和末端外边距属性。 |
+| border | - | 0 | 使用简写属性设置所有的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置时，各属性值为默认值。 |
+| border-style | string | solid | 使用简写属性设置所有边框的样式，可选值为：
- dotted：显示为一系列圆点，圆点半径为border-width的一半。
- dashed：显示为一系列短的方形虚线。
- solid：显示为一条实线。 |
+| border-[left\|top\|right\|bottom]-style | string | solid | 分别设置左、上、右、下四个边框的样式，可选值为dotted、dashed、solid。 |
+| border-[left\|top\|right\|bottom] | - | - | 使用简写属性设置对应位置的边框属性，包含边框的宽度，样式，颜色属性，顺序设置为border-width、border-style、border-color，不设置的值为默认值。 |
+| border-width | <length> | 0 | 使用简写属性设置元素的所有边框宽度，或者单独为各边边框设置宽度。 |
+| border-[left\|top\|right\|bottom]-width | <length> | 0 | 分别设置左、上、右、下四个边框的宽度。 |
+| border-color | <color> | black | 使用简写属性设置元素的所有边框颜色，或者单独为各边边框设置颜色。 |
+| border-[left\|top\|right\|bottom]-color | <color> | black | 分别设置左、上、右、下四个边框的颜色。 |
+| border-radius | <length> | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width，border-[left\|top\|right\|bottom]-color ，border-[left\|top\|right\|bottom]-style，如果要设置color、width和style，需要将四个方向一起设置（border-width、border-color、border-style）。 |
+| border-[top\|bottom]-[left\|right]-radius | <length> | - | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
+| background | <linear-gradient> | - | 仅支持设置[渐变样式](js-service-widget-common-gradient.md)，与background-color、background-image不兼容。 |
+| background-color | <color> | - | 设置背景颜色。 |
+| background-image | string | - | 设置背景图片。与background-color、background不兼容，支持本地图片资源地址。
示例：
- background-image: url("/common/background.png")
不支持svg格式图片。 |
+| background-size | - string
- <length> <length>
- <percentage> <percentage> | auto | 设置背景图片的大小。
- string可选值：
- contain：把图片扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
- cover：把背景图片扩展至足够大，以使背景图片完全覆盖背景区域；背景图片的某些部分也许无法显示在背景定位区域中。
- auto：保持原图的比例不变。
- length值参数方式：
设置背景图片的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
- 百分比参数方式：
以父元素的百分比来设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
+| background-repeat | string | repeat | 针对重复背景图片样式进行设置，背景图片默认在水平和垂直方向上重复。
- repeat：在水平轴和竖直轴上同时重复绘制图片。
- repeat-x：只在水平轴上重复绘制图片。
- repeat-y：只在竖直轴上重复绘制图片。
- no-repeat：不会重复绘制图片。 |
+| background-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | - 关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
- left：水平方向上最左侧。
- right：水平方向上最右侧。
- top：竖直方向上最顶部。
- bottom：竖直方向上最底部。
- center：水平方向或竖直方向上中间位置。
- length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
- 百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
- 可以混合使用<percentage>和<length>。 |
+| box-shadow | string | 0 | 语法：box-shadow: h-shadow v-shadow blur spread color
通过这个样式可以设置当前组件的阴影样式，包括水平位置(必填)、垂直位置(必填)、模糊半径(可选，默认值为0)、阴影延展距离(可选，默认值为0)、阴影颜色(可选，默认值为黑色)。
示例：
- box-shadow :10px 20px 5px 10px \#888888
- box-shadow :100px 100px 30px red
- box-shadow :-100px -100px 0px 40px |
+| filter | string | - | 语法：filter: blur(px)
通过这个样式可以设置当前组件布局范围的内容模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。
示例：filter: blur(10px) |
+| backdrop-filter | string | - | 语法：backdrop-filter: blur(px)
通过这个样式可以设置当前组件布局范围的背景模糊，参数用于指定模糊半径，如果没有设置值，则默认是0(不模糊)，不支持百分比。
示例：backdrop-filter: blur(10px) |
+| opacity | number | 1 | 元素的透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。 |
+| display | string | flex | 确定一个元素所产生的框的类型，可选值为：
- flex：弹性布局。
- none：不渲染此元素。 |
+| visibility | string | visible | 是否显示元素所产生的框。不可见的框会占用布局（将'display'属性设置为'none'来完全去除框），可选值为：
- visible：元素正常显示。
- hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明
visibility和display样式都设置时，仅display生效。 |
+| flex | number \| string | - | 规定当前组件如何适应父组件中的可用空间。
flex可以指定1个、2个或3个值。
单值语法：
- 一个无单位数：用来设置组件的flex-grow。
- 一个有效的宽度值：用来设置组件的flex-basis。
双值语法：
第一个值必须是无单位数，用来设置组件的flex-grow。第二个值是以下之一：
- 一个无单位数：用来设置组件的flex-shrink。
- 一个有效的宽度值：用来设置组件的flex-basis。
三值语法：
第一个值必须是无单位数，用来设置组件的flex-grow；第二个值必须是无单位数，用来设置组件的flex-shrink；第三个值必须是一个有效的宽度值，用来设置组件的flex-basis。
仅父容器为<div>、<list-item>时生效。 |
+| flex-grow | number | 0 | 设置组件的拉伸样式，指定父组件容器主轴方向上剩余空间（容器本身大小减去所有flex子元素占用的大小）的分配权重。0为不伸展。
仅父容器为<div>、<list-item>时生效。 |
+| flex-shrink | number | 1 | 设置组件的收缩样式，元素仅在默认宽度之和大于容器的时候才会发生收缩，0为不收缩。
仅父容器为<div>、<list-item>时生效。 |
+| flex-basis | <length> | - | 设置组件在主轴方向上的初始大小。
仅父容器为<div>、<list-item>时生效。 |
+| align-self | string | - | 设置自身在父元素交叉轴上的对齐方式，该样式会覆盖父元素的align-items样式，仅在父容器为div、list。可选值为：
- stretch 弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start 元素向交叉轴起点对齐。
- flex-end 元素向交叉轴终点对齐。
- center 元素在交叉轴居中。
- baseline 元素在交叉轴基线对齐。 |
+| position | string | relative | 设置元素的定位类型，不支持动态变更。
- fixed：相对与整个界面进行定位。
- absolute：相对于父元素进行定位。
- relative：相对于其正常位置进行定位。
absolute属性仅在父容器为<div>时生效。 |
+| [left\|top\|right\|bottom | <length> \| <percentage> | - | left\|top\|right\|bottom需要配合position样式使用，来确定元素的偏移位置。
- left属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
- top属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
- right属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
- bottom属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。 |
+| [start \| end] | <length> \| <percentage> | - | start \| end需要配合position样式使用，来确定元素的偏移位置。
- start属性规定元素的起始边缘。该属性定义了定位元素起始外边距边界与其包含块起始边界之间的偏移。
- end属性规定元素的结尾边缘。该属性定义了一个定位元素的结尾边距边界与其包含块结尾边界之间的偏移。 |
+| z-index | number | - | 表示对于同一父节点其子节点的渲染顺序。数值越大，渲染数据越靠后。
z-index不支持auto，并且opacity等其他样式不会影响z-index的渲染顺序。 |
+| image-fill | <color> | - | 为svg图片填充颜色，支持组件范围（与设置图片资源的属性）：button（icon属性）、image（src属性）。
svg图片文件内的fill属性颜色值在渲染时将被替换为image-fill所配的颜色值，且仅对svg图片内显示声明的fill属性生效。 |
+| clip-path | [ <geometry-box> \|<basic-shape> ] \| none | - | 设置组件的裁剪区域。区域内的部分显示，区域外的不显示。
<geometry-box>：表示裁剪区域的作用范围，默认为border-box。可选值为：
- margin-box：margin计算入长宽尺寸内。
- border-box：border计算入长宽尺寸内。
- padding-box：padding计算入长宽尺寸内。
- content-box：margin/border/padding不计算入长宽尺寸内。
<basic-shape>：表示裁剪的形状。包含以下类型：
- inset，格式为：inset( <percentage>{1,4} [ round <'border-radius'> ]? )。
- circle，格式为：circle( [ <percentage> ]? [ at <percentage> <percentage> ]? )。
- ellipse，格式为：ellipse( [ <percentage>{2} ]? [ at <percentage> <percentage> ]? )。
- polygon，格式为：polygon( [ <percentage> <percentage> ]\# )。
- path，格式为：path( <string> )。 |
+| mask-image | - <linear-gradient>
- string | - | 设置渐变色遮罩或本地图片设置。
设置渐变色遮罩，示例：linear-gradient(to left, black, white)
设置纯色遮罩，示例：linear-gradient(to right, grey , grey)
设置本地svg图片为遮罩，示例：url(common/mask.svg) |
+| mask-size | - string
- <length><length>
- <percentage> <percentage> | auto | 设置遮罩图片显示大小，仅当mask-image为图片资源时有效。
string可选值：
- contain：把图像扩展至最大尺寸，以使其高度和宽度完全适用内容区域。
- cover：把图像扩展至足够大，以使背景图像完全覆盖背景区域；背景图像的某些部分也许无法显示在背景定位区域中。
- auto：保持原图的比例不变。
length值参数方式：设置图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
百分比参数方式：以原图宽高的百分比来设置图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
+| mask-position | - string string
- <length> <length>
- <percentage> <percentage> | 0px 0px | 设置遮罩图片显示位置，仅当mask-image为图片资源时有效。关键词方式：如果仅规定了一个关键词，那么第二个值为"center"。两个值分别定义水平方向位置和竖直方向位置。
string可选值：
- left：水平方向上最左侧。
- right：水平方向上最右侧。
- top：竖直方向上最顶部。
- bottom：竖直方向上最底部。
- center：水平方向或竖直方向上中间位置。
length值参数方式：第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 。如果仅规定了一个值，另外一个值将是50%。
百分比参数方式：第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果仅规定了一个值，另外一个值为50%。
可以混合使用<percentage>和<length>。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md
new file mode 100644
index 0000000000000000000000000000000000000000..cb7360a3d1ae0f9f227f35d869ebbeba1e7cc66e
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-config-file.md
@@ -0,0 +1,93 @@
+# 配置文件
+
+
+js标签中包含了实例名称、窗口样式和卡片页面信息。
+
+
+| 标签 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| name | String | default | 是 | 标识JS实例的名字。 |
+| pages | Array | - | 是 | 路由信息，详见“[pages](#pages)”。 |
+| window | Object | - | 否 | 窗口信息，详见“[window](#window)”。 |
+
+> **说明：**
+> name、pages、window等标签配置需在[配置文件]()中的“js”标签中完成设置。
+
+
+## pages
+
+定义卡片页面信息，由卡片页面路径和卡片页面名组成，卡片仅包含一个页面。比如：
+
+
+```
+{
+ ...
+ "src": "./js/widget/pages/index/index" //卡片仅包含一个页面
+ ...
+}
+```
+
+
+> **说明：**
+> - pages列表中仅包含一个页面。
+>
+> - 页面文件名不能使用组件名称，比如：text.hml、button.hml等。
+
+
+## window
+
+window用于定义与显示窗口相关的配置。对于卡片尺寸适配问题，有2种配置方法，建议使用autoDesignWidth：
+
+- 指定卡片designWidth 150px（2×2），所有与大小相关的样式（例如width、font-size）均以designWidth和实际卡片宽度的比例进行缩放，例如在designWidth为150时，如果设置width为100px时，在卡片实际宽度为300物理像素时，width实际渲染像素为200物理像素。
+
+- 设置autoDesignWidth为true，此时designWidth字段将会被忽略，渲染组件和布局时按屏幕密度进行缩放。屏幕逻辑宽度由设备宽度和屏幕密度自动计算得出，在不同设备上可能不同，请使用相对布局来适配多种设备。例如：在466\*466分辨率，320dpi的设备上，屏幕密度为2（以160dpi为基准），1px等于渲染出的2物理像素。
+ > **说明：**
+ > - 组件样式中<length>类型的默认值，按屏幕密度进行计算和绘制，如：在屏幕密度为2（以160dpi为基准）的设备上，默认<length>为1px时，设备上实际渲染出2物理像素。
+ >
+ > - autoDesignWidth、designWidth的设置不影响默认值计算方式和绘制结果。
+
+| 属性 | 类型 | 必填 | 默认值 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| designWidth | number | 否 | 150px | 页面显示设计时的参考值，实际显示效果基于设备宽度与参考值之间的比例进行缩放。 |
+| autoDesignWidth | boolean | 否 | false | 页面设计基准宽度是否自动计算，当设为true时，designWidth将会被忽略，设计基准宽度由设备宽度与屏幕密度计算得出。 |
+
+ 示例如下：
+ ```
+ {
+ ...
+ "window": {
+ "autoDesignWidth": true
+ }
+ ...
+ }
+ ```
+
+
+## 示例
+
+
+```json
+{
+ "forms": [
+ {
+ "name": "widget",
+ "description": "This is a service widget.",
+ "src": "./js/widget/pages/index/index",
+ "window": {
+ "designWidth": 720,
+ "autoDesignWidth": true
+ },
+ "colorMode": "auto",
+ "isDefault": true,
+ "updateEnabled": true,
+ "scheduledUpdateTime": "10:30",
+ "updateDuration": 1,
+ "defaultDimension": "2*2",
+ "supportDimensions": [
+ "1*2","2*2","2*4","4*4"
+ ],
+ "formConfigAbility": "ability://xxxxx"
+ }
+ ]
+}
+```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md
new file mode 100644
index 0000000000000000000000000000000000000000..3681e765caced63b2f98e917cf6a7cf92725aa56
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-configuration.md
@@ -0,0 +1,34 @@
+# 配置数据和事件
+
+
+卡片使用json文件配置卡片使用的变量和事件，变量的声明在data字段下，事件的声明在actions字段下。
+
+
+示例：
+
+
+
+```json
+{
+ "data": {
+ "temperature": "35°C",
+ "city": "hangzhou"
+ },
+ "actions": {
+ "routerEventName": {
+ "action": "router",
+ "abilityName": "com.example.myapplication.FormAbility",
+ "params": {
+ "message": "weather",
+ "temperature": "{{temperature}}"
+ }
+ },
+ "messageEventName": {
+ "action": "message",
+ "params": {
+ "message": "weather update"
+ }
+ }
+ }
+}
+```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-div.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-div.md
new file mode 100644
index 0000000000000000000000000000000000000000..70e3ace007e8c2268a9a2ce7748ba456c3978dee
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-div.md
@@ -0,0 +1,145 @@
+# div
+
+
+基础容器，用作页面结构的根节点或将内容进行分组。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+## 子组件
+
+支持。
+
+
+## 属性
+
+支持[通用属性](js-service-widget-common-attributes.md)。
+
+
+## 样式
+
+除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| flex-direction | string | row | 否 | flex容器主轴方向。可选项有：
- column：垂直方向从上到下。
- row：水平方向从左到右。 |
+| flex-wrap | string | nowrap | 否 | flex容器是单行还是多行显示，该值暂不支持动态修改。可选项有：
- nowrap：不换行，单行显示。
- wrap：换行，多行显示。 |
+| justify-content | string | flex-start | 否 | flex容器当前行的主轴对齐格式。可选项有：
- flex-start：项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。
- space-evenly5+: 均匀排列每个元素，每个元素之间的间隔相等。 |
+| align-items | string | stretch | 否 | flex容器当前行的交叉轴对齐格式，可选值为：
- stretch：弹性元素在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。 |
+| align-content | string | flex-start | 否 | 交叉轴中有额外的空间时，多行内容对齐格式，可选值为：
- flex-start：所有行从交叉轴起点开始填充。第一行的交叉轴起点边和容器的交叉轴起点边对齐。接下来的每一行紧跟前一行。
- flex-end：所有行从交叉轴末尾开始填充。最后一行的交叉轴终点和容器的交叉轴终点对齐。同时所有后续行与前一个对齐。
- center：所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的交叉轴起点边和第一行的距离相等于容器的交叉轴终点边和最后一行的距离。
- space-between：所有行在容器中平均分布。相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的边对齐。
- space-around：所有行在容器中平均分布，相邻两行间距相等。容器的交叉轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。 |
+| display | string | flex | 否 | 确定该元素视图框的类型，该值暂不支持动态修改。可选值为：
- flex：弹性布局
- none：不渲染此元素 |
+| grid-template-[columns\|rows] | string | 1行1列 | 否 | 用于设置当前网格布局行和列的数量，不设置时默认1行1列，仅当display为grid时生效。
示例：如设置grid-template-columns为：
- 50px 100px 60px：分三列，第一列50px，第二列100px，第三列60px。
- 1fr 1fr 2fr：分三列，将父组件允许的宽分为4等份，第一列占1份，第二列占一份，第三列占2份。
- 30% 20% 50%：分三列，将父组件允许的宽为基准，第一列占30%，第二列占20%，第三列占50%。
- repeat(2,100px)：分两列，第一列100px，第二列100px。
- repeat(auto-fill,100px)5+：按照每列100px的大小和交叉轴大小计算最大正整数重复次数，按照该重复次数布满交叉轴。
- auto 1fr 1fr：分三列，第一列自适应内部子组件所需宽度，剩余空间分为两等份，第二列占一份，第三列占一份。 |
+| grid-[columns\|rows]-gap | <length> | 0 | 否 | 用于设置行与行的间距或者列与列的间距，也可以支持通过grid-gap设置相同的行列间距，仅当display为grid时生效。 |
+| grid-row-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止行号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
+| grid-column-[start\|end] | number | - | 否 | 用于设置当前元素在网格布局中的起止列号，仅当父组件display样式为grid时生效（仅div支持display样式设置为grid）。 |
+| grid-auto-flow | string | - | 否 | 使用框架自动布局算法进行网格的布局，可选值为：
- row：逐行填充元素，如果行空间不够，则新增行。
- column：逐列填充元素，如果列空间不够，则新增列。 |
+| align-items | string | - | 否 | 设置容器中元素交叉轴上的对齐方式：
- stretch：Flex容器内容在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：Flex布局容器内元素向交叉轴起点对齐。
- flex-end：Flex布局容器内元素向交叉轴终点对齐。
- center：Flex布局容器内元素在交叉轴居中对齐。
- baseline：如Flex布局纵向排列，则该值与'flex-start'等效。横向布局时，内容元素存在文本时按照文本基线对齐，否则底部对齐。 |
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+
+## 示例
+
+1. Flex样式
+
+ ```html
+
+
+ ```
+
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 454px;
+ height: 454px;
+ }
+ .flex-box {
+ justify-content: space-around;
+ align-items: center;
+ width: 400px;
+ height: 140px;
+ background-color: #ffffff;
+ }
+ .flex-item {
+ width: 120px;
+ height: 120px;
+ border-radius: 16px;
+ }
+ .color-primary {
+ background-color: #007dff;
+ }
+ .color-warning {
+ background-color: #ff7500;
+ }
+ .color-success {
+ background-color: #41ba41;
+ }
+ ```
+ **2*4卡片**
+
+ 
+
+2. Flex Wrap样式
+
+ ```html
+
+
+ ```
+
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 454px;
+ height: 454px;
+ }
+ .flex-box {
+ justify-content: space-around;
+ align-items: center;
+ flex-wrap: wrap;
+ width: 300px;
+ height: 250px;
+ background-color: #ffffff;
+ }
+ .flex-item {
+ width: 120px;
+ height: 120px;
+ border-radius: 16px;
+ }
+ .color-primary {
+ background-color: #007dff;
+ }
+ .color-warning {
+ background-color: #ff7500;
+ }
+ .color-success {
+ background-color: #41ba41;
+ }
+ ```
+ **4*4卡片**
+
+ 
+
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list-item.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list-item.md
new file mode 100644
index 0000000000000000000000000000000000000000..f76f8a12e77baab472dbc3af1d82888cd8734e2e
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list-item.md
@@ -0,0 +1,49 @@
+# list-item
+
+
+<[list](js-service-widget-container-list.md)>的子组件，用来展示列表具体item。
+
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> - 由于父元素list组件的align-items默认样式为stretch，该组件宽度默认充满list组件。设置父元素list组件的align-items样式为非stretch来生效自定义宽度。
+>
+> - list-item组件开发避免长按和拖动操作。
+
+
+## 子组件
+
+支持。
+
+
+## 属性
+
+除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| type | string | default | 否 | list-item类型，默认值为default，同一list中可以包含多种type的list-item，相同type的list-item需要确保渲染后的视图布局也相同，如果type固定，则使用show属性代替if属性，确保视图布局不变。 |
+| section | string | - | 否 | 当前item的匹配字符串，如不设置则为空。不支持动态修改。group内只有主item设置有效。 |
+| sticky | string | none | 否 | 设置当前item是否为吸顶item以及其吸顶消失的效果，当前仅支持纵向list，group内部的item不可吸顶，设置该属性无效。
- none：当前item不吸顶。
- normal：当前item吸顶，消失效果滑动消失。
- opacity：当前item吸顶，消失效果渐隐消失，仅在智能穿戴上支持。 |
+| clickeffect | boolean | true | 否 | 设置当前item是否有点击动效。
- false：item点击时无点击动效。
- true：item点击时有点击动效。 |
+
+
+## 样式
+
+除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| column-span | <number> | 1 | 否 | 当前的list-item需要在list中占据的列的数量，默认占一列，仅在list为多列时生效。 |
+| click-color | <color> | - | 否 | 设置列表项按压点击时的背板颜色。 |
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+
+## 示例
+
+详见[list示例](js-service-widget-container-list.md#示例)。
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list.md
new file mode 100644
index 0000000000000000000000000000000000000000..4b369117a3c80f9796cb0b9cb444949ded9515be
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-list.md
@@ -0,0 +1,122 @@
+# list
+
+
+列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本。
+
+> **说明：**
+>
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+>
+> 针对卡片场景，建议开发者控制list中的子节点list-item的数量（建议30条以内）以便获取更好的卡片交互体验。
+
+
+
+
+## 子组件
+
+仅支持<[list-item](js-service-widget-container-list-item.md)>子组件。
+
+
+## 属性
+
+除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| cachedcount | number | 0 | 否 | 长列表延迟加载时list-item最少缓存数量。 |
+| scrollbar | string | off | 否 | 侧边滑动栏的显示模式（当前只支持纵向）：
- off：不显示。
- auto：按需显示(触摸时显示，2s后消失)。
- on：常驻显示。 |
+| scrolleffect | string | spring | 否 | 滑动效果，目前支持如下滑动效果：
- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。
- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化。
- no：滑动到边缘后无效果。 |
+| divider | boolean | false | 否 | item是否自带分隔线。
其样式参考[样式列表](#样式)的divider-color、divider-height、divider-length、divider-origin。 |
+| shapemode | string | default | 否 | 侧边滑动栏的形状类型。
- default：不指定，跟随主题。
- rect：矩形。
- round：圆形。 |
+| updateeffect | boolean | false | 否 | 用于设置当list内部的item发生删除或新增时是否支持动效。
- false：新增删除item时无过渡动效。
- true：新增删除item时播放过程动效。 |
+| initialindex | number | 0 | 否 | 用于设置当前List初次加载时视口起始位置显示的item，默认为0，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效，当同时设置了initialoffset属性时，当前属性不生效。 |
+| initialoffset | <length> | 0 | 否 | 用于设置当前List初次加载时视口的起始偏移量，偏移量无法超过当前List可滑动的范围，如果超过会被截断为可滑动范围的极限值。 |
+| selected | string | - | 否 | 指定当前列表中被选中激活的项，可选值为list-item的section属性值。 |
+
+
+## 样式
+
+除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| divider-color | <color> | transparent | 否 | item分隔线颜色，仅当list的divider属性为true时生效。 |
+| divider-height | <length> | 1 | 否 | item分隔线高度，仅当list的divider属性为true时生效。 |
+| divider-length | <length> | 主轴宽度 | 否 | item分隔线长度，不设置时最大长度为主轴宽度，具体长度取决于divider-origin，仅当list的divider属性为true时生效。 |
+| divider-origin | <length> | 0 | 否 | item分隔线相对于item主轴起点位置的偏移量，仅当list的divider属性为true时生效。 |
+| flex-direction | string | column | 否 | 设置flex容器主轴的方向，指定flex项如何放置在flex容器中，可选值为：
- column：主轴为纵向。
- row：主轴为横向。
其他组件默认值为row，在list组件中默认值为column。 |
+| columns | number | 1 | 否 | list交叉轴方向的显示列数，默认为1列。
设置多列时，在list交叉轴上进行均分，每一列大小相同。 |
+| align-items | string | stretch | 否 | list每一列交叉轴上的对齐格式，可选值为：
- stretch：弹性元素被在交叉轴方向被拉伸到与容器相同的高度或宽度。
- flex-start：元素向交叉轴起点对齐。
- flex-end：元素向交叉轴终点对齐。
- center：元素在交叉轴居中。
align-items样式作用在每一列的子元素上，列与列之间采用均分方式布局。 |
+| item-extent | <length> \| <percentage> | - | 否 | 设置内部item为固定大小，设置为百分比格式时，指相对于list的视口主轴方向长度的百分比。 |
+| fade-color | <color> | grey | 否 | 设置渐隐物理动效的颜色。当滑动效果设置为渐隐物理动效时生效。 |
+| scrollbar-color | <color> | - | 否 | 设置滚动条的颜色。 |
+| scrollbar-width | <length> | - | 否 | 设置滚动条的宽度。 |
+| scrollbar-offset | <length> | 0 | 否 | 设置滚动条距离List默认位置的偏移量，只支持正数，默认位置在List右边缘，可以通过这个偏移量调整滚动条的水平位置，如果滚动条绘制在list外部，而list父组件有裁剪，会导致滚动条被裁剪。 |
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+
+## 示例
+
+
+```html
+
+
+
+
+ {{$item.title}}
+ {{$item.date}}
+
+
+
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "todolist": [{
+ "title": "work",
+ "date": "2021-12-31 10:00:00"
+ }, {
+ "title": "watch movie",
+ "date": "2021-12-31 20:00:00"
+ }]
+ }
+}
+```
+
+
+```css
+/* index.css */
+.container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+}
+.todo-wraper {
+ width: 454px;
+ height: 300px;
+}
+.todo-item {
+ width: 454px;
+ height: 80px;
+ flex-direction: column;
+}
+.todo-title {
+ width: 454px;
+ height: 40px;
+ text-align: center;
+}
+```
+**4*4卡片**
+
+
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-stack.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-stack.md
new file mode 100644
index 0000000000000000000000000000000000000000..304ae0c2efbe216464bae09757904a6dad2154d5
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-stack.md
@@ -0,0 +1,78 @@
+# stack
+
+
+堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件。
+
+> **说明：**
+>
+>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+## 子组件
+
+支持。
+
+
+## 属性
+
+支持[通用属性](js-service-widget-common-attributes.md)。
+
+
+## 样式
+
+支持[通用样式](js-service-widget-common-styles.md)。
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+
+## 示例
+
+
+```html
+
+
+
+
+
+
+```
+
+
+```css
+/* xxx.css */
+.stack-parent {
+ width: 400px;
+ height: 400px;
+ margin: 50px;
+ background-color: #ffffff;
+ border-width: 1px;
+ border-style: solid;
+}
+.back-child {
+ width: 300px;
+ height: 300px;
+ background-color: #3f56ea;
+}
+.front-child {
+ width: 100px;
+ height: 100px;
+ background-color: #00bfc9;
+}
+.positioned-child {
+ width: 100px;
+ height: 100px;
+ left: 50px;
+ top: 50px;
+ background-color: #47cc47;
+}
+.bd-radius {
+ border-radius: 16px;
+}
+```
+**4*4卡片**
+
+
+
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-swiper.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-swiper.md
new file mode 100644
index 0000000000000000000000000000000000000000..0dc9b2f39d9da11c5c33517c863d87c1a4e376dd
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-container-swiper.md
@@ -0,0 +1,100 @@
+# swiper
+
+
+滑动容器，提供切换子组件显示的能力。
+
+
+> **说明：**
+>
+>从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+
+## 属性
+
+除支持[通用属性](js-service-widget-common-attributes.md)外，还支持如下属性：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| index | number | 0 | 否 | 当前在容器中显示的子组件的索引值。 |
+| indicator | boolean | true | 否 | 是否启用导航点指示器，默认true。 |
+| digital | boolean | false | 否 | 是否启用数字导航点，默认为false。
必须设置indicator时才能生效数字导航点。 |
+| loop | boolean | true | 否 | 是否开启循环滑动。 |
+| duration | number | - | 否 | 子组件切换的动画时长。 |
+| vertical | boolean | false | 否 | 是否为纵向滑动，纵向滑动时采用纵向的指示器。 |
+
+
+## 样式
+
+除支持[通用样式](js-service-widget-common-styles.md)外，还支持如下样式：
+
+| 名称 | 类型 | 默认值 | 必填 | 描述 |
+| -------- | -------- | -------- | -------- | -------- |
+| indicator-color | <color> | - | 否 | 导航点指示器的填充颜色。 |
+| indicator-selected-color | <color> | - | 否 | 导航点指示器选中的颜色。 |
+| indicator-size | <length> | 4px | 否 | 导航点指示器的直径大小。 |
+| indicator-top\|left\|right\|bottom | <length> \| <percentage> | - | 否 | 导航点指示器在swiper中的相对位置。 |
+
+
+## 事件
+
+支持[通用事件](js-service-widget-common-events.md)。
+
+
+## 示例
+
+
+```html
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+```
+
+
+```css
+/* xxx.css */
+.container {
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+}
+.swiper-item {
+ width: 454px;
+ height: 454px;
+ justify-content: center;
+ align-items: center;
+}
+.primary-item {
+ background-color: #007dff;
+}
+.warning-item {
+ background-color: #ff7500;
+}
+.success-item {
+ background-color: #41ba41;
+}
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "index": 1
+ }
+}
+```
+**4*4卡片**
+
+
+
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-basic-usage.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-basic-usage.md
new file mode 100644
index 0000000000000000000000000000000000000000..b32292dc65c4f008ad088f267dcb9d2b2ecb7f09
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-basic-usage.md
@@ -0,0 +1,27 @@
+# 自定义组件基本用法
+
+
+> **说明：**
+> 从API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+ 自定义组件是用户根据业务需求，将已有的组件组合，封装成的新组件，可以在工程中多次调用，提高代码的可读性。自定义组件通过element引入到宿主页面，使用方法：
+
+```html
+
+
+
+
+```
+
+- name属性指自定义组件名称(非必填)，组件名称对大小写不敏感，默认使用小写。src属性指自定义组件hml文件路径(必填)，若没有设置name属性，则默认使用hml文件名作为组件名。
+
+- 事件绑定：自定义组件中绑定子组件事件使用(on|\@)child1语法，子组件中通过{action:"proxy", method: "eventName"}触发事件并进行传值，父组件执行bindParentVmMethod方法并接收子组件传递的参数。
+
+
+## 自定义组件配置文件标签
+
+| 属性 | 类型 | 描述 |
+| -------- | -------- | -------- |
+| data | Object | 页面的数据模型，类型是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。 |
+| props | Array/Object | props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。 |
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md
new file mode 100644
index 0000000000000000000000000000000000000000..c1b03b177da3a3ff2c88f4e84a90f982cab2f9f2
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-events.md
@@ -0,0 +1,106 @@
+# 自定义事件
+
+
+自定义组件内支持自定义事件，该事件的标识需要action类型指定为proxy，事件名则通过method指定。使用该自定义组件的卡片页面可以通过该事件名注册相应的事件回调，当自定义组件内该自定义事件触发时，会触发卡片页面上注册的回调事件。
+
+
+> **说明：**
+>
+> 事件名不支持大写字母。
+
+
+## 子组件comp示例：
+
+
+```html
+
+
+```
+
+
+
+```css
+/* comp.css */
+.container {
+ flex-direction:column;
+ background-color: green;
+ width: 100%;
+ height: 100%;
+}
+
+.row-3 {
+ width: 100%;
+ height: 50px;
+ background-color: orange;
+ font-size:15px;
+}
+```
+
+
+
+```json
+// comp.json
+{
+ "data": {
+ },
+ "actions": {
+ "buttonClicked": {
+ "action": "proxy",
+ "method":"event_1"
+ }
+ }
+}
+```
+
+
+## 卡片页面示例
+
+
+```html
+
+
+
+
+
+
+
+```
+
+
+
+```css
+/* xxx.css */
+.container {
+ background-color: red;
+ height: 500px;
+ width: 500px;
+}
+```
+
+
+
+```json
+// xxx.json
+{
+ "data": {
+ },
+ "actions": {
+ "click": {
+ "action": "message",
+ "params": {
+ "message": "click event"
+ }
+ },
+ "buttonClick": {
+ "action": "message",
+ "params": {
+ "message": "click event 2"
+ }
+ }
+ }
+}
+```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
new file mode 100644
index 0000000000000000000000000000000000000000..347e6479bfc7604779cc803544faa58e5ac9dc65
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-custom-props.md
@@ -0,0 +1,79 @@
+# Props
+
+
+自定义组件可以通过props声明属性，父组件通过设置属性向子组件传递参数。通过父组件向下传递参数的示例如下：
+
+## 添加默认值
+
+子组件可以通过固定值default设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下props属性必须为对象形式，不能用数组形式，示例如下：
+
+
+
+```html
+
+
+
+
+ xiaoziti
+
+
+ {{text}}
+
+
+ {{textdata[0]}}
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+## 数据单向性
+
+父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将props传入的值用data接收后作为默认值，再对data的值进行修改。
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md
new file mode 100644
index 0000000000000000000000000000000000000000..6e7b373bfe3a5d1450c0b86dbc278ad60840336e
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-file.md
@@ -0,0 +1,57 @@
+# 文件组织
+
+
+## 目录结构
+
+JS服务卡片(entry/src/main/js/Widget)的典型开发目录结构如下：
+
+```
+├─widget
+│ ├─common
+│ │ └─widget.png
+│ ├─i18n
+│ │ ├─en-US.json
+│ │ └─zh-CN.json
+│ └─pages
+│ └─index
+│ ├─index.css
+│ ├─index.hml
+│ └─index.json
+```
+
+目录结构中文件分类如下：
+
+- .hml结尾的HML模板文件，这个文件用来描述卡片页面的模板布局结构。
+
+- .css结尾的CSS样式文件，这个文件用于描述页面样式。
+
+- .json结尾的JSON文件，这个文件用于配置卡片中使用的变量action事件。
+
+各个文件夹的作用：
+
+- pages目录用于存放卡片模板页面。
+
+- common目录用于存放公共资源文件，比如：图片资源。
+
+- i18n目录用于配置不同语言场景资源内容，比如应用文本词条，图片路径等资源。
+
+## 文件访问规则
+
+应用资源可通过绝对路径或相对路径的方式进行访问，本开发框架中绝对路径以"/"开头，相对路径以"./"或"../"。具体访问规则如下：
+
+- 引用代码文件，需使用相对路径，比如：../common/style.css。
+
+- 引用资源文件，推荐使用绝对路径。比如：/common/xxx.png。
+
+- 公共代码文件和资源文件推荐放在common下，通过规则1和规则2进行访问。
+
+- CSS样式文件中通过url()函数创建<url>数据类型，如：url(/common/xxx.png)。
+
+> **说明：**
+> 当代码文件A需要引用代码文件B时：
+>
+> - 如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
+>
+> - 如果代码文件A和文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化。
+>
+> - 在json文件中定义的数据为资源文件路径时，需使用绝对路径。
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-multiple-languages.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-multiple-languages.md
new file mode 100644
index 0000000000000000000000000000000000000000..78c0a0fde361747bd20b0819fc6946958fbb4135
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-multiple-languages.md
@@ -0,0 +1,115 @@
+# 多语言支持
+
+
+基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。
+
+
+开发者仅需要通过[定义资源文件](#定义资源文件)和[引用资源](#引用资源)两个步骤，就可以使用开发框架的多语言能力。
+
+
+## 定义资源文件
+
+资源文件用于存放应用在多种语言场景下的资源内容，开发框架使用JSON文件保存资源定义。
+
+在[文件组织](js-service-widget-file.md)中指定的i18n文件夹内放置每个语言地区下的资源定义文件即可，资源文件命名为“语言-地区.json”格式，例如英文（美国）的资源文件命名为en-US.json。当开发框架无法在应用中找到系统语言的资源文件时，默认使用en-US.json中的资源内容。
+
+由于不同语言针对单复数有不同的匹配规则，在资源文件中的使用“zero”“one”“two”“few”“many”“other”定义不同单复数场景下的词条内容。例如中文不区分单复数仅存在“other”场景；英文存在“one”、“other”场景；阿拉伯语存在上述6种场景。
+
+ 以en-US.json和ar-AE.json为例，资源文件内容格式如下：
+
+```json
+{
+ "strings": {
+ "hello": "Hello world!",
+ "symbol": "@#$%^&*()_+-={}[]\\|:;\"'<>,./?",
+ "plurals": {
+ "one": "one person",
+ "other": "other people"
+ }
+ },
+
+ "files": {
+ "image": "image/en_picture.PNG"
+ }
+}
+```
+
+
+```json
+{
+ "strings": {
+ "plurals": {
+ "zero": "لا أحد",
+ "one": "وحده",
+ "two": "اثنان",
+ "few": "ستة اشخاص",
+ "many": "خمسون شخص",
+ "other": "مائة شخص"
+ }
+ }
+}
+```
+
+
+## 引用资源
+
+在应用开发的页面中使用多语言的语法，包含简单格式化和单复数格式化两种，都可以在hml或js中使用。
+
+- 简单格式化方法
+ 在应用中使用$t方法引用资源，$t既可以在hml中使用，也可以在js中使用。系统将根据当前语言环境和指定的资源路径（通过$t的path参数设置），显示对应语言的资源文件中的内容。
+
+ **表1** 简单格式化
+
+ | 属性 | 类型 | 参数 | 必填 | 描述 |
+ | -------- | -------- | -------- | -------- | -------- |
+ | $t | Function | 请见$t参数说明 | 是 | 根据系统语言完成简单的替换：this.$t('strings.hello') |
+
+ **表2** $t参数说明
+
+ | 参数 | 类型 | 必填 | 描述 |
+ | -------- | -------- | -------- | -------- |
+ | path | string | 是 | 资源路径 |
+
+- 简单格式化示例代码
+
+ ```html
+
+
+ {{ $t('strings.hello') }}
+
+
+ ```
+
+- 单复数格式化方法
+ **表3** 单复数格式化
+
+ | 属性 | 类型 | 参数 | 必填 | 描述 |
+ | -------- | -------- | -------- | -------- | -------- |
+ | $tc | Function | 请见$tc参数说明 | 是 | 根据系统语言完成单复数替换：this.$tc('strings.plurals')
定义资源的内容通过json格式的key为“zero”、“one”、“two”、“few”、“many”和“other”区分。 |
+
+ **表4** $tc参数说明
+
+ | 参数 | 类型 | 必填 | 描述 |
+ | -------- | -------- | -------- | -------- |
+ | path | string | 是 | 资源路径 |
+ | count | number | 是 | 要表达的值 |
+
+- 单复数格式化示例代码
+
+ ```html
+
+
+
+ {{ $tc('strings.plurals', 0) }}
+
+ {{ $tc('strings.plurals', 1) }}
+
+ {{ $tc('strings.plurals', 2) }}
+
+ {{ $tc('strings.plurals', 6) }}
+
+ {{ $tc('strings.plurals', 50) }}
+
+ {{ $tc('strings.plurals', 100) }}
+
+ ```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md
new file mode 100644
index 0000000000000000000000000000000000000000..9838ed3a9b2b4ed23312e49a9b608bf59ebbd02d
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-css.md
@@ -0,0 +1,101 @@
+# CSS语法参考
+
+
+CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。
+
+
+## 尺寸单位
+
+1. 逻辑像素px（文档中以<length>表示）：
+ 1. 默认卡片具有的逻辑宽度为150px（配置见[配置文件](js-service-widget-config-file.md#window)中的window小节），实际显示时会将页面布局缩放至屏幕实际宽度，如100px在宽度为300的卡片上，实际渲染为200物理像素（从150px向300物理像素，所有尺寸放大2倍）。
+ 2. 额外配置autoDesignWidth为true时（配置见[配置文件](js-service-widget-config-file.md#window)中的window小节），逻辑像素px将按照屏幕密度进行缩放，如100px在屏幕密度为3的设备上，实际渲染为300物理像素。应用需要适配多种设备时，建议采用此方法。
+
+2. 百分比（文档中以<percentage>表示）：表示该组件占父组件尺寸的百分比，如组件的width设置为50%，代表其宽度为父组件的50%。
+
+
+## 样式导入
+
+为了模块化管理和代码复用，CSS样式文件支持 \@import 语句，导入 CSS 文件。
+
+
+## 声明样式
+
+每个页面目录下存在一个与布局hml文件同名的css文件，用来描述该hml页面中组件的样式，决定组件应该如何显示。
+
+1. 内部样式，支持使用style、class属性来控制组件的样式。例如：
+
+ ```html
+
+
+ Hello World
+
+ ```
+
+
+ ```css
+ /* index.css */
+ .container {
+ justify-content: center;
+ }
+ ```
+
+2. 文件导入，合并外部样式文件。例如，在common目录中定义样式文件style.css，并在index.css中进行导入：
+
+ ```css
+ /* style.css */
+ .title {
+ font-size: 50px;
+ }
+ ```
+
+
+ ```css
+ /* index.css */
+ @import '../../common/style.css';
+ .container {
+ justify-content: center;
+ }
+ ```
+
+
+## 选择器
+
+css选择器用于选择需要添加样式的元素，支持的选择器如下表所示：
+
+| 选择器 | 样例 | 样例描述 |
+| -------- | -------- | -------- |
+| .class | .container | 用于选择class="container"的组件。 |
+| \#id | \#titleId | 用于选择id="titleId"的组件。 |
+
+示例：
+
+
+```html
+
+
+```
+
+
+```css
+/* 页面样式xxx.css */
+/* 对class="title"的组件设置样式 */
+.title {
+ font-size: 30px;
+}
+/* 对id="contentId"的组件设置样式 */
+#contentId {
+ font-size: 20px;
+}
+```
+
+
+## 选择器优先级
+
+选择器的优先级计算规则与w3c规则保持一致（只支持：内联样式，id，class），其中内联样式为在元素style属性中声明的样式。
+
+当多条选择器声明匹配到同一元素时，各类选择器优先级由高到低顺序为：内联样式 > id > class 。
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md
new file mode 100644
index 0000000000000000000000000000000000000000..3270a6fd6a9ed892a310406e55067adc81639505
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-syntax-hml.md
@@ -0,0 +1,304 @@
+# HML语法参考
+
+
+HML（OpenHarmony Markup Language）是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、条件渲染和逻辑控制等高级能力。
+
+
+## 页面结构
+
+
+```html
+
+
+```
+
+
+## 数据绑定
+
+
+```html
+
+
+ {{content}}
+ {{key1}} {{key2}}
+ key1 {{key1}}
+ {{flag1 && flag2}}
+ {{flag1 || flag2}}
+ {{!flag1}}
+
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "content": "Hello World!",
+ "key1": "Hello",
+ "key2": "World",
+ "flag1": true,
+ "flag2": false
+ }
+}
+```
+
+
+> **说明：**
+> - key值支持对象操作符和数组操作符，如{{key.value}}、{{key[0]}}。
+>
+> - 从 API Version 6 开始支持字符串拼接、逻辑运算和三元表达式。
+> - 字符串拼接：
+> - 支持变量跟变量：{{key1}}{{key2}}等
+> - 支持常量跟变量： "my name is {{name}}， i am from {{city}}." "key1 {{key1}}"
+> - 逻辑运算：
+> - 与：{{flag1 && flag2}}（仅支持两个boolean变量间的与）
+> - 或：{{flag1 || flag2}} （仅支持两个boolean变量间的或）
+> - 非：{{!flag1}} （仅支持boolean变量的非运行）
+> - 三元表达式
+> - {{flag? key1:key2}}（flag为boolean变量，key1和key2可以是变量，也可以是常量）
+> - 注意事项
+> - 非boolean类型值进行bool运算默认为false
+> - 以上所有变量解析跟运算解析均不支持嵌套
+
+## 事件绑定
+
+卡片仅支持click通用事件，事件的定义只能是直接命令式，事件定义必须包含action字段，用以说明事件类型。卡片支持两种事件类型：跳转事件(router)和消息事件(message)。跳转事件可以跳转到卡片提供方的OpenHarmony应用，消息事件可以将开发者自定义信息传递给卡片提供方。事件参数支持变量，变量以"{{}}"修饰。跳转事件中若定义了params字段，则在被拉起应用的onStart的intent中，可用"params"作为key将跳转事件定义的params字段的值取到。
+
+- 跳转事件格式
+
+ 通过定义ability名称和携带的参数字段params直接跳转，可用"params"作为key提取到跳转事件定义的params字段值。
+
+ | 选择器 | 样例 | 默认值 | 样例描述 |
+ | -------- | -------- | -------- | -------- |
+ | action | string | "router" | 事件类型。
- "router"：用于应用跳转。
- "message"：自定义点击事件。 |
+ | abilityName | string | - | 跳转ability名。 |
+ | params | Object | - | 跳转应用携带的额外参数。 |
+
+
+ ```json
+ // xxx.json
+ {
+ "data": {
+ "mainAbility": "xxx.xxx.xxx"
+ },
+ "actions": {
+ "routerEvent": {
+ "action": "router",
+ "abilityName": "{{mainAbility}}",
+ "params":{}
+ }
+ }
+ }
+ ```
+
+ 也可以使用want格式绑定参数跳转到目标应用，want定义了ability名称、包名、携带的参数字段等。
+
+ | 选择器 | 类型 | 默认值 | 样例描述 |
+ | ------ | ------ | -------- | ------------------------------------------------------------ |
+ | action | string | "router" | 事件类型。
- "router"：用于应用跳转。
- "message"：自定义点击事件。 |
+ | want | Object | - | 跳转目标应用的信息，参考want格式表。 |
+
+ **表1** want格式
+
+ | 选择器 | 类型 | 默认值 | 样例描述 |
+ | ----------- | -------------------- | ------------ | ------------------------------------------------------------ |
+ | bundleName | string | - | 表示包描述。如果在Want中同时指定了BundleName和AbilityName，则Want可以直接匹配到指定的Ability。 |
+ | abilityName | string | - | 表示待启动的Ability名称。 |
+ | action | string | - | 表示action选项描述。 |
+ | uri | string | - | 表示Uri描述。如果在Want中指定了Uri，则Want将匹配指定的Uri信息，包括scheme, schemeSpecificPart, authority和path信息。 |
+ | type | string | "text/plain" | 表示MIME type类型描述，比如："text/plain" 、 "image/*"等。 |
+ | flags | number | - | 表示处理Want的方式。默认传数字，具体参考[flags说明](../apis/js-apis-featureAbility.md#flags说明)。 |
+ | entities | Array\ | - | 类别，用于指定Intent的操作类别。 |
+ | parameters | {[key: string]: any} | - | 表示WantParams描述。 |
+
+
+ ```json
+ // xxx.json
+ {
+ "data": {
+ "mainAbility": "xxx.xxx.xxx"
+ },
+ "actions": {
+ "routerEventName1": {
+ "action": "router",
+ "want": {
+ "bundleName": "com.example.myapplication",
+ "abilityName": "com.example.entry.MainAbility"
+ }
+ },
+ "routerEventName2": {
+ "action": "router",
+ "want": {
+ "action": "xxx.intent.action.DIAL",
+ "uri": "tel:12345678"
+ }
+ }
+ }
+ }
+ ```
+
+ 在API Version 8，want参数需要在app.js或app.ets文件的onCreate方法中调用[featureAbility.getWant](../apis/js-apis-featureAbility.md#featureabilitygetwant-1)接口接收相关参数。
+
+- 消息事件格式
+
+ | 选择器 | 样例 | 默认值 | 样例描述 |
+ | -------- | -------- | -------- | -------- |
+ | action | string | message | 表示事件类型。 |
+ | params | Object | - | 跳转应用携带的额外参数。 |
+
+
+ ```json
+ // xxx.json
+ {
+ "actions": {
+ "activeEvent": {
+ "action": "message",
+ "params": {}
+ }
+ }
+ }
+ ```
+
+- 绑定路由事件和消息事件
+
+ ```html
+
+
+ ```
+
+
+## 列表渲染
+
+
+```html
+
+
+
+
+
+ {{$item.name}}
+
+
+
+ {{value.name}}
+
+
+
+ {{value.name}}
+
+
+ Hello-TV
+ Hello-Wearable
+ Hello-World
+
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "show": false,
+ "display": true
+ }
+}
+```
+
+当show为真时，节点正常渲染；当show为假时，节点不渲染，效果等同display样式为none。
+
+
+```html
+
+ Hello World
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "visible": false
+ }
+}
+```
+
+
+## 逻辑控制块
+
+<block>控制块使得循环渲染和条件渲染变得更加灵活；block在构建时不会被当作真实的节点编译。block标签只支持if属性。
+
+
+```html
+
+
+
+ Hello
+ World
+
+
+```
+
+
+```json
+// xxx.json
+{
+ "data": {
+ "show": true
+ }
+}
+```
diff --git a/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-version-compatibility.md b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-version-compatibility.md
new file mode 100644
index 0000000000000000000000000000000000000000..6ffed216a0c9d4923ab3a3ed584a8a1ef67d3c8a
--- /dev/null
+++ b/zh-cn/application-dev/reference/js-service-widget-ui/js-service-widget-version-compatibility.md
@@ -0,0 +1,61 @@
+# 低版本兼容
+
+
+卡片特性不断增加，使用了新特性的卡片，在不支持这些新特性的老系统上可能显示异常。可以在卡片工程中指定最小SDK版本，防止使用新特性的卡片推送安装在老的系统上。也可以参考本章节的内容，在卡片开发阶段做前向兼容适配。
+
+
+> **说明：**
+> 低版本兼容能力从 API Version 6 开始支持。
+
+
+开发者可以通过JSON配置文件配置前向兼容能力。该文件提供了apiVersion属性用于兼容版本，该字段和卡片配置文件的数据字段data、事件字段actions同级。在apiVersion标签下定义的内容会基于当前运行版本信息，覆盖原始的data标签内容。
+
+
+示例如下：
+
+
+假设JS服务卡片框架从API Version 6开始，支持引用系统内置资源颜色，从API Version 7开始支持slider组件（仅用于举例，不代表实际情况），则可以按照如下的方式，做前向兼容。
+
+
+
+```html
+
+
+ hello world
+
+
+```
+
+
+xxx.json配置文件：
+
+
+
+```json
+{
+ "data": {
+ "myBackgroundColor": "#87ceeb",
+ "canUseSlider": "false"
+ },
+ "apiVersion": {
+ "6": {
+ "myBackgroundColor": "@sys.color.fa_background"
+ },
+ "7": {
+ "canUseSlider": "true"
+ }
+ }
+}
+```
+
+
+JS服务卡片开发框架会根据应用中的配置及当前系统运行版本，选取最合适的数据。
+
+
+假设系统运行版本在5及以下，则实际解析的myBackgroundColor值为\#87ceeb，canUseSlider值为false；
+
+
+假设系统运行版本为6，则实际解析的myBackgroundColor值为\@sys.color.fa_background，canUseSlider值为false；
+
+
+假设系统运行版本为7及以上，则实际解析的际解析的myBackgroundColor值为\@sys.color.fa_background，canUseSlider值为true。