From 66401e331dc54b07fadf1f2f13a4c1f8aa29c034 Mon Sep 17 00:00:00 2001 From: HelloCrease Date: Wed, 14 Sep 2022 15:20:31 +0800 Subject: [PATCH] update docs Signed-off-by: HelloCrease --- zh-cn/application-dev/reference/Readme-CN.md | 4 +-- .../reference/arkui-js/Readme-CN.md | 2 +- .../arkui-js/js-components-basic-picker.md | 19 ++++++------ .../reference/arkui-ts/Readme-CN.md | 2 +- .../arkui-ts/ts-canvasrenderingcontext2d.md | 2 +- ...s-universal-component-area-change-event.md | 2 +- zh-cn/application-dev/ui/Readme-CN.md | 4 +-- zh-cn/application-dev/ui/arkui-overview.md | 4 +-- .../ui/ts-framework-file-access-rules.md | 6 ++-- .../ui/ui-js-component-tabs.md | 31 ++++++++++--------- zh-cn/application-dev/ui/ui-js-overview.md | 8 ++--- 11 files changed, 43 insertions(+), 41 deletions(-) diff --git a/zh-cn/application-dev/reference/Readme-CN.md b/zh-cn/application-dev/reference/Readme-CN.md index 2fe3bc167f..d6f15475f8 100644 --- a/zh-cn/application-dev/reference/Readme-CN.md +++ b/zh-cn/application-dev/reference/Readme-CN.md @@ -1,7 +1,7 @@ # 开发参考 -- [组件参考（基于TS扩展的声明式开发范式）](arkui-ts/Readme-CN.md) -- [组件参考（基于JS扩展的类Web开发范式）](arkui-js/Readme-CN.md) +- [组件参考（基于eTS的声明式开发范式）](arkui-ts/Readme-CN.md) +- [组件参考（兼容JS的类Web开发范式）](arkui-js/Readme-CN.md) - [JS服务卡片UI组件参考](js-service-widget-ui/Readme-CN.md) - [接口参考（JS及TS API）](apis/Readme-CN.md) - 接口参考（Native API） diff --git a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md index 18e7b78ced..f69a30d4bc 100644 --- a/zh-cn/application-dev/reference/arkui-js/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-js/Readme-CN.md @@ -1,4 +1,4 @@ -# 基于JS扩展的类Web开发范式 +# 兼容JS的类Web开发范式 - 组件通用信息 - [通用属性](js-components-common-attributes.md) diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md index 45652c3694..7eb222bd9a 100644 --- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md +++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md @@ -1,6 +1,7 @@ # picker -> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** +> **说明：** +> > 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。 @@ -31,7 +32,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------ | ---- | ---- | ---------------------------------------- | -| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | +| range | Array | - | 否 | 设置普通选择器的取值范围，如["15", "20", "25"]。
使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：["15", "20", "25"]。 | | selected | string | 0 | 否 | 设置普通选择器弹窗的默认取值，取值需要是 range 的索引值，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置普通选择器的值。 | @@ -47,7 +48,7 @@ | selected | string | 当前日期 | 否 | 设置日期选择器弹窗的默认取值，格式为 YYYY-MM-DD，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期选择器的值。 | | lunar5+ | boolean | false | 否 | 设置日期选择器弹窗界面是否为农历展示。 | -| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | +| lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | ### 时间选择器 @@ -59,7 +60,7 @@ | containsecond | boolean | false | 否 | 设置时间选择器是否包含秒。 | | selected | string | 当前时间 | 否 | 设置时间选择器弹窗的默认取值，格式为 HH:mm；当包含秒时，格式为HH:mm:ss，
该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 否 | 设置时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | ### 日期时间选择器 @@ -70,7 +71,7 @@ | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | 当前日期时间 | 否 | 设置日期时间选择器弹窗的默认取值，有两种可选格式。
- 月日时分：MM-DD-HH-mm
- 年月日时分：YYYY-MM-DD-HH-mm
不设置年时，默认使用当前年，该取值表示选择器弹窗界面的默认选择值。 | | value | string | - | 是 | 设置日期时间选择器的值。 | -| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
  > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
  > 默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | +| hours | number | 241-4
