@@ -18,10 +18,10 @@ OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides
...
@@ -18,10 +18,10 @@ OpenHarmony provides a UI development framework, known as ArkUI. ArkUI provides
ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
ArkUI comes with two development paradigms: JavaScript-based web-like development paradigm (web-like development paradigm for short) and TypeScript-based declarative development paradigm (declarative development paradigm for short). You can choose whichever development paradigm that aligns with your practice.
| Declarative development paradigm | Extended TypeScript (eTS) | Data-driven | Applications involving technological sophistication and teamwork | Mobile application and system application developers |
For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
For DevEco Studio V2.2 Beta1 and later versions, both the traditional coding mode and the low-code mode are supported when the JS language is used for development.
# Getting Started with eTS in the Traditional Coding Approach
# Getting Started with eTS in the Traditional Coding Approach
>  **NOTE**<br/>To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
> **NOTE**<br/>To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
...
@@ -20,17 +20,18 @@
...
@@ -20,17 +20,18 @@
## eTS Project Files
## eTS Project Files
-**entry** : OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**src > main > ets** : a collection of eTS source code.
-**src > main > ets**: a collection of eTS source code.
-**src > main > ets > MainAbility** : entry to your application/service.
-**src > main > ets > MainAbility**: entry to your application/service.
-**src > main > ets > MainAbility > pages** : pages contained in **MainAbility**.
-**src > main > ets > MainAbility > pages**: pages contained in **MainAbility**.
-**src > main > ets > MainAbility > pages > index.ets**: the first page in the pages list, that is, the home page of your application.
-**src > main > resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**src > main > config.json** : module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file.
-**src > main > resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
-**build-profile.json5** : current module information and build configuration options, including **buildOption target**.
-**src > main > config.json**: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file.
-**hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5**: current module information and build configuration options, including **buildOption target**.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**hvigorfile.js** : application-level compilation and build task script.
-**build-profile.json5**: application-level configuration information, including the signature and product configuration.
-**hvigorfile.js**: application-level compilation and build task script.
## Building the First Page
## Building the First Page
...
@@ -63,7 +64,7 @@
...
@@ -63,7 +64,7 @@
2. Add a **<Button>** component.
2. Add a **<Button>** component.
On the default page, add a **<Button>** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
On the default page, add a **<Button>** component to respond to user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```ts
```ts
...
@@ -79,7 +80,7 @@
...
@@ -79,7 +80,7 @@
Text(this.message)
Text(this.message)
.fontSize(50)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontWeight(FontWeight.Bold)
// Add a button to accept user clicks.
// Add a button to respond to user clicks.
Button(){
Button(){
Text('Next')
Text('Next')
.fontSize(30)
.fontSize(30)
...
@@ -178,7 +179,7 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -178,7 +179,7 @@ You can implement page redirection through the page router, which finds the targ
Text(this.message)
Text(this.message)
.fontSize(50)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontWeight(FontWeight.Bold)
// Add a button to accept user clicks.
// Add a button to respond to user clicks.
Button(){
Button(){
Text('Next')
Text('Next')
.fontSize(30)
.fontSize(30)
...
@@ -264,4 +265,4 @@ You can implement page redirection through the page router, which finds the targ
...
@@ -264,4 +265,4 @@ You can implement page redirection through the page router, which finds the targ
Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
Congratulations! You have finished developing your OpenHarmony application in eTS in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
# Getting Started with JavaScript in the Low-Code Approach
# Getting Started with JavaScript in the Low-Code Approach
>  **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
> **NOTE**<br/>This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>
>
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
> For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
...
@@ -37,10 +37,11 @@ After the project synchronization is complete, a low-code directory structure is
...
@@ -37,10 +37,11 @@ After the project synchronization is complete, a low-code directory structure is
-**entry > src > main > js > MainAbility > pages > index > index.js** : defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
-**entry > src > main > js > MainAbility > pages > index > index.js**: defines logical relationships, such as data and events, used on low-code pages. For details, see [JavaScript](../ui/js-framework-syntax-js.md). If multiple low-code development pages are created, a page folder and the corresponding **.js** file will be created for each of these pages.
>  **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**.
>  **NOTE**<br/>To avoid build errors when using the low-code development page, make sure the directory where the corresponding **.js** file is located does not contain **.hml** or **.css** files. For example, in the preceding example, no **.hml** or **.css** file is allowed in **js** > **MainAbility** > **pages** > **index**.
>
>
-**entry > src > main > supervisual > MainAbility > pages > index > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
-**entry > src > main > supervisual > MainAbility > pages > index > index.visual**: stores the data model of the low-code development page. You can double-click the file to open the low-code development page. If multiple low-code development pages are created, a page folder and the corresponding **.visual** file will be created for each of these pages.
## Building the First Page
## Building the First Page
...
@@ -170,4 +171,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
...
@@ -170,4 +171,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
Congratulations! You have finished developing your OpenHarmony app in JavaScript in the low-code approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
# Getting Started with JavaScript in the Traditional Coding Approach
# Getting Started with JavaScript in the Traditional Coding Approach
>  **NOTE**<br/>For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
> **NOTE**<br/>For best possible results, use [DevEco Studio V3.0.0.900 Beta3](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta_openharmony) for your development.
>
## Creating a JavaScript Project
## Creating a JavaScript Project
...
@@ -19,7 +18,7 @@
...
@@ -19,7 +18,7 @@
## JavaScript Project Files
## JavaScript Project Files
-**entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**entry**: OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
-**src > main > js**: a collection of JS source code.
-**src > main > js**: a collection of JS source code.
-**src > main > js > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
...
@@ -51,7 +50,7 @@
...
@@ -51,7 +50,7 @@
2. Add a button and bind the **onclick** method to this button.
2. Add a button and bind the **onclick** method to this button.
On the default page, add an **<input>** component of the button type to accept user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
On the default page, add an **<input>** component of the button type to respond to user clicks and implement redirection to another page. The sample code in the **index.hml** file is shown below:
```html
```html
...
@@ -221,4 +220,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
...
@@ -221,4 +220,4 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md)
Congratulations! You have finished developing your OpenHarmony application in JavaScript in the traditional coding approach. To learn more about OpenHarmony, see [OpenHarmony Overview](../application-dev-guide.md).
@@ -53,7 +53,7 @@ Right-click the project directory and choose **Import Product Compatibility ID**
...
@@ -53,7 +53,7 @@ Right-click the project directory and choose **Import Product Compatibility ID**
The IDE automatically configures the associated capability set and required capability set based on the settings supported by the created project. You can modify the capability sets when necessary.
The IDE automatically configures the associated capability set and required capability set based on the settings supported by the created project. You can modify the capability sets when necessary.
You can add APIs to the associated capability set in the IDE by adding system capabilities. However, note that these APIs may not be supported on the device. Therefore, check whether these APIs are supported before using them.
You can add APIs to the associated capability set in the IDE by adding system capabilities. However, note that these APIs may not be supported on the device. Therefore, check whether these APIs are supported before using them.
Exercise caution when modifying the required capability set. Incorrect modifications may cause the application to unable to be distributed to the target device.
Exercise caution when modifying the required capability set. Incorrect modifications may result in the application being unable to be distributed to the target device.
```
```
/* syscap.json */
/* syscap.json */
...
@@ -91,7 +91,7 @@ Exercise caution when modifying the required capability set. Incorrect modificat
...
@@ -91,7 +91,7 @@ Exercise caution when modifying the required capability set. Incorrect modificat
### Single-Device Application Development
### Single-Device Application Development
By default, the association capability set and required system capability set of the application are the same as the supported system capability set of the device. Exercise caution when modifying the required capability set.
By default, the associated capability set and required system capability set of the application are the same as the supported system capability set of the device. Exercise caution when modifying the required capability set.
@@ -99,7 +99,7 @@ By default, the association capability set and required system capability set of
...
@@ -99,7 +99,7 @@ By default, the association capability set and required system capability set of
### Cross-Device Application Development
### Cross-Device Application Development
By default, the associated capability set of the application is the union of multiple devices' supported capability sets. The capability sets must be the intersection.
By default, the associated capability set of an application is the union of multiple devices' supported capability sets, while the required capability set is the intersection of the devices' supported capability sets.
### How Do SysCap Differences Arise Between Devices
### How Do SysCap Differences Arise Between Devices
The SysCap of devices varies according to the component combination defined by the product solution vendor. The following figure shows the overall process.
The device SysCaps in product solutions vary according to the component combination defined by the product solution vendor. The following figure shows the overall process.
@@ -172,8 +172,8 @@ The SysCap of devices varies according to the component combination defined by t
...
@@ -172,8 +172,8 @@ The SysCap of devices varies according to the component combination defined by t
5. The SysCap set is encoded to generate the PCID. You can import the PCID to the IDE and decode it into SysCap. During development, compatibility processing is performed to mitigate the SysCap differences of devices.
5. The SysCap set is encoded to generate the PCID. You can import the PCID to the IDE and decode it into SysCap. During development, compatibility processing is performed to mitigate the SysCap differences of devices.
6. System parameters deployed on devices contain the SysCap set. The system provides native interfaces and application interfaces for components and applications to check whether a SysCap set is available.
6. System parameters deployed on devices contain the SysCap set. The system provides native interfaces and application interfaces for components and applications to check whether a specific SysCap is available.
7. During application development, the SysCap required by the application is encoded into the Required Product Compatibility ID (RPCID) and written into the application installation package. During application installation, the package manager decodes the RPCID to obtain the SysCap required by the application and compares it with the SysCap of the device. If the SysCap required by the application is met, the application can be installed.
7. During application development, the SysCap required by the application is encoded into the Required Product Compatibility ID (RPCID) and written into the application installation package. During application installation, the package manager decodes the RPCID to obtain the SysCap required by the application and compares it with the SysCap of the device. If the SysCap required by the application is met, the application can be installed.
8. When an application is running, the **canIUse** API can be used to query whether the SysCap is compatible with the device.
8. When an application is running on a device, the **canIUse** API can be used to query whether the device is compatible with a specific SysCap.
>  **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> **NOTE**<br>The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
## Modules to Import
...
@@ -17,16 +16,16 @@ import request from '@ohos.request';
...
@@ -17,16 +16,16 @@ import request from '@ohos.request';
- HTTPS is supported by default. To support HTTP, you need to add **network** to the **config.json** file and set the **cleartextTraffic** attribute to **true**.
- HTTPS is supported by default. To support HTTP, you need to add **network** to the **config.json** file and set the **cleartextTraffic** attribute to **true**.
```
```
"deviceConfig": {
"deviceConfig": {
"default": {
"default": {
"network": {
"network": {
"cleartextTraffic": true
"cleartextTraffic": true
}
...
}
}
...
}
}
```
}
```
## Constants
## Constants
...
@@ -84,11 +83,13 @@ Uploads files. This API uses a promise to return the result.
...
@@ -84,11 +83,13 @@ Uploads files. This API uses a promise to return the result.
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| description | string | No | Description of the download session. |
| description | string | No | Description of the download session. |
| filePath<sup>7+</sup> | string | No | Download path. (The default path is [ERROR:Invalid link:en-us_topic_0000001135742582.xml#xref8132147102215,link:en-us_topic_0000001127125012.xml#section1856519365229](en-us_topic_0000001127125012.xml#section1856519365229)).<br/>- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.<br/>- filePath:'test.txt': Files are stored in the default path.<br/>- filePath:'workspace/': The **workspace** directory is created in the default path to store files. |
| filePath<sup>7+</sup> | string | No | Download path. (The default value is **'internal://cache/'**).<br/>- filePath:'workspace/test.txt': The **workspace** directory is created in the default path to store files.<br/>- filePath:'test.txt': Files are stored in the default path.<br/>- filePath:'workspace/': The **workspace** directory is created in the default path to store files. |
| networkType | number | No | Network type allowed for download. |
| networkType | number | No | Network type allowed for download. |
| title | string | No | Title of the download session. |
| title | string | No | Title of the download session. |
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
- Return value
| Name| Type| Mandatory| Description|
| Type| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- |
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
| defValue | string | Yes| Default value This parameter is user-defined. If it is not found in the database, the default value is returned.|
| defValue | string | Yes| Default value This parameter is user-defined. If it is not found in the database, the default value is returned.|
If the specified data item exists in the database, the **setValueSync** method updates the value of the data item. If the data item does not exist in the database, the **setValueSync** method inserts the data item into the database.
If the specified data item exists in the database, the **setValueSync** method updates the value of the data item. If the data item does not exist in the database, the **setValueSync** method inserts the data item into the database.
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
| name | string | Yes| Name of the target data item. Data items can be classified as follows:<br><ul><li>Existing data items in the database, for example:<br></li><ul><li>Brightness: 'settings.screen.brightness'<br></li><li>Time format: 'settings.time.format'<br></li></ul><li>Custom data items</li></ul>|
| value | string | Yes| Value of the data item.|
- Return value
**Return value**
| Type| Description|
| -------- | -------- |
| boolean | Result indicating whether the value is set successfully. Returns **true** if the value is set successfully; returns **false** otherwise.|
- Example
| Type| Description|
```typescript
| -------- | -------- |
| boolean | Result indicating whether the value is set successfully. Returns **true** if the value is set successfully; returns **false** otherwise.|
> - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - The initial APIs of this module are supported since API version 6. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> - This is a system API and cannot be called by third-party applications.
> - This is a system API and cannot be called by third-party applications.
...
@@ -24,7 +24,7 @@ Obtains the value of the attribute with the specified key.
...
@@ -24,7 +24,7 @@ Obtains the value of the attribute with the specified key.
| Name| Type| Mandatory| Description|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| key | string | Yes| Key of the system attribute.|
| key | string | Yes| Key of the system attribute.|
| def | string | No| Default Value|
| def | string | No| Default value.|
**Return value**
**Return value**
...
@@ -88,7 +88,7 @@ Obtains the value of the attribute with the specified key. This API uses an asyn
...
@@ -88,7 +88,7 @@ Obtains the value of the attribute with the specified key. This API uses an asyn
| Name| Type| Mandatory| Description|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| key | string | Yes| Key of the system attribute.|
| key | string | Yes| Key of the system attribute.|
| def | string | Yes| Default Value|
| def | string | Yes| Default value.|
| callback | AsyncCallback<string> | Yes| Callback used to return the result.|
| callback | AsyncCallback<string> | Yes| Callback used to return the result.|
**Example**
**Example**
...
@@ -121,7 +121,7 @@ Obtains the value of the attribute with the specified key. This API uses a promi
...
@@ -121,7 +121,7 @@ Obtains the value of the attribute with the specified key. This API uses a promi
| Name| Type| Mandatory| Description|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| key | string | Yes| Key of the system attribute.|
| key | string | Yes| Key of the system attribute.|
> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable.
> The initial APIs of this module are supported since API version 9. API version 9 is a canary version for trial use. The APIs of this version may be unstable.
...
@@ -100,7 +100,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return
...
@@ -100,7 +100,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This animation is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
...
@@ -18,21 +18,21 @@ When the universal attributes of a component change, you can create an **Animato
...
@@ -18,21 +18,21 @@ When the universal attributes of a component change, you can create an **Animato
- Curve enums
- Curve enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| Linear | The animation speed keeps unchanged. |
| Linear | The animation speed keeps unchanged. |
| Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
| Ease | The animation starts at a low speed and then accelerates. It slows down before the animation ends. The cubic-bezier curve (0.25, 0.1, 0.25, 1.0) is used. |
| EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseIn | The animation starts at a low speed. The cubic-bezier curve (0.42, 0.0, 1.0, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseOut | The animation ends at a low speed. The cubic-bezier curve (0.0, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| EaseInOut | The animation starts and ends at a low speed. The cubic-bezier curve (0.42, 0.0, 0.58, 1.0) is used. |
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| FastOutSlowIn | The animation uses the standard cubic-bezier curve (0.4, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| LinearOutSlowIn | The animation uses the deceleration cubic-bezier curve (0.0, 0.0, 0.2, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| FastOutLinearIn | The animation uses the acceleration cubic-bezier curve (0.4, 0.0, 1.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| ExtremeDeceleration | The animation uses the extreme deceleration cubic-bezier curve (0.0, 0.0, 0.0, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Sharp | The animation uses the sharp cubic-bezier curve (0.33, 0.0, 0.67, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Rhythm | The animation uses the rhythm cubic-bezier curve (0.7, 0.0, 0.2, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Smooth | The animation uses the smooth cubic-bezier curve (0.4, 0.0, 0.4, 1.0). |
| Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
| Friction | Damping curve. The cubic-bezier curve (0.2, 0.0, 0.2, 1.0) is used. |
| selectedColor | Color | - | Color of the selected check box.|
| selectedColor | Color | - | Color of the selected check box.|
## Events
## Events
| Name| Description|
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.<br>- **names**: names of all selected check boxes in the group.<br>- **status**: selection status.|
| onChange (callback: (names: Array<string>, status: SelectStatus) => void ) |Triggered when the selection status of the check box group or any check box wherein changes.<br>- **names**: names of all selected check boxes in the group.<br>- **status**: selection status.|
- SelectStatus enums
- SelectStatus enums
| Name | Description|
| Name | Description|
| ----- | -------------------- |
| ----- | -------------------- |
| All | All check boxes in the group are selected.|
| All | All check boxes in the group are selected.|
| Part | Some check boxes in the group are selected.|
| Part | Some check boxes in the group are selected.|
| values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
| values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
| max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br/>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. |
| max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br/>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
| menus | Array<NavigationMenuItem>\|[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Menu in the upper right corner of the page. |
| menus | Array<NavigationMenuItem>\|[CustomBuilder](../../ui/ts-types.md) | - | Menu in the upper right corner of the page. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
| titleMode | NavigationTitleMode | NavigationTitleMode.Free | Display mode of the page title bar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
| toolBar | {<br/>items:[<br/>Object<br/>] }<br/>\| [CustomBuilder](../../ui/ts-types.md) | - | Content of the toolbar.<br/>**items**: all items on the toolbar. |
| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. |
| hideToolBar | boolean | false | Whether to hide the toolbar.<br/>**true**: Hide the toolbar.<br/>**false**: Show the toolbar. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. |
| hideBackButton | boolean | false | Whether to hide the back button. |
- NavigationMenuItem attributes
- NavigationMenuItem attributes
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| value | string | Yes | - | Text of an option on the toolbar. |
| value | string | Yes | - | Text of an option on the toolbar. |
| icon | string | No | - | Icon path of an option on the toolbar. |
| icon | string | No | - | Icon path of an option on the toolbar. |
| action | () => void | No | - | Callback invoked when an option is selected. |
| action | () => void | No | - | Callback invoked when an option is selected. |
- NavigationTitleMode enums
- NavigationTitleMode enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. |
| Free | When the content is a scrollable component, the title shrinks as the content scrolls up (the subtitle fades out with its size remaining unchanged) and restores as the content scrolls down. |
| Mini | The mode is fixed at mini mode (icon + main title and subtitle). |
| Mini | The mode is fixed at mini mode (icon + main title and subtitle). |
| Full | The mode is fixed at full mode (main title and subtitle). |
| Full | The mode is fixed at full mode (main title and subtitle). |
| content | string | No | '' | Text content, which is the content of the child component **<Span>**. This parameter does not take effect when the child component **<Span>** is contained. |
| content | string | No| '' | Text content. This parameter does not take effect when the child component **\<Span>** is contained.|
## Attributes
## Attributes
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text. |
| textAlign | TextAlign | TextAlign.Start | Text alignment mode of multiple lines of text.|
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long. |
| textOverflow | {overflow: TextOverflow} | {overflow: TextOverflow.Clip} | Display mode when the text is too long.<br>**NOTE**<br>Text is truncated at the transition between words. To truncate text in the middle of a word, add **\u200B** between characters. |
| maxLines | number | Infinity | Maximum number of lines in the text. |
| maxLines | number | Infinity | Maximum number of lines in the text.|
| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used. |
| lineHeight | Length | - | Text line height. If the value is less than or equal to **0**, the line height is not limited and the font size is adaptive. If the value of the number type, the unit fp is used.|
| decoration | {<br/>type: TextDecorationType,<br/>color?: Color<br/>} | {<br/>type: TextDecorationType.None,<br/>color: Color.Black<br/>} | Style and color of the text decorative line. |
| decoration | {<br>type: TextDecorationType,<br>color?: Color<br>} | {<br>type: TextDecorationType.None,<br>color: Color.Black<br>} | Style and color of the text decorative line.|
| baselineOffset | Length | - | Offset of the text baseline. |
| baselineOffset | Length | - | Offset of the text baseline.|
| textCase | TextCase | TextCase.Normal | Text case. |
| textCase | TextCase | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | boolean\|CopyOption | false | Whether copy and paste is allowed.|
- TextAlign enums
- TextAlign enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| Center | The text is center-aligned.|
| Center | The text is center-aligned.|
| Start | The text is aligned with the direction in which the text is written.|
| Start | The text is aligned with the direction in which the text is written.|
| End | The text is aligned with the opposite direction in which the text is written.|
| End | The text is aligned with the opposite direction in which the text is written.|
- TextOverflow enums
- TextOverflow enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| Clip | Extra text is truncated.|
| Clip | Extra text is truncated.|
| Ellipsis | The ellipsis (...) is used for extra-long text. |
| Ellipsis | An ellipsis (...) is used to represent clipped text.|
| None | No truncation or ellipsis is used for extra-long text.|
| None | No truncation or ellipsis is used for extra-long text.|
- TextDecorationType enums
- TextDecorationType enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| Underline | An underline is used. |
| Underline | Line under the text.|
| LineThrough | A strikethrough is used. |
| LineThrough | Line through the text.|
| Overline | An overline is used. |
| Overline | Line over the text.|
| None | No decorative line is used. |
| None | No decorative lines.|
- TextCase enums
- TextCase enums
| Name | Description |
| Name | Description |
| --------- | -------------------- |
| Normal | The original case of the text is retained.|
| LowerCase | All letters in the text are in lowercase. |
| UpperCase | All letters in the text are in uppercase. |
- CopyOption<sup>9+</sup> enums
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| Normal | The original case of the text is retained. |
| InApp | Intra-application copy and paste is allowed.|
| LowerCase | All letters in the text are in lowercase. |
| LocalDevice | Intra-device copy and paste is allowed.|
| UpperCase | All letters in the text are in uppercase. |
| CrossDevice | Cross-device copy and paste is allowed.|
> The **<Text>** component cannot contain both the text and the child component **<Span>**. If both of them exist, only the content in **<Span>** is displayed.
> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
## Example
## Example
```ts
```
// xxx.ets
@Entry
@Entry
@Component
@Component
structTextExample1{
structTextExample1{
...
@@ -93,7 +102,7 @@ struct TextExample1 {
...
@@ -93,7 +102,7 @@ struct TextExample1 {
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.')
Text('This is the setting of textOverflow to Clip text content This is the setting of textOverflow to Clip text content.')
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **<Flex>** component, that is, the direction of the main axis. |
| direction | FlexDirection | No | FlexDirection.Row | Direction in which child components are arranged in the **\<Flex>** component, that is, the direction of the main axis. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **<Flex>** component has a single line or multiple lines. |
| wrap | FlexWrap | No | FlexWrap.NoWrap | Whether the **\<Flex>** component has a single line or multiple lines. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **<Flex>** component along the main axis. |
| justifyContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in the **\<Flex>** component along the main axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **<Flex>** component along the cross axis. |
| alignItems | [ItemAlign](ts-appendix-enums.md#itemalign-enums) | No | ItemAlign.Stretch | Alignment mode of the child components in the **\<Flex>** component along the cross axis. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
| alignContent | FlexAlign | No | FlexAlign.Start | Alignment mode of the child components in a multi-line **\<Flex>** component along the cross axis. This parameter is valid only when **wrap** is set to **Wrap** or **WrapReverse**. |
- FlexDirection enums
- FlexDirection enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| Row | The child components are arranged in the same direction as the main axis runs along the rows. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| RowReverse | The child components are arranged opposite to the **Row** direction. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| Column | The child components are arranged in the same direction as the main axis runs down the columns. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
| ColumnReverse | The child components are arranged opposite to the **Column** direction. |
- FlexWrap enums
- FlexWrap enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. |
| NoWrap | The child components in the **<Flex>** component are arranged in a single line, and they may overflow. |
| Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. |
| Wrap | The child components in the **<Flex>** component are arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. |
| WrapReverse | The child components in the **<Flex>** component are reversely arranged in multiple lines, and they may overflow. |
- FlexAlign enums
- FlexAlign enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| -------- | -------- |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
| Start | The child components are aligned with the start edge of the main axis. The first component is aligned with the main-start, and subsequent components are aligned with the previous one. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| Center | The child components are aligned in the center of the main axis. The space between the first component and the main-start is the same as that between the last component and the main-end. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| End | The child components are aligned with the end edge of the main axis. The last component is aligned with the main-end, and other components are aligned with the next one. |
| SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceBetween | The child components are evenly distributed along the main axis. The first component is aligned with the main-start, the last component is aligned with the main-end, and the remaining components are distributed so that the space between any two adjacent components is the same. |
| SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceAround | The child components are evenly distributed along the main axis, with a half-size space on either end. The space between any two adjacent components is the same. The space between the first component and main-start, and that between the last component and cross-main are both half the size of the space between two adjacent components. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
| SpaceEvenly | The child components are equally distributed along the main axis. The space between the first component and main-start, the space between the last component and main-end, and the space between two adjacent components are the same. |
| count | number | Yes | - | Number of steps. Must be a positive integer. |
| count | number | Yes | - | Number of steps. Must be a positive integer. |
| end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
| end | boolean | No | true | Step change at the start or end point of each interval. Defaults to **true**, indicating that the step change occurs at the end point. |
- Return values
- Return value
Curve object.
Curve object.
...
@@ -62,14 +63,15 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
...
@@ -62,14 +63,15 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
- Parameters
- Parameters
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
| x1 | number | Yes | Horizontal coordinate of the first point on the Bezier curve. |
| y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
| y1 | number | Yes | Vertical coordinate of the first point on the Bezier curve. |
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| x2 | number | Yes | Horizontal coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
| y2 | number | Yes | Vertical coordinate of the second point on the Bezier curve. |
- Return values
- Return value
Curve object.
Curve object.
...
@@ -82,20 +84,21 @@ Constructs a spring curve object.
...
@@ -82,20 +84,21 @@ Constructs a spring curve object.
- Parameters
- Parameters
| Name | Type | Mandatory | Description |
| Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- |
| -------- | -------- | -------- | -------- |
| velocity | number | Yes | Initial velocity. |
| velocity | number | Yes | Initial velocity. |
| mass | number | Yes | Mass. |
| mass | number | Yes | Mass. |
| stiffness | number | Yes | Stiffness. |
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
| damping | number | Yes | Damping. |
- Return values
- Return value
Curve object.
Curve object.
## Example
## Example
```
```
import Curves from '@ohos.curves'
import Curves from '@ohos.curves'
let curve1 = Curves.init() // Create a default linear interpolation curve.
let curve1 = Curves.init() // Create a default linear interpolation curve.
...
@@ -106,13 +109,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
...
@@ -106,13 +109,13 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
Curve objects can be created only by the preceding APIs.
Curve objects can be created only by the preceding APIs.
| API | Description |
| API | Description |
| -------- | -------- |
| -------- | -------- |
| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
| interpolate(time: number): number | Calculation function of the interpolation curve. Passing a normalized time parameter to this function returns the current interpolation.<br/>**time**: indicates the current normalized time. The value ranges from 0 to 1.<br/>The curve interpolation corresponding to the normalized time point is returned. |
- Example
- Example
```
```
import Curves from '@ohos.curves'
import Curves from '@ohos.curves'
let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
let curve = Curves.init(Curve.EaseIn) // Create an interpolation curve which is slow and then fast by default.
...
@@ -122,7 +125,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
...
@@ -122,7 +125,7 @@ let curve3 = Curves.cubicBezier(0.1, 0.0, 0.1, 1.0) // Create a third-order Bezi
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Video>** component provides a video player.
## Required Permissions
To use online videos, you need to add the **ohos.permission.INTERNET** permission to the corresponding **abilities** in the **config.json** or **module.json** file, whichever is appropriate.
The **<Video>** component provides a video player.
```
"abilities":[
{
...
"permissions": ["ohos.permission.INTERNET],
...
}
]
```
## Child Components
## Child Components
The **<Video>** component does not support any child component.
Not supported
## APIs
## APIs
...
@@ -18,47 +30,47 @@ The **<Video>** component does not support any child component.
...
@@ -18,47 +30,47 @@ The **<Video>** component does not support any child component.
Video(value: VideoOptions)
Video(value: VideoOptions)
- VideoOptions attributes
- VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| src | string | No | - | Path of the video source. |
| src | string \|[Resource](../../ui/ts-types.md) | No| - | Path of the video source, which can be a local path or a URL.<br>The video resources can be stored in the **video** or **rawfile** folder under **resources**.<br>The path can include a **dataability://** prefix, which is used to access the video path provided by a Data ability. For details about the path, see [Data Ability Development](../../ability/fa-dataability.md).|
| currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No | 1.0 \| PlaybackSpeed.Speed_Forward_1_00_X | Video playback speed.<br/>> **NOTE**<br/>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br/>> <br/>> |
| currentProgressRate | number \| PlaybackSpeed<sup>8+</sup> | No| 1.0 \| PlaybackSpeed.<br>Speed_Forward_1_00_X | Video playback speed.<br>> **NOTE**<br>> The value of the number type can only be **0.75**, **1.0**, **1.25**, **1.75**, or **2.0**.<br>|
| previewUri | string \| PixelMap<sup>8+</sup>\|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| previewUri | string \| PixelMap<sup>8+</sup>\|[Resource](../../ui/ts-types.md) | No| - | Path of the preview image.|
| loop | boolean | false | Whether a single video is played cyclically. |
| loop | boolean | false | Whether to repeat the video.|
## Events
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| -------- | -------- |
| onStart() => void | Triggered when the video is played.|
| onStart() => void | Triggered when the video is played.|
| onPause() => void | Triggered when the video playback is paused.|
| onPause() => void | Triggered when the video playback is paused.|
| onFinish() => void | Triggered when the video playback is finished.|
| onFinish() => void | Triggered when the video playback is finished.|
| onError() => void | Triggered when the video playback fails.|
| onError() => void | Triggered when the video playback fails.|
| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| onPrepared(event?: { duration: number }) => void | Triggered when video preparation is complete. The video duration (in seconds) is obtained from **duration**.|
| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged.|
| onSeeking(event?: { time: number }) => void | Triggered to report the time (in seconds) when the progress bar is being dragged.|
| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
| onSeeked(event?: { time: number }) => void | Triggered to report the playback time (in seconds) when the user finishes dragging the progress bar.|
| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
## VideoController
## VideoController
...
@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos.
...
@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos.
controller: VideoController = new VideoController();
controller: VideoController = new VideoController();
```
```
### start
### start
start(): void
start(): void
...
@@ -97,9 +110,9 @@ setCurrentTime(value: number)
...
@@ -97,9 +110,9 @@ setCurrentTime(value: number)
Sets the video playback position.
Sets the video playback position.
- Parameters
- Parameters
| Name | Type | Mandatory | Default Value | Description |
> Currently, the API can process only basic data and cannot modify a value in an object.
## Synchronization Between AppStorage and Components
## Synchronization Between AppStorage and Components
...
@@ -90,4 +87,4 @@ struct ComponentA {
...
@@ -90,4 +87,4 @@ struct ComponentA {
}
}
```
```
Each time the user clicks the Count button, the value of this.varA will increase by 1. This variable is synchronized with varA in the AppStorage. Each time the user clicks the language icon, the value of languageCode in the AppStorage will be changed, and the change will be synchronized to the this.lang variable.
Each time the user clicks the **Count** button, the value of **this.varA** will increase by 1. This variable is synchronized with varA in the AppStorage. Each time the user clicks the language icon, the value of **languageCode** in the AppStorage will be changed, and the change will be synchronized to the **this.lang** variable.
function startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task.
function startWork(work: WorkInfo): boolean; | Starts a Work Scheduler task.
function stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops a Work Scheduler task.
function stopWork(work: WorkInfo, needCancel?: boolean): boolean; | Stops a Work Scheduler task.
function getWorkStatus(workId: number, callback: AsyncCallback<WorkInfo>): void; | Obtains the status of a Work Scheduler task. This method uses an asynchronous callback to return the result.
function getWorkStatus(workId: number, callback: AsyncCallback<WorkInfo>): void;| Obtains the status of a Work Scheduler task. This method uses an asynchronous callback to return the result.
function getWorkStatus(workId: number): Promise<WorkInfo>; | Obtains the status of a Work Scheduler task. This method uses a promise to return the result.
function getWorkStatus(workId: number): Promise<WorkInfo>; | Obtains the status of a Work Scheduler task. This method uses a promise to return the result.
function obtainAllWorks(callback: AsyncCallback<void>): Array<WorkInfo>; | Obtains Work Scheduler tasks. This method uses an asynchronous callback to return the result.
function obtainAllWorks(callback: AsyncCallback<void>): Array<WorkInfo>;| Obtains Work Scheduler tasks. This method uses an asynchronous callback to return the result.
function obtainAllWorks(): Promise<Array<WorkInfo>>; | Obtains Work Scheduler tasks. This method uses a promise to return the result.
function obtainAllWorks(): Promise<Array<WorkInfo>>;| Obtains Work Scheduler tasks. This method uses a promise to return the result.
function stopAndClearWorks(): boolean; | Stops and clears Work Scheduler tasks.
function stopAndClearWorks(): boolean;| Stops and clears Work Scheduler tasks.
function isLastWorkTimeOut(workId: number, callback: AsyncCallback<void>): boolean; | Checks whether the last execution of the specified task has timed out. This method uses an asynchronous callback to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number, callback: AsyncCallback<void>): boolean;| Checks whether the last execution of the specified task has timed out. This method uses an asynchronous callback to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number): Promise<boolean>; | Checks whether the last execution of the specified task has timed out. This method uses a promise to return the result. It is applicable to repeated tasks.
function isLastWorkTimeOut(workId: number): Promise<boolean>;| Checks whether the last execution of the specified task has timed out. This method uses a promise to return the result. It is applicable to repeated tasks.
**Table 2** WorkInfo parameters
**Table 2** WorkInfo parameters
...
@@ -40,7 +40,7 @@ workId | Work ID. Mandatory.|number
...
@@ -40,7 +40,7 @@ workId | Work ID. Mandatory.|number
bundleName | Name of the Work Scheduler task bundle. Mandatory.|string
bundleName | Name of the Work Scheduler task bundle. Mandatory.|string
abilityName | Name of the component to be notified by a Work Scheduler callback.|string
abilityName | Name of the component to be notified by a Work Scheduler callback.|string
networkType | Network type.| NetworkType
networkType | Network type.| NetworkType
isCharging | Whether the device is charging.| bool
isCharging | Whether the device is charging.| boolean
chargerType | Charging type.| ChargingType
chargerType | Charging type.| ChargingType
batteryLevel | Battery level.| number
batteryLevel | Battery level.| number
batteryStatus| Battery status.| BatteryStatus
batteryStatus| Battery status.| BatteryStatus
...
@@ -61,7 +61,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
...
@@ -61,7 +61,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
**Implementing WorkSchedulerExtensionAbility**
**Implementing WorkSchedulerExtensionAbility**
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
import WorkSchedulerExtensionAbility from '@ohos.WorkSchedulerExtensionAbility';
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
export default class MyWorkSchedulerExtensionAbility extends WorkSchedulerExtensionAbility {
