@@ -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.
| Web-like development paradigm | JavaScript | Data-driven | Applications and service widgets with simple UIs | Frontend web developers |
| 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.
# 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.
...
...
@@ -20,17 +20,18 @@
## eTS Project Files
-**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 > MainAbility** : entry to your application/service.
-**src > main > ets > MainAbility > pages** : pages contained in **MainAbility**.
-**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.
-**build-profile.json5** : current module information and build configuration options, including **buildOption target**.
-**hvigorfile.js** : module-level compilation and build task script. You can customize related tasks and code implementation.
-**build-profile.json5** : application-level configuration information, including the signature and product configuration.
-**hvigorfile.js** : application-level compilation and build task script.
-**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 > MainAbility**: entry to your application/service.
-**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.
-**build-profile.json5**: current module information and build configuration options, including **buildOption target**.
-**hvigorfile.js**: module-level compilation and build task script. You can customize related tasks and code implementation.
-**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
...
...
@@ -63,7 +64,7 @@
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
...
...
@@ -79,7 +80,7 @@
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to accept user clicks.
// Add a button to respond to user clicks.
Button(){
Text('Next')
.fontSize(30)
...
...
@@ -178,7 +179,7 @@ You can implement page redirection through the page router, which finds the targ
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to accept user clicks.
// Add a button to respond to user clicks.
Button(){
Text('Next')
.fontSize(30)
...
...
@@ -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
>  **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.
...
...
@@ -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**.
>
-**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
...
...
@@ -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
>  **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
...
...
@@ -19,7 +18,7 @@
## 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 > MainAbility**: entry to your application/service.
-**src > main > js > MainAbility > i18n**: resources in different languages, for example, UI strings and image paths.
...
...
@@ -51,7 +50,7 @@
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
...
...
@@ -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**
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.
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 */
...
...
@@ -91,7 +91,7 @@ Exercise caution when modifying the required capability set. Incorrect modificat
### 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
### 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
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
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.
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
...
...
@@ -17,7 +16,7 @@ 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**.
```
```
"deviceConfig": {
"default": {
"network": {
...
...
@@ -26,7 +25,7 @@ import request from '@ohos.request';
...
}
}
```
```
## Constants
...
...
@@ -84,11 +83,13 @@ Uploads files. This API uses a promise to return the result.
| enableMetered | boolean | No | Download allowed in metered connections. |
| enableRoaming | boolean | No | Download allowed on a roaming network. |
| 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. |
| 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>|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| string | URI of the data item.|
| Name| Type| Mandatory| 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>|
| defValue | string | Yes| Default value This parameter is user-defined. If it is not found in the database, the default value is returned.|
| 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.|
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.|
| Type| Description|
| -------- | -------- |
| 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.
> - 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.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| key | string | Yes| Key of the system attribute.|
| def | string | No| Default Value|
| def | string | No| Default value.|
**Return value**
...
...
@@ -88,7 +88,7 @@ Obtains the value of the attribute with the specified key. This API uses an asyn
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| 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.|
**Example**
...
...
@@ -121,7 +121,7 @@ Obtains the value of the attribute with the specified key. This API uses a promi
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| 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.
...
...
@@ -100,7 +100,7 @@ Obtains the latest task status. This API uses an asynchronous callback to return
| 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. |
| 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. |
| hideTitleBar | boolean | false | Whether to hide the title bar. |
| hideBackButton | boolean | false | Whether to hide the back button. |
...
...
@@ -59,7 +59,7 @@ Creates a component that can automatically display the navigation bar, title, an
| 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). |
| 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
| Name | Type | Default Value | Description |
| Name| Type| Default Value| Description|
| -------- | -------- | -------- | -------- |
| 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. |
| 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. |
| 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. |
| textCase | TextCase | TextCase.Normal | Text case. |
| 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.<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.|
| 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.|
| baselineOffset | Length | - | Offset of the text baseline.|
| textCase | TextCase | TextCase.Normal | Text case.|
| copyOption<sup>9+</sup> | boolean\|CopyOption | false | Whether copy and paste is allowed.|
- TextAlign enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Center | The text is center-aligned.|
| 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.|
| Center | The text is center-aligned.|
| 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.|
- TextOverflow enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Clip | Extra text is truncated.|
| Ellipsis | The ellipsis (...) is used for extra-long text. |
| None | No truncation or ellipsis is used for extra-long text.|
| Clip | Extra text is truncated.|
| Ellipsis | An ellipsis (...) is used to represent clipped text.|
| None | No truncation or ellipsis is used for extra-long text.|
- TextDecorationType enums
| Name | Description |
| Name| Description|
| -------- | -------- |
| Underline | An underline is used. |
| LineThrough | A strikethrough is used. |
| Overline | An overline is used. |
| None | No decorative line is used. |
| Underline | Line under the text.|
| LineThrough | Line through the text.|
| Overline | Line over the text.|
| None | No decorative lines.|
- TextCase enums
| Name | Description |
| -------- | -------- |
| Normal | The original case of the text is retained. |
| --------- | -------------------- |
| 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. |
> 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.
- CopyOption<sup>9+</sup> enums
| Name| Description|
| -------- | -------- |
| InApp | Intra-application copy and paste is allowed.|
| LocalDevice | Intra-device copy and paste is allowed.|
| CrossDevice | Cross-device copy and paste is allowed.|
## Example
> **NOTE**<br/>
> If the **\<Text>** component contains both the text and the **\<Span>** child component, only the content in **\<Span>** is displayed.
```
## Example
```ts
// xxx.ets
@Entry
@Component
structTextExample1{
...
...
@@ -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.')
| 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. |
| 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. |
| 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**. |
| 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. |
| 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. |
| 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
| Name | Description |
...
...
@@ -61,7 +61,6 @@ Creates a standard **<Flex>** component.
| 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. |
- Return values
- Return value
Curve object.
...
...
@@ -69,7 +70,8 @@ Constructs a third-order Bezier curve object. The curve value must be between 0
| 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. |
- Return values
- Return value
Curve object.
...
...
@@ -89,7 +91,8 @@ Constructs a spring curve object.
| stiffness | number | Yes | Stiffness. |
| damping | number | Yes | Damping. |
- Return values
- Return value
Curve object.
...
...
@@ -106,7 +109,7 @@ 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.
| 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. |
> 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
The **<Video>** component does not support any child component.
Not supported
## APIs
...
...
@@ -18,47 +30,47 @@ The **<Video>** component does not support any child component.
Video(value: VideoOptions)
- VideoOptions attributes
| Name | Type | Mandatory | Default Value | Description |
| src | string | No | - | Path of the video source. |
| 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/>> |
| previewUri | string \| PixelMap<sup>8+</sup>\|[Resource](../../ui/ts-types.md) | No | - | Path of the preview image. |
| 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.<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.|
| loop | boolean | false | Whether to repeat the video.|
## Events
| Name | Description |
| Name| Description|
| -------- | -------- |
| onStart() => void | Triggered when the video is played.|
| onPause() => void | Triggered when the video playback is paused.|
| onFinish() => void | Triggered when the video playback is finished.|
| 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**.|
| 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.|
| onUpdate(event?: { time: number }) => void | Triggered once per 250 ms when the playback progress changes. The unit of the current playback time is second.|
| onStart() => void | Triggered when the video is played.|
| onPause() => void | Triggered when the video playback is paused.|
| onFinish() => void | Triggered when the video playback is finished.|
| 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**.|
| 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.|
| 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
...
...
@@ -72,6 +84,7 @@ A **VideoController** object can control one or more videos.
controller: VideoController = new VideoController();
```
### start
start(): void
...
...
@@ -97,9 +110,9 @@ setCurrentTime(value: number)
Sets the video playback position.
- 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
...
...
@@ -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 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): 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(): 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 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 startWork(work: WorkInfo): boolean; | Starts 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): 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(): 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 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.
**Table 2** WorkInfo parameters
...
...
@@ -40,7 +40,7 @@ workId | Work ID. Mandatory.|number
bundleName | Name of the Work Scheduler task bundle. Mandatory.|string
abilityName | Name of the component to be notified by a Work Scheduler callback.|string
networkType | Network type.| NetworkType
isCharging | Whether the device is charging.| bool
isCharging | Whether the device is charging.| boolean
chargerType | Charging type.| ChargingType
batteryLevel | Battery level.| number
batteryStatus| Battery status.| BatteryStatus
...
...
@@ -74,6 +74,8 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
**Registering a Work Scheduler Task**
import workScheduler from '@ohos.workScheduler';
let workInfo = {
...
...
@@ -113,7 +115,7 @@ function onWorkStop(work: WorkInfo): void; | Triggered when the Work Scheduler t