-5+ | 否 | 设置日期时间选择器采用的时间格式，可选值：
- 12：按照12小时制显示，用上午和下午进行区分；
- 24：按照24小时制显示。
默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+lunar5+booleanfalse否设置日期时间选择器弹窗界面是否为农历展示。lunarswitchbooleanfalse否设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
说明：
当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。默认值会依据系统当前所选地区和语言选择当地习惯的小时制(12小时制或24小时制)。5+ | | lunar5+ | boolean | false | 否 | 设置日期时间选择器弹窗界面是否为农历展示。 | | lunarswitch | boolean | false | 否 | 设置日期选择器是否显示农历开关。当值为true时，显示农历开关，点击农历开关可切换公历和农历。当值为false时，不显示农历开关。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 当lunarswitch=true且lunar=true时，开关按钮处于被选中状态。 | @@ -82,7 +83,7 @@ | 名称 | 类型 | 默认值 | 必填 | 描述 | | -------- | ------- | --------- | ---- | ---------------------------------------- | | columns | number | - | 是 | 设置多列文本选择器的列数。 | -| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 使用时需要使用数据绑定的方式，如range = {{data}}，js中声明相应变量：data：[["a","b"], ["c","d"]]。 | +| range | 二维Array | - | 否 | 设置多列文本选择器的选择项，其中range 为二维数组。长度表示多少列，数组的每项表示每列的数据，如  [["a","b"], ["c","d"]]。
使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。selectedArray[0,0,0,…]否设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。valueArray-否设置多列文本选择器的值，每一列被选中项对应的值构成的数组。使用时需要使用数据绑定的方式，如range={{data}}，js中声明相应变量：data：[["a","b"],["c","d"]]。 | | selected | Array | [0,0,0,…] | 否 | 设置多列文本选择器弹窗的默认值，每一列被选中项对应的索引构成的数组，该取值表示选择器弹窗界面的默认选择值。 | | value | Array | - | 否 | 设置多列文本选择器的值，每一列被选中项对应的值构成的数组。 | @@ -95,7 +96,7 @@ | -------------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- | | text-color | <color> | - | 否 | 选择器的文本颜色。 | | font-size | <length> | - | 否 | 选择器的文本尺寸。 | -| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | +| allow-scale | boolean | true | 否 | 选择器的文本尺寸是否跟随系统设置字体缩放尺寸进行放大缩小。
如果在config描述文件中针对ability配置了fontSize的config-changes标签，则应用不会重启而直接生效。 | | letter-spacing | <length> | 0 | 否 | 选择器的字符间距。见[text组件的letter-spacing样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | text-decoration | string | - | 否 | 选择器的文本修饰。见[text组件的text-decoration样式属性](../arkui-js/js-components-basic-text.md#样式)。 | | font-style | string | normal | 否 | 选择器的字体样式。见[text组件的font-style样式属性](../arkui-js/js-components-basic-text.md#样式)。 | @@ -122,7 +123,7 @@ | 名称 | 参数 | 描述 | | ------ | ---------------------------------------- | ---------------------------------------- | -| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> month值范围为： 0（1月）~11（12月）。5+ | +| change | { year: year, month: month, day: day } | 日期选择器选择值后点击弹窗中的确认按钮时触发该事件。
month值范围为： 0（1月）~11（12月）。5+ | | cancel | - | 用户点击弹窗中的取消按钮时触发该事件。 | @@ -171,7 +172,7 @@ + oncancel="textoncancel" class="pickertext"> diff --git a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md index cf9074f1e2..e48fce335e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md +++ b/zh-cn/application-dev/reference/arkui-ts/Readme-CN.md @@ -1,4 +1,4 @@ -# 基于TS扩展的声明式开发范式 +# 基于eTS的声明式开发范式 - 组件通用信息 - 通用事件 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md index 08db299f85..a41207e3b1 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md @@ -786,7 +786,7 @@ fillText(text: string, x: number, y: number): void **参数：** | 参数 | 类型 | 必填 | 默认值 | 说明 | | ---- | ------ | ---- | ---- | --------------- | -| text | string | 是 | “” | 需要绘制的文本内容。 | +| text | string | 是 | "" | 需要绘制的文本内容。 | | x | number | 是 | 0 | 需要绘制的文本的左下角x坐标。 | | y | number | 是 | 0 | 需要绘制的文本的左下角y坐标。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md index b1bdbfba1a..0bf7187ad5 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-component-area-change-event.md @@ -14,7 +14,7 @@ | 名称 | 支持冒泡 | 功能描述 | | ---------------------------------------- | ---- | ---------------------------------------- | -| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型说明见[Area对象](ts-universal-events-click.md)介绍。 | +| onAreaChange(event: (oldValue: Area, newValue: Area) => void) | 否 | 组件区域变化时触发该回调，Area类型描述见[Area](../../ui/ts-types.md#area8)。 | ## 示例 diff --git a/zh-cn/application-dev/ui/Readme-CN.md b/zh-cn/application-dev/ui/Readme-CN.md index a54003072d..435fd6777e 100755 --- a/zh-cn/application-dev/ui/Readme-CN.md +++ b/zh-cn/application-dev/ui/Readme-CN.md @@ -1,7 +1,7 @@ # UI开发 - [方舟开发框架（ArkUI）概述](arkui-overview.md) -- 基于TS扩展的声明式开发范式 +- UI开发（基于eTS的声明式开发范式） - [概述](ui-ts-overview.md) - 框架说明 - 文件组织 @@ -71,7 +71,7 @@ - [构建食物分类Grid布局](ui-ts-building-category-grid-layout.md) - [页面跳转与数据传递](ui-ts-page-redirection-data-transmission.md) - [性能提升的推荐方案](ts-performance-improvement-recommendation.md) -- 基于JS扩展的类Web开发范式 +- UI开发（兼容JS的类Web开发范式） - [概述](ui-js-overview.md) - 框架说明 - [文件组织](js-framework-file.md) diff --git a/zh-cn/application-dev/ui/arkui-overview.md b/zh-cn/application-dev/ui/arkui-overview.md index e80deb47e2..08e119eb28 100644 --- a/zh-cn/application-dev/ui/arkui-overview.md +++ b/zh-cn/application-dev/ui/arkui-overview.md @@ -26,12 +26,12 @@ - 平台API通道：方舟开发框架提供了API扩展机制，平台能力通过此种机制进行封装，提供风格统一的JS接口。 -- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于JS扩展的类Web开发范式（简称“类Web开发范式”）和基于TS扩展的声明式开发范式（简称“声明式开发范式”）。 +- 两种开发范式：方舟开发框架针对不同目的和技术背景的开发者提供了两种开发范式，分别是基于eTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。 | 开发范式名称 | 简介 | 适用场景 | 适用人群 | | -------- | ---------------------------------------- | ---------------- | ------------------- | - | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | | 声明式开发范式 | 采用TS语言并进行声明式UI语法扩展，从组件、动效和状态管理三个维度提供了UI绘制能力。UI开发更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。同时，选用有类型标注的TS语言，引入编译期的类型校验。 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 | + | 类Web开发范式 | 采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。 | 界面较为简单的中小型应用和卡片 | Web前端开发人员 | 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 ffc32f5b1b..b132dc619c 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 @@ -3,9 +3,9 @@ 应用代码文件可通过如下方式访问： -- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils.ets，当前目录：./common/utils/utils.ets。 +- 使用相对路径引用代码文件，比如：上一级目录：../common/utils/utils，当前目录：./common/utils/utils。 -- 使用当前模块根路径引用代码文件，比如：common/utils/utils.ets。 +- 使用当前模块根路径引用代码文件，比如：common/utils/utils。 - 公共代码文件推荐放在**common**目录下。 @@ -13,7 +13,7 @@ ## 示例 ``` -import { FoodData, FoodList } from "../common/utils/utils.ets"; +import { FoodData, FoodList } from "../common/utils/utils"; @Entry @Component diff --git a/zh-cn/application-dev/ui/ui-js-component-tabs.md b/zh-cn/application-dev/ui/ui-js-component-tabs.md index a048cb8911..d33fd6ddfc 100644 --- a/zh-cn/application-dev/ui/ui-js-component-tabs.md +++ b/zh-cn/application-dev/ui/ui-js-component-tabs.md @@ -8,21 +8,22 @@ Tabs是一种常见的界面导航结构。通过页签容器，用户可以快 在pages/index目录下的hml文件中创建一个Tabs组件。 ``` - -
- - item1 - item2 - - -
- content1 -
-
- content2 -
- - + +
+ + + item1 + item2 + + +
+ content1 +
+
+ content2 +
+ +
``` diff --git a/zh-cn/application-dev/ui/ui-js-overview.md b/zh-cn/application-dev/ui/ui-js-overview.md index 89be29a238..f90e63188b 100755 --- a/zh-cn/application-dev/ui/ui-js-overview.md +++ b/zh-cn/application-dev/ui/ui-js-overview.md @@ -1,13 +1,13 @@ # 概述 -基于JS扩展的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 +兼容JS的类Web开发范式的方舟开发框架，采用经典的HML、CSS、JavaScript三段式开发方式。使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发更新。此种开发方式，更接近Web前端开发者的使用习惯，快速将已有的Web应用改造成方舟开发框架应用。主要适用于界面较为简单的中小型应用开发。 -请参考[基于JS扩展的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。 +请参考[兼容JS的类Web开发范式API](../reference/arkui-js/js-components-common-attributes.md)文档，全面地了解组件，更好地开发应用。 ## 整体架构 -使用基于JS扩展的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 +使用兼容JS的类Web开发范式的方舟开发框架，包括应用层（Application）、前端框架层（Framework）、引擎层（Engine）和平台适配层（Porting Layer）。 @@ -32,7 +32,7 @@ ## 相关实例 -基于JS扩展的类Web开发范式的方舟开发框架，有以下相关实例可供参考： +兼容JS的类Web开发范式的方舟开发框架，有以下相关实例可供参考： - [`AtomicLayout`：原子布局（JS）（API8）](https://gitee.com/openharmony/applications_app_samples/tree/master/UI/AtomicLayout) -- GitLab