diff --git a/zh-cn/application-dev/reference/Readme-CN.md b/zh-cn/application-dev/reference/Readme-CN.md index 2fe3bc167f975b6fed0688e38fa631c2b8606d13..d6f15475f8fc82c182cc3acc258947389ffb4f49 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 18e7b78ced59bd69f28023df446b76b1c9d5ff6a..f69a30d4bc57b842f7b6041c6be3df9753a9a9c2 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 45652c36949000bb41f628ec4d1cdc36c6e8f689..7eb222bd9a40ba46eab060932e5d9a36ae0386ea 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 cf9074f1e24c2d81aa48be846f1f864d9ef88358..e48fce335e707b6458f0ae614900568f6a7695d4 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 08db299f856f4fdae23a238e0bc16c6c6bfcdee4..a41207e3b1833033eb167c30fe8eed267e6de79a 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 b1bdbfba1a1595952094d573e1f452b0c2c8dd9e..0bf7187ad5d6a3d2c81a3662f6487f269ab27c44 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 a54003072d7028cca338ddc92c97e72c377bc65e..435fd6777edb98f96ab1502e28d4eeafe59ff9eb 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 e80deb47e22b89f623c2d13498222ea3845343fe..08e119eb28eaddd337a300875e53cefd6efdee3a 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 ffc32f5b1b0b2c7c51fb17f919a5f93ea70a6fef..b132dc619ce4271d1cb31e1b95173dc481650c93 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 a048cb8911d454fbed5b4d3020de818370362f8d..d33fd6ddfcbd2773faa06aae992d18a817e605a9 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 89be29a238b9521c61b8bda3b12d855f3c3ca4da..f90e63188bef24b16926e69115f332bd91e03591 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)