提交 b68d6c95 编写于 作者: H HelloCrease

update sample

Signed-off-by: NHelloCrease <lian15@huawei.com>
上级 0368e671
...@@ -4,32 +4,20 @@ ...@@ -4,32 +4,20 @@
应用或业务模块处于后台(无可见界面)时,如果有需要继续执行或者后续执行的业务,可基于业务类型,申请短时任务延迟挂起(Suspend)或者长时任务避免进入挂起状态。 应用或业务模块处于后台(无可见界面)时,如果有需要继续执行或者后续执行的业务,可基于业务类型,申请短时任务延迟挂起(Suspend)或者长时任务避免进入挂起状态。
## 接口说明
```js
import backgroundTaskManager from '@ohos.backgroundTaskManager';
```
## 短时任务 ## 短时任务
### 接口说明
**表1** 短时任务主要接口 **表1** 短时任务主要接口
| 接口名 | 描述 | | 接口名 | 描述 |
| -------- | -------- | | -------- | -------- |
| function&nbsp;requestSuspendDelay(reason:&nbsp;string,&nbsp;callback:&nbsp;Callback&lt;void&gt;):&nbsp;**DelaySuspendInfo**; | 后台应用申请延迟挂起。<br/>延迟挂起时间一般情况下默认值为180000,低电量(依据系统低电量广播)时默认值为60000。 | | requestSuspendDelay(reason:&nbsp;string,&nbsp;callback:&nbsp;Callback&lt;void&gt;):&nbsp;[DelaySuspendInfo](../reference/apis/js-apis-backgroundTaskManager.md#delaysuspendinfo) | 后台应用申请延迟挂起。<br/>延迟挂起时间一般情况下默认值为180000,低电量时默认值为60000。 |
| function&nbsp;getRemainingDelayTime(requestId:&nbsp;number,&nbsp;callback:&nbsp;AsyncCallback&lt;number&gt;):&nbsp;void;<br/>function&nbsp;getRemainingDelayTime(requestId:&nbsp;number):&nbsp;Promise&lt;number&gt;; | 获取应用程序进入挂起状态前的剩余时间。(requestId从requestSuspendDelay的返回值获取)<br/>提供两种异步方法,使用Callback形式其任务执行结果以参数形式提供给回调函数,Promise形式则返回一个Promise对象。 | | getRemainingDelayTime(requestId:&nbsp;number):&nbsp;Promise&lt;number&gt; | 获取应用程序进入挂起状态前的剩余时间。<br/>其任务执行结果以Promise形式返回给应用。 |
| function&nbsp;cancelSuspendDelay(requestId:&nbsp;number):&nbsp;void; | 取消延迟挂起。(requestId从requestSuspendDelay的返回值获取) | | cancelSuspendDelay(requestId:&nbsp;number):&nbsp;void | 取消延迟挂起。 |
**表2** DelaySuspendInfo包含参数
| 参数名 | 类型 | 是否必选 | 描述 |
| -------- | -------- | -------- | -------- |
| requestId | number | 是 | 延迟挂起的请求ID。 |
| actualDelayTime | number | 是 | 应用的实际挂起延迟时间,以毫秒为单位。 |
### 开发步骤
## 开发步骤
1. 申请延迟挂起 1. 申请延迟挂起
...@@ -65,7 +53,7 @@ import backgroundTaskManager from '@ohos.backgroundTaskManager'; ...@@ -65,7 +53,7 @@ import backgroundTaskManager from '@ohos.backgroundTaskManager';
``` ```
## 开发实例 ### 开发实例
```js ```js
import backgroundTaskManager from '@ohos.backgroundTaskManager'; import backgroundTaskManager from '@ohos.backgroundTaskManager';
...@@ -99,17 +87,19 @@ backgroundTaskManager.cancelSuspendDelay(id); ...@@ -99,17 +87,19 @@ backgroundTaskManager.cancelSuspendDelay(id);
ohos.permission.KEEP_BACKGROUND_RUNNING ohos.permission.KEEP_BACKGROUND_RUNNING
**表3** 长时任务主要接口 ### 接口说明
**表2** 长时任务主要接口
| 接口名 | 描述 | | 接口名 | 描述 |
| -------- | -------- | | -------- | -------- |
| function startBackgroundRunning(context: Context, bgMode: BackgroundMode, wantAgent: WantAgent, callback: AsyncCallback&lt;void&gt;): void;<br/>function startBackgroundRunning(context: Context, bgMode: BackgroundMode, wantAgent: WantAgent): Promise&lt;void&gt;; | 服务启动后,向系统申请长时任务,使服务一直保持后台运行 | | startBackgroundRunning(context: Context, bgMode: BackgroundMode, wantAgent: WantAgent): Promise&lt;void&gt; | 服务启动后,向系统申请长时任务,使服务一直保持后台运行。 |
| function stopBackgroundRunning(context: Context, callback: AsyncCallback&lt;void&gt;): void;<br/>function stopBackgroundRunning(context: Context): Promise&lt;void&gt;; | 停止后台长时任务的运行 | | stopBackgroundRunning(context: Context): Promise&lt;void&gt; | 停止后台长时任务的运行。 |
其中,wantAgent的信息详见([WantAgent](../reference/apis/js-apis-wantAgent.md) 其中,wantAgent的信息详见([WantAgent](../reference/apis/js-apis-wantAgent.md)
**表4** 后台模式类型 **表3** 后台模式类型
| 参数名 | id值 | 描述 | 配置项 | | 参数名 | id值 | 描述 | 配置项 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
...@@ -124,39 +114,30 @@ ohos.permission.KEEP_BACKGROUND_RUNNING ...@@ -124,39 +114,30 @@ ohos.permission.KEEP_BACKGROUND_RUNNING
| TASK_KEEPING | 9 | 计算任务(仅供特定设备使用) | taskKeeping | | TASK_KEEPING | 9 | 计算任务(仅供特定设备使用) | taskKeeping |
## 开发步骤 ### 开发步骤
1. 新建Api Version 8的工程后,在工程目录中右键选择“new” -> “Ability” -> “Service Ability” 快速创建Service Ability组件。并在config.json文件中配置长时任务权限、后台模式类型,其中Ability类型为“service”。 1. 新建Api Version 8的工程后,在工程目录中右键选择“new” -> “Ability” -> “Service Ability” 快速创建Service Ability组件。并在config.json文件中配置长时任务权限、后台模式类型,其中Ability类型为“service”。
``` ```
"module": { "module": {
"package": "com.example.myapplication", "package": "com.example.myapplication",
"abilities": [ "abilities": [
{ {
"backgroundModes": [ "backgroundModes": [
"dataTransfer", "dataTransfer",
"location", "location"
], // 后台模式类型
], "type": "service" // ability类型为service
"type": "service"
}
],
"defPermissions": [
{
"name": "ohos.permission.KEEP_BACKGROUND_RUNNING"
} }
], ],
"reqPermissions": [ "reqPermissions": [
{ {
"name": "ohos.permission.KEEP_BACKGROUND_RUNNING" "name": "ohos.permission.KEEP_BACKGROUND_RUNNING" // 长时任务权限
} }
] ]
} }
``` ```
2. 申请长时任务 2. 申请长时任务
```js ```js
...@@ -201,13 +182,11 @@ ohos.permission.KEEP_BACKGROUND_RUNNING ...@@ -201,13 +182,11 @@ ohos.permission.KEEP_BACKGROUND_RUNNING
``` ```
## 开发实例 ### 开发实例
基于FA的Service Ability使用,参考[ServiceAbility开发指导](../ability/fa-serviceability.md) 基于FA的Service Ability使用,参考[ServiceAbility开发指导](../ability/fa-serviceability.md)
当不需要与后台执行的长时任务交互时,可以采用startAbility()方法启动Service Ability。并在Service Ability的onStart回调方法中,调用长时任务的申请接口,声明此服务需要在后台长时运行。当任务执行完,再调用长时任务取消接口,及时释放资源。 当不需要与后台执行的长时任务交互时,可以采用startAbility()方法启动Service Ability。并在Service Ability的onStart回调方法中,调用长时任务的申请接口,声明此服务需要在后台长时运行。当任务执行完,再调用长时任务取消接口,及时释放资源。
当服务启动后,在serviceAbility的onStart回调方法中,调用长时任务的申请接口,声明此服务需要在后台长时运行。在onStop回调方法里,调用长时任务取消接口,声明取消长时任务。
当需要与后台执行的长时任务交互时(如播放音乐等)。可以采用connectAbility()方法启动并连接Service Ability。在获取到服务的代理对象后,与服务进行通信,控制长时任务的申请和取消。 当需要与后台执行的长时任务交互时(如播放音乐等)。可以采用connectAbility()方法启动并连接Service Ability。在获取到服务的代理对象后,与服务进行通信,控制长时任务的申请和取消。
```js ```js
...@@ -289,7 +268,6 @@ export default { ...@@ -289,7 +268,6 @@ export default {
}, },
onStop() { onStop() {
console.info('ServiceAbility onStop'); console.info('ServiceAbility onStop');
stopBackgroundRunning();
}, },
onConnect(want) { onConnect(want) {
console.info('ServiceAbility onConnect'); console.info('ServiceAbility onConnect');
...@@ -305,4 +283,10 @@ export default { ...@@ -305,4 +283,10 @@ export default {
console.info('ServiceAbility onCommand'); console.info('ServiceAbility onCommand');
} }
}; };
``` ```
\ No newline at end of file
## 相关实例
基于后台任务管理,有以下相关实例可供参考:
- [`BackgroundTaskManager`:后台任务管理(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ResourcesSchedule/BackgroundTaskManager)
\ No newline at end of file
...@@ -10,13 +10,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -10,13 +10,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | -------------------------- |
| ohos.intl | constructor()<sup>8+</sup> | 实例化Locale对象。 | | ohos.intl | constructor()<sup>8+</sup> | 实例化Locale对象。 |
| ohos.intl | constructor(locale:&nbsp;string,&nbsp;options?:&nbsp;LocaleOptions) | 基于locale参数及其选项实例化Locale对象。 | | ohos.intl | constructor(locale:&nbsp;string,&nbsp;options?:&nbsp;LocaleOptions) | 基于locale参数及其选项实例化Locale对象。 |
| ohos.intl | toString():&nbsp;string | 将Locale信息转换为字符串。 | | ohos.intl | toString():&nbsp;string | 将Locale信息转换为字符串。 |
| ohos.intl | maximize():&nbsp;Locale | 最大化区域信息。 | | ohos.intl | maximize():&nbsp;Locale | 最大化区域信息。 |
| ohos.intl | minimize():&nbsp;Locale | 最小化区域信息。 | | ohos.intl | minimize():&nbsp;Locale | 最小化区域信息。 |
### 开发步骤 ### 开发步骤
...@@ -24,7 +24,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -24,7 +24,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化Locale对象 1. 实例化Locale对象
使用Locale的构造函数创建Locale对象,该方法接收一个表示Locale的字符串及可选的[属性](../reference/apis/js-apis-intl.md)列表(intl为导入的模块名)。 使用Locale的构造函数创建Locale对象,该方法接收一个表示Locale的字符串及可选的[属性](../reference/apis/js-apis-intl.md)列表(intl为导入的模块名)。
``` ```
var locale = "zh-CN"; var locale = "zh-CN";
var options = {caseFirst: false, calendar: "chinese", collation: pinyin}; var options = {caseFirst: false, calendar: "chinese", collation: pinyin};
...@@ -33,21 +33,21 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -33,21 +33,21 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
2. 获取Locale的字符串表示 2. 获取Locale的字符串表示
调用toString方法来获取Locale对象的字符串表示,其中包括了语言、区域及其他选项信息。 调用toString方法来获取Locale对象的字符串表示,其中包括了语言、区域及其他选项信息。
``` ```
var localeStr = localeObj.toString(); var localeStr = localeObj.toString();
``` ```
3. 最大化区域信息 3. 最大化区域信息
调用maximize方法来最大化区域信息,即当缺少脚本与地区信息时,对其进行补全。 调用maximize方法来最大化区域信息,即当缺少脚本与地区信息时,对其进行补全。
``` ```
var maximizedLocale = localeObj.maximize(); var maximizedLocale = localeObj.maximize();
``` ```
4. 最小化区域信息 4. 最小化区域信息
调用minimize方法来最小化区域信息,即当存在脚本与地区信息时,对其进行删除。 调用minimize方法来最小化区域信息,即当存在脚本与地区信息时,对其进行删除。
``` ```
var minimizedLocale = localeObj.minimize(); var minimizedLocale = localeObj.minimize();
``` ```
...@@ -60,13 +60,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -60,13 +60,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建日期时间格式化对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建日期时间格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;DateTimeOptions) | 创建日期时间格式化对象,并设置提供的Locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;DateTimeOptions) | 创建日期时间格式化对象,并设置提供的Locale和格式化相关属性。 |
| ohos.intl | format(date:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算日期时间的格式化表示。 | | ohos.intl | format(date:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算日期时间的格式化表示。 |
| ohos.intl | formatRange(startDate:&nbsp;Date,&nbsp;endDate:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算时间段的格式化表示。 | | ohos.intl | formatRange(startDate:&nbsp;Date,&nbsp;endDate:&nbsp;Date):&nbsp;string | 依据DateTimeFormat对象的Locale及其他格式化属性,计算时间段的格式化表示。 |
| ohos.intl | resolvedOptions():&nbsp;DateTimeOptions | 获取DateTimeFormat对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;DateTimeOptions | 获取DateTimeFormat对象的相关属性。 |
### 开发步骤 ### 开发步骤
...@@ -74,13 +74,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -74,13 +74,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化日期时间格式化对象 1. 实例化日期时间格式化对象
一种方法是使用DateTimeFormat提供的默认构造函数,通过访问系统语言和地区设置,获取系统默认Locale,并将其作为DateTimeFormat对象内部的Locale(intl为导入的模块名)。 一种方法是使用DateTimeFormat提供的默认构造函数,通过访问系统语言和地区设置,获取系统默认Locale,并将其作为DateTimeFormat对象内部的Locale(intl为导入的模块名)。
``` ```
var dateTimeFormat = new intl.DateTimeFormat(); var dateTimeFormat = new intl.DateTimeFormat();
``` ```
另一种方法是使用开发者提供的Locale和格式化参数来创建日期时间格式化对象。其中,格式化参数是可选的,完整的格式化参数列表见[DateTimeOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和格式化参数来创建日期时间格式化对象。其中,格式化参数是可选的,完整的格式化参数列表见[DateTimeOptions](../reference/apis/js-apis-intl.md)。
``` ```
var options = {dateStyle: "full", timeStyle: "full"}; var options = {dateStyle: "full", timeStyle: "full"};
var dateTimeFormat = new intl.DateTimeFormat("zh-CN", options); var dateTimeFormat = new intl.DateTimeFormat("zh-CN", options);
...@@ -88,7 +88,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -88,7 +88,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
2. 格式化日期时间 2. 格式化日期时间
使用DateTimeFormat的format方法对一个Date对象进行格式化,该方法会返回一个字符串作为格式化的结果。 使用DateTimeFormat的format方法对一个Date对象进行格式化,该方法会返回一个字符串作为格式化的结果。
``` ```
Date date = new Date(); Date date = new Date();
var formatResult = dateTimeFormat.format(date); var formatResult = dateTimeFormat.format(date);
...@@ -96,7 +96,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -96,7 +96,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
3. 格式化时间段 3. 格式化时间段
使用DateTimeFormat的formatRange方法对一个时间段进行格式化。该方法需要传入两个Date对象,分别表示时间段的起止时间,返回一个字符串作为格式化的结果。 使用DateTimeFormat的formatRange方法对一个时间段进行格式化。该方法需要传入两个Date对象,分别表示时间段的起止时间,返回一个字符串作为格式化的结果。
``` ```
Date startDate = new Date(); Date startDate = new Date();
Date endDate = new Date(); Date endDate = new Date();
...@@ -105,7 +105,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -105,7 +105,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
4. 访问日期时间格式化对象的相关属性 4. 访问日期时间格式化对象的相关属性
DateTimeFormat的resolvedOptions方法会返回一个对象,该对象包含了DateTimeFormat对象的所有相关属性及其值。 DateTimeFormat的resolvedOptions方法会返回一个对象,该对象包含了DateTimeFormat对象的所有相关属性及其值。
``` ```
var options = dateTimeFormat.resolvedOptions(); var options = dateTimeFormat.resolvedOptions();
``` ```
...@@ -118,12 +118,12 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -118,12 +118,12 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| ohos.intl | constructor()<SUP>8+</SUP> | 创建数字格式化对象。 | | ohos.intl | constructor()<SUP>8+</SUP> | 创建数字格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;NumberOptions) | 创建数字格式化对象,并设置提供的locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;NumberOptions) | 创建数字格式化对象,并设置提供的locale和格式化相关属性。 |
| ohos.intl | format(number:&nbsp;number):&nbsp;string | 依据NumberFormat对象的Locale及其他格式化属性,计算数字的格式化表示。 | | ohos.intl | format(number:&nbsp;number):&nbsp;string | 依据NumberFormat对象的Locale及其他格式化属性,计算数字的格式化表示。 |
| ohos.intl | resolvedOptions():&nbsp;NumberOptions | 获取NumberFormat对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;NumberOptions | 获取NumberFormat对象的相关属性。 |
### 开发步骤 ### 开发步骤
...@@ -131,13 +131,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -131,13 +131,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化数字格式化对象 1. 实例化数字格式化对象
一种方法是使用NumberFormat提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。 一种方法是使用NumberFormat提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。
``` ```
var numberFormat = new intl.NumberFormat(); var numberFormat = new intl.NumberFormat();
``` ```
另一种方法是使用开发者提供的Locale和格式化参数来创建数字格式化对象。其中,格式化参数是可选的,完整的格式化参数列表参见[NumberOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和格式化参数来创建数字格式化对象。其中,格式化参数是可选的,完整的格式化参数列表参见[NumberOptions](../reference/apis/js-apis-intl.md)。
``` ```
var options = {compactDisplay: "short", notation: "compact"}; var options = {compactDisplay: "short", notation: "compact"};
var numberFormat = new intl.NumberFormat("zh-CN", options); var numberFormat = new intl.NumberFormat("zh-CN", options);
...@@ -145,7 +145,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -145,7 +145,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
2. 数字格式化 2. 数字格式化
使用NumberFormat的format方法对传入的数字进行格式化。该方法返回一个字符串作为格式化的结果。 使用NumberFormat的format方法对传入的数字进行格式化。该方法返回一个字符串作为格式化的结果。
``` ```
var number = 1234.5678 var number = 1234.5678
var formatResult = numberFormat.format(number); var formatResult = numberFormat.format(number);
...@@ -153,7 +153,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -153,7 +153,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
3. 访问数字格式化对象的相关属性 3. 访问数字格式化对象的相关属性
NumberFormat的resolvedOptions方法会返回一个对象,该对象包含了NumberFormat对象的所有相关属性及其值。 NumberFormat的resolvedOptions方法会返回一个对象,该对象包含了NumberFormat对象的所有相关属性及其值。
``` ```
var options = numberFormat.resolvedOptions(); var options = numberFormat.resolvedOptions();
``` ```
...@@ -166,12 +166,12 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -166,12 +166,12 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ------------------------------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建排序对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建排序对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;CollatorOptions)<sup>8+</sup> | 创建排序对象,并设置提供的locale和其他相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;CollatorOptions)<sup>8+</sup> | 创建排序对象,并设置提供的locale和其他相关属性。 |
| ohos.intl | compare(first:&nbsp;string,&nbsp;second:&nbsp;string):&nbsp;number<sup>8+</sup> | 依据排序对象的Locale及其属性,计算两个字符串的比较结果。 | | ohos.intl | compare(first:&nbsp;string,&nbsp;second:&nbsp;string):&nbsp;number<sup>8+</sup> | 依据排序对象的Locale及其属性,计算两个字符串的比较结果。 |
| ohos.intl | resolvedOptions():&nbsp;CollatorOptions<sup>8+</sup> | 获取排序对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;CollatorOptions<sup>8+</sup> | 获取排序对象的相关属性。 |
### 开发步骤 ### 开发步骤
...@@ -179,20 +179,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -179,20 +179,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化排序对象 1. 实例化排序对象
一种方法是使用Collator提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。 一种方法是使用Collator提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。
``` ```
var collator = new intl.Collator(); var collator = new intl.Collator();
``` ```
另一种方法是使用开发者提供的Locale和其他相关参数来创建Collator对象,完整的参数列表参见[CollatorOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和其他相关参数来创建Collator对象,完整的参数列表参见[CollatorOptions](../reference/apis/js-apis-intl.md)。
``` ```
var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"}; var collator= new intl.Collator("zh-CN", {localeMatcher: "best fit", usage: "sort"};
``` ```
2. 比较字符串 2. 比较字符串
使用Collator的compare方法对传入的两个字符串进行比较。该方法返回一个数值作为比较的结果,返回-1表示第一个字符串小于第二个字符串,返回1表示第一个字符大于第二个字符串,返回0表示两个字符串相同。 使用Collator的compare方法对传入的两个字符串进行比较。该方法返回一个数值作为比较的结果,返回-1表示第一个字符串小于第二个字符串,返回1表示第一个字符大于第二个字符串,返回0表示两个字符串相同。
``` ```
var str1 = "first string"; var str1 = "first string";
var str2 = "second string"; var str2 = "second string";
...@@ -201,7 +201,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -201,7 +201,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
3. 访问排序对象的相关属性 3. 访问排序对象的相关属性
Collator的resolvedOptions方法会返回一个对象,该对象包含了Collator对象的所有相关属性及其值。 Collator的resolvedOptions方法会返回一个对象,该对象包含了Collator对象的所有相关属性及其值。
``` ```
var options = collator.resolvedOptions(); var options = collator.resolvedOptions();
``` ```
...@@ -214,10 +214,10 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -214,10 +214,10 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建单复数对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建单复数对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;PluralRulesOptions)<sup>8+</sup> | 创建单复数对象,并设置提供的locale和其他相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;PluralRulesOptions)<sup>8+</sup> | 创建单复数对象,并设置提供的locale和其他相关属性。 |
| ohos.intl | select(n:&nbsp;number):&nbsp;string<sup>8+</sup> | 依据单复数对象的Locale及其他格式化属性,计算数字的单复数类别。 | | ohos.intl | select(n:&nbsp;number):&nbsp;string<sup>8+</sup> | 依据单复数对象的Locale及其他格式化属性,计算数字的单复数类别。 |
...@@ -226,20 +226,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -226,20 +226,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化单复数对象 1. 实例化单复数对象
一种方法是使用PluralRules提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。 一种方法是使用PluralRules提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。
``` ```
var pluralRules = new intl.PluralRules(); var pluralRules = new intl.PluralRules();
``` ```
另一种方法是使用开发者提供的Locale和其他相关参数来创建单复数对象,完整的参数列表参见[PluralRulesOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和其他相关参数来创建单复数对象,完整的参数列表参见[PluralRulesOptions](../reference/apis/js-apis-intl.md)。
``` ```
var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"}; var plurals = new intl.PluralRules("zh-CN", {localeMatcher: "best fit", type: "cardinal"};
``` ```
2. 计算数字单复数类别 2. 计算数字单复数类别
使用PluralRules的select方法计算传入数字的单复数类别。该方法返回一个字符串作为传入数字的类别,包括:"zero", "one", "two", "few", "many", "other"六个类别。 使用PluralRules的select方法计算传入数字的单复数类别。该方法返回一个字符串作为传入数字的类别,包括:"zero", "one", "two", "few", "many", "other"六个类别。
``` ```
var number = 1234.5678 var number = 1234.5678
var categoryResult = plurals.select(number); var categoryResult = plurals.select(number);
...@@ -253,13 +253,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -253,13 +253,13 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
### 接口说明 ### 接口说明
| 模块 | 接口名称 | 描述 | | 模块 | 接口名称 | 描述 |
| -------- | -------- | -------- | | --------- | ---------------------------------------- | ---------------------------------------- |
| ohos.intl | constructor()<sup>8+</sup> | 创建相对时间格式化对象。 | | ohos.intl | constructor()<sup>8+</sup> | 创建相对时间格式化对象。 |
| ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;RelativeTimeFormatInputOptions)<sup>8+</sup> | 创建相对时间格式化对象,并设置提供的locale和格式化相关属性。 | | ohos.intl | constructor(locale:&nbsp;string&nbsp;\|&nbsp;Array&lt;string&gt;,&nbsp;options?:&nbsp;RelativeTimeFormatInputOptions)<sup>8+</sup> | 创建相对时间格式化对象,并设置提供的locale和格式化相关属性。 |
| ohos.intl | format(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;string<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性,计算相对时间的格式化表示。 | | ohos.intl | format(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;string<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性,计算相对时间的格式化表示。 |
| ohos.intl | formatToParts(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;Array&lt;object&gt;<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性,返回相对时间格式化表示的各个部分。 | | ohos.intl | formatToParts(value:&nbsp;number,&nbsp;unit:&nbsp;string):&nbsp;Array&lt;object&gt;<sup>8+</sup> | 依据相对时间格式化对象的Locale及其他格式化属性,返回相对时间格式化表示的各个部分。 |
| ohos.intl | resolvedOptions():&nbsp;RelativeTimeFormatResolvedOptions<sup>8+</sup> | 获取相对时间格式化对象的相关属性。 | | ohos.intl | resolvedOptions():&nbsp;RelativeTimeFormatResolvedOptions<sup>8+</sup> | 获取相对时间格式化对象的相关属性。 |
### 开发步骤 ### 开发步骤
...@@ -267,20 +267,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -267,20 +267,20 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
1. 实例化相对时间格式化对象 1. 实例化相对时间格式化对象
一种方法是使用RelativeTimeFormat提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。 一种方法是使用RelativeTimeFormat提供的默认构造函数,通过访问系统的语言和地区以获取系统默认Locale并进行设置(intl为导入的模块名)。
``` ```
var relativeTimeFormat = new intl.RelativeTimeFormat(); var relativeTimeFormat = new intl.RelativeTimeFormat();
``` ```
另一种方法是使用开发者提供的Locale和格式化参数来创建相对时间格式化对象。其中,格式化参数是可选的,完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。 另一种方法是使用开发者提供的Locale和格式化参数来创建相对时间格式化对象。其中,格式化参数是可选的,完整的参数列表参见[ RelativeTimeFormatInputOptions](../reference/apis/js-apis-intl.md)。
``` ```
var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"}; var relativeTimeFormat = new intl.RelativeTimeFormat("zh-CN", {numeric: "always", style: "long"};
``` ```
2. 相对时间格式化 2. 相对时间格式化
使用RelativeTimeFormat的format方法对相对时间进行格式化。方法接收一个表示相对时间长度的数值和表示单位的字符串,其中单位包括:"year", "quarter", "month", "week", "day", "hour", "minute", "second"。方法返回一个字符串作为格式化的结果。 使用RelativeTimeFormat的format方法对相对时间进行格式化。方法接收一个表示相对时间长度的数值和表示单位的字符串,其中单位包括:"year", "quarter", "month", "week", "day", "hour", "minute", "second"。方法返回一个字符串作为格式化的结果。
``` ```
var number = 2; var number = 2;
var unit = "year" var unit = "year"
...@@ -289,7 +289,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -289,7 +289,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
3. 获取相对时间格式化结果的各个部分 3. 获取相对时间格式化结果的各个部分
获取相对时间格式化结果的各个部分,从而自定义格式化结果。 获取相对时间格式化结果的各个部分,从而自定义格式化结果。
``` ```
var number = 2; var number = 2;
var unit = "year" var unit = "year"
...@@ -298,7 +298,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -298,7 +298,7 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
4. 访问相对时间格式化对象的相关属性 4. 访问相对时间格式化对象的相关属性
RelativeTimeFormat的resolvedOptions方法会返回一个对象,该对象包含了RelativeTimeFormat对象的所有相关属性及其值,完整的属性列表参见[ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md) RelativeTimeFormat的resolvedOptions方法会返回一个对象,该对象包含了RelativeTimeFormat对象的所有相关属性及其值,完整的属性列表参见[ RelativeTimeFormatResolvedOptions](../reference/apis/js-apis-intl.md)
``` ```
var options = numberFormat.resolvedOptions(); var options = numberFormat.resolvedOptions();
``` ```
...@@ -307,4 +307,4 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方 ...@@ -307,4 +307,4 @@ Intl开发指导提供了ECMA 402中定义的国际化能力接口的使用方
针对Intl开发,有以下相关实例可供参考: 针对Intl开发,有以下相关实例可供参考:
-[`International`:国际化(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/International) -[`International`:国际化(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/International)
\ No newline at end of file \ No newline at end of file
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
- 二级目录为资源目录 - 二级目录为资源目录
- 用于存放字符串、颜色、浮点数等基础元素,以及媒体等资源文件。 - 用于存放字符串、颜色、浮点数等基础元素,以及媒体等资源文件。
- 当前支持的文件和资源类型如下: - 当前支持的文件和资源类型如下:
| 文件名 | 资源类型 | | 文件名 | 资源类型 |
| -------- | -------- | | ----------- | ------------ |
| color.json | 颜色资源。 | | color.json | 颜色资源。 |
| float.json | 间距、圆角、字体等资源。 | | float.json | 间距、圆角、字体等资源。 |
| string.json | 字符串资源。 | | string.json | 字符串资源。 |
| plural.json | 字符串资源。 | | plural.json | 字符串资源。 |
| media目录 | 图片资源。 | | media目录 | 图片资源。 |
## 资源引用 ## 资源引用
...@@ -168,4 +168,4 @@ Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片 ...@@ -168,4 +168,4 @@ Image($rawfile('newDir/newTest.png')) //rawfile$r引用rawfile目录下图片
针对访问应用资源,有以下相关实例可供参考: 针对访问应用资源,有以下相关实例可供参考:
- [`ResourceManager`:资源管理器(eTS)(API7](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager) - [`ResourceManager`:资源管理器(eTS)(API8](https://gitee.com/openharmony/app_samples/tree/master/common/ResourceManager)
...@@ -570,9 +570,9 @@ transform可以设置多个值并且多个值可同时设置,下面案例中 ...@@ -570,9 +570,9 @@ transform可以设置多个值并且多个值可同时设置,下面案例中
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 当设置多个transform时,后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法,例:transform: scale(1) rotate(0) translate(0,0)。 > - 当设置多个transform时,后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法,例:transform: scale(1) rotate(0) translate(0,0)。
> >
> - transform进行复合写法时,变化样式内多个样式值顺序的不同会呈现不一样的动画效果。 > - transform进行复合写法时,变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
> >
> - transform属性设置的样式值要一一对应,若前后不对应,则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。 > - transform属性设置的样式值要一一对应,若前后不对应,则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。
...@@ -580,11 +580,11 @@ transform可以设置多个值并且多个值可同时设置,下面案例中 ...@@ -580,11 +580,11 @@ transform可以设置多个值并且多个值可同时设置,下面案例中
针对transform样式动画开发,有以下相关实例可供参考: 针对transform样式动画开发,有以下相关实例可供参考:
- [`JsAnimation`:动效示例应用(JS)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation) - [`JsAnimation`:动效示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimation)
- [`JsAnimationStyle`:动画与自定义字体(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle) - [`JsAnimationStyle`:动画与自定义字体(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAnimationStyle)
- [`Clock`:时钟(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/common/Clock) - [`Clock`:时钟(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/common/Clock)
- [动画样式(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo) - [动画样式(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/AnimationDemo)
......
...@@ -25,19 +25,21 @@ ...@@ -25,19 +25,21 @@
针对组件开发,有以下相关实例可供参考: 针对组件开发,有以下相关实例可供参考:
- [`JsPanel`:内容展示面板(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel) - [`JsPanel`:内容展示面板(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsPanel)
- [`Popup`:气泡(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup) - [`Popup`:气泡(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Popup)
- [`RefreshContainer`:下拉刷新容器(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer) - [`RefreshContainer`:下拉刷新容器(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/RefreshContainer)
- [`JSComponments`:Js组件(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments) - [`JSComponments`:Js组件(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JSComponments)
- [`JsUserRegistration`:用户注册(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration) - [`JsUserRegistration`:用户注册(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsUserRegistration)
- [`ECG`:心率检测(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/common/ECG) - [`ECG`:心率检测(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/common/ECG)
- [`Badge`:事件标记控件(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge) - [`Badge`:事件标记控件(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [`JsVideo`:视频播放(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/media/JsVideo)
- [rating(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication) - [rating(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/RatingApplication)
......
...@@ -89,4 +89,4 @@ export default { ...@@ -89,4 +89,4 @@ export default {
针对页面路由开发,有以下相关实例可供参考: 针对页面路由开发,有以下相关实例可供参考:
- [`JsRouter`:页面路由(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter) - [`JsRouter`:页面路由(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
...@@ -314,4 +314,4 @@ export default { ...@@ -314,4 +314,4 @@ export default {
针对Tabs开发,有以下相关实例可供参考: 针对Tabs开发,有以下相关实例可供参考:
- [`Tabs`:页签容器(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs) - [`Tabs`:页签容器(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file \ No newline at end of file
...@@ -144,4 +144,4 @@ export default { ...@@ -144,4 +144,4 @@ export default {
针对Canvas开发,有以下相关实例可供参考: 针对Canvas开发,有以下相关实例可供参考:
- [`JsCanvas`:画布组件(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas) - [`JsCanvas`:画布组件(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsCanvas)
...@@ -300,9 +300,9 @@ export default { ...@@ -300,9 +300,9 @@ export default {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - options只支持柱状图和线形图设置参数,量规图不生效。 > - options只支持柱状图和线形图设置参数,量规图不生效。
> >
> - datasets只支持柱状图和线形图设置数据集合,量规图不生效。 > - datasets只支持柱状图和线形图设置数据集合,量规图不生效。
> >
> - series只有线形图支持。 > - series只有线形图支持。
...@@ -619,6 +619,6 @@ export default { ...@@ -619,6 +619,6 @@ export default {
针对Chart开发,有以下相关实例可供参考: 针对Chart开发,有以下相关实例可供参考:
- [`Chart`:图表组件(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/chart) - [`Chart`:图表组件(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
- [chart(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication) - [chart(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SwitchApplication)
...@@ -147,9 +147,9 @@ export default { ...@@ -147,9 +147,9 @@ export default {
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 仅支持单个子组件。 > - 仅支持单个子组件。
> >
> - Dialog属性、样式均不支持动态更新。 > - Dialog属性、样式均不支持动态更新。
> >
> - Dialog组件不支持focusable、click-effect属性。 > - Dialog组件不支持focusable、click-effect属性。
...@@ -325,6 +325,6 @@ export default { ...@@ -325,6 +325,6 @@ export default {
针对Dialog开发,有以下相关实例可供参考: 针对Dialog开发,有以下相关实例可供参考:
- [`JsDialog`:页面弹窗(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog) - [`JsDialog`:页面弹窗(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
- [dialog(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo) - [dialog(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/DialogDemo)
...@@ -248,4 +248,4 @@ export default { ...@@ -248,4 +248,4 @@ export default {
针对Grid开发,有以下相关实例可供参考: 针对Grid开发,有以下相关实例可供参考:
- [`JsGrid`:栅格组件(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid) - [`JsGrid`:栅格组件(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGrid)
...@@ -314,4 +314,4 @@ export default { ...@@ -314,4 +314,4 @@ export default {
针对List开发,有以下相关实例可供参考: 针对List开发,有以下相关实例可供参考:
- [`JsList`:商品列表(JS)(API7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList) - [`JsList`:商品列表(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file \ No newline at end of file
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - Menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。 > - Menu仅支持[option](../reference/arkui-js/js-components-basic-option.md)子组件。
> >
> - Menu组件不支持focusable、disabled属性。 > - Menu组件不支持focusable、disabled属性。
...@@ -283,4 +283,4 @@ export default { ...@@ -283,4 +283,4 @@ export default {
针对Menu开发,有以下相关实例可供参考: 针对Menu开发,有以下相关实例可供参考:
- [`JSMenu`:菜单(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu) - [`JSMenu`:菜单(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JSMenu)
...@@ -301,4 +301,4 @@ export default { ...@@ -301,4 +301,4 @@ export default {
针对Picker开发,有以下相关实例可供参考: 针对Picker开发,有以下相关实例可供参考:
- [`Picker`:滑动选择器(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker) - [`Picker`:滑动选择器(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Picker)
...@@ -217,6 +217,6 @@ export default{ ...@@ -217,6 +217,6 @@ export default{
针对Slider开发,有以下相关实例可供参考: 针对Slider开发,有以下相关实例可供参考:
- [`Slider`:滑动条(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider) - [`Slider`:滑动条(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Slider)
- [slider(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication) - [slider(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication)
\ No newline at end of file
...@@ -407,4 +407,4 @@ export default { ...@@ -407,4 +407,4 @@ export default {
针对Stepper开发,有以下相关实例可供参考: 针对Stepper开发,有以下相关实例可供参考:
- [`StepNavigator`:步骤导航器(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator) - [`StepNavigator`:步骤导航器(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
...@@ -6,7 +6,7 @@ Svg组件主要作为svg画布的根节点使用,也可以在svg中嵌套使 ...@@ -6,7 +6,7 @@ Svg组件主要作为svg画布的根节点使用,也可以在svg中嵌套使
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 从API version 7开始支持。 > - 从API version 7开始支持。
> >
> - svg父组件或者svg组件需要定义宽高值,否则不进行绘制。 > - svg父组件或者svg组件需要定义宽高值,否则不进行绘制。
...@@ -76,7 +76,7 @@ svg{ ...@@ -76,7 +76,7 @@ svg{
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - x和y设置的的是当前Svg的x轴和y轴坐标,如果当前Svg为根节点,x轴和y轴属性无效。 > - x和y设置的的是当前Svg的x轴和y轴坐标,如果当前Svg为根节点,x轴和y轴属性无效。
> >
> - viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。 > - viewBox的宽高和svg的宽高不一致,会以中心对齐进行缩放。
...@@ -84,4 +84,4 @@ svg{ ...@@ -84,4 +84,4 @@ svg{
针对Svg开发,有以下相关实例可供参考: 针对Svg开发,有以下相关实例可供参考:
- [`JsSvg`:可缩放矢量图形(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg) - [`JsSvg`:可缩放矢量图形(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JsSvg)
...@@ -117,9 +117,9 @@ text{ ...@@ -117,9 +117,9 @@ text{
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:** > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明:**
> - 设置indicator(是否启用导航点指示器)属性为true时digital(是否启用数字导航点)属性才会生效。 > - 设置indicator(是否启用导航点指示器)属性为true时digital(是否启用数字导航点)属性才会生效。
> >
> - Swiper子组件的个数大于等于2时设置的loop属性才会生效。 > - Swiper子组件的个数大于等于2时设置的loop属性才会生效。
> >
> - scrolleffect属性仅在loop属性值为false时生效。 > - scrolleffect属性仅在loop属性值为false时生效。
...@@ -369,4 +369,4 @@ export default { ...@@ -369,4 +369,4 @@ export default {
针对Swiper开发,有以下相关实例可供参考: 针对Swiper开发,有以下相关实例可供参考:
- [`Swiper`:内容滑动容器(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper) - [`Swiper`:内容滑动容器(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
...@@ -235,4 +235,4 @@ export default { ...@@ -235,4 +235,4 @@ export default {
针对Toolbar开发,有以下相关实例可供参考: 针对Toolbar开发,有以下相关实例可供参考:
- [`Toolbar`:工具栏(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar) - [`Toolbar`:工具栏(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Toolbar)
...@@ -103,6 +103,6 @@ ...@@ -103,6 +103,6 @@
针对自定义组件开发,有以下相关实例可供参考: 针对自定义组件开发,有以下相关实例可供参考:
- [`JSUICustomComponent`:自定义组件(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/JSUICustomComponent) - [`JSUICustomComponent`:自定义组件(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/JSUICustomComponent)
- [自定义组件(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponet) - [自定义组件(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/JSCanvasComponet)
...@@ -34,13 +34,13 @@ ...@@ -34,13 +34,13 @@
基于JS扩展的类Web开发范式的方舟开发框架,有以下相关实例可供参考: 基于JS扩展的类Web开发范式的方舟开发框架,有以下相关实例可供参考:
- [`AtomicLayout`:原子布局(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/AtomicLayout) - [`AtomicLayout`:原子布局(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/AtomicLayout)
- [`JsFA`:FA示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsFA) - [`JsFA`:FA示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsFA)
- [`JsShopping`:购物示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsShopping) - [`JsShopping`:购物示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsShopping)
- [`Stack`:堆叠容器(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Stack) - [`Stack`:堆叠容器(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Stack)
- [`JsAdaptivePortalList`:多设备自适应的效率型首页(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalList) - [`JsAdaptivePortalList`:多设备自适应的效率型首页(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsAdaptivePortalList)
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
- [`JsGallery`:图库示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGallery) - [`JsGallery`:图库示例应用(JS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsGallery)
- [`AirQuality`:空气质量(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/common/AirQuality) - [`AirQuality`:空气质量(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/common/AirQuality)
- [`Badge`:事件标记控件(JS)(API7](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge) - [`Badge`:事件标记控件(JS)(API8](https://gitee.com/openharmony/app_samples/tree/master/UI/Badge)
- [购物应用(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingOpenHarmony) - [购物应用(JS)](https://gitee.com/openharmony/codelabs/tree/master/JSUI/ShoppingOpenHarmony)
...@@ -198,4 +198,4 @@ struct WebComponent { ...@@ -198,4 +198,4 @@ struct WebComponent {
针对Web开发,有以下相关实例可供参考: 针对Web开发,有以下相关实例可供参考:
- [`Web`:ArkUI-Web(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web) - [`Web`:Web(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Web)
\ No newline at end of file \ No newline at end of file
...@@ -531,6 +531,6 @@ ...@@ -531,6 +531,6 @@
针对创建简单视图,有以下示例工程可供参考: 针对创建简单视图,有以下示例工程可供参考:
- [eTSBuildCommonView](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BuildCommonView) - [`BuildCommonView`:创建简单视图(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BuildCommonView)
本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。 本示例为构建了简单页面展示食物番茄的图片和营养信息,主要为了展示简单页面的Stack布局和Flex布局。
...@@ -152,5 +152,5 @@ listener.on('change', onPortrait) ...@@ -152,5 +152,5 @@ listener.on('change', onPortrait)
针对媒体查询开发,有以下相关实例可供参考: 针对媒体查询开发,有以下相关实例可供参考:
- [`MediaQuery`:Ets媒体查询(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery) - [`MediaQuery`:媒体查询(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MediaQuery)
...@@ -63,13 +63,17 @@ ...@@ -63,13 +63,17 @@
- [`Canvas`:画布组件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Canvas) - [`Canvas`:画布组件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Canvas)
- [`Drag`:ArkUI-拖拽事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Drag) - [`Drag`:拖拽事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Drag)
- [`ArkUIAnimation`:Ets动画(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/ArkUIAnimation) - [`ArkUIAnimation`:动画(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/ArkUIAnimation)
- [`Xcomponent`:ArkUI-XComponent(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent) - [`Xcomponent`:XComponent(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/XComponent)
- [`MouseEvent`:ArkUI-鼠标事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MouseEvent) - [`MouseEvent`:鼠标事件(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/MouseEvent)
- [`Gallery`:组件集合(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/Gallery)
- [`BringApp`:拉起系统应用(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/BringApp)
- [极简声明式UI范式(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts) - [极简声明式UI范式(eTS)](https://gitee.com/openharmony/codelabs/tree/master/ETSUI/SimpleGalleryEts)
......
...@@ -267,6 +267,6 @@ ...@@ -267,6 +267,6 @@
针对页面布局与连接,有以下示例工程可供参考: 针对页面布局与连接,有以下示例工程可供参考:
- [eTSDefiningPageLayoutAndConnection](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection) - [`DefiningPageLayoutAndConnection`:页面布局和连接(eTS)(API8)](https://gitee.com/openharmony/app_samples/tree/master/ETSUI/DefiningPageLayoutAndConnection)
本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。 本示例构建了食物分类列表页面和食物详情页,向开发者展示了List布局、Grid布局以及页面路由的基本用法。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册