未验证 提交 93eda80d 编写于 作者: O openharmony_ci 提交者: Gitee

!4061 3709 & 3348 & 3851 & 3955 处理完成

Merge pull request !4061 from ester.zhou/TR-3851
# Getting Started with eTS in the Low-Code Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is supported in DevEco Studio V3.0 Beta3 and later versions.
>
> The component lineup that supports low-code development in eTS is now at its preliminary stage and will be expanding in coming 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.
......@@ -21,7 +20,7 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development
1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001233528152](figures/en-us_image_0000001233528152.png)
......@@ -50,26 +49,32 @@ After the project synchronization is complete, the default first page contains t
Add **Column**, **Text**, and **Button** components to the first page. A column is a container component whose child components are vertically arranged. For details, see [Column](../reference/arkui-ts/ts-container-column.md).
1. Delete the existing template components from the canvas.<a name="delete_origin_content"></a>
Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
Open the **index.visual** file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
![en-us_image_0000001233208980](figures/en-us_image_0000001233208980.gif)
2. Add a **Column** component and set its styles and attributes.<a name="add_container"></a>
Drag the **Column** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233048996](figures/en-us_image_0000001233048996.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001233368860](figures/en-us_image_0000001233368860.png)**Feature** and set **AlignItems** to **center** so that the child components of the **Column** component are centered along the horizontal axis. Below is an illustration of the operations.
![en-us_image_0000001277488977](figures/en-us_image_0000001277488977.gif)
3. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the canvas and then to the center area of the **Column** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001277608813](figures/en-us_image_0000001277608813.png)**Feature**, set **Content** of the **Text** component to **this.message** (that is, **Hello World**), set **FontSize** to **30fp**, and set **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001235731706](figures/en-us_image_0000001235731706.gif)
4. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001277728577](figures/en-us_image_0000001277728577.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277809337](figures/en-us_image_0000001277809337.png)**Feature** and set **Label** to **Next** and **FontSize** to **25fp**. Below is an illustration of the operations.
![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
![en-us_image_0000001235732402](figures/en-us_image_0000001235732402.gif)
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks in the Previewer.
Below is how the first page looks in the Previewer.
![en-us_image_0000001235892798](figures/en-us_image_0000001235892798.png)
......@@ -77,9 +82,10 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
![en-us_image_0000001233368868](figures/en-us_image_0000001233368868.png)
2. [Delete the existing template components from the canvas.](#delete_origin_content)
......@@ -108,6 +114,7 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
![en-us_image_0000001280255513](figures/en-us_image_0000001280255513.gif)
5. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to the canvas and then to a position under the **Text** component. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001233528160](figures/en-us_image_0000001233528160.png)**General** and set **Height** of the **Button** component to **40vp**. Click ![en-us_image_0000001277728597](figures/en-us_image_0000001277728597.png)**Feature** and set **Value** to **Back** and **FontSize** to **25fp**. Below is an illustration of the operations.
![en-us_image_0000001280383937](figures/en-us_image_0000001280383937.gif)
......@@ -118,7 +125,9 @@ Add **Column**, **Text**, and **Button** components to the first page. A column
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .ets and .visual files.
- In the **index.ets** file:
```
......@@ -143,12 +152,13 @@ You can implement page redirection through the page router, which finds the targ
}
}
```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
- In the **index.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233209020](figures/en-us_image_0000001233209020.png)**Events** and set **OnClick** to **this.onclick**.
![en-us_image_0000001235745716](figures/en-us_image_0000001235745716.png)
2. Implement redirection from the second page to the first page.
In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. This operation needs to be completed in both .ets and .visual files.
- In the **second.ets** file:
......@@ -174,7 +184,7 @@ You can implement page redirection through the page router, which finds the targ
}
}
```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001233368900](figures/en-us_image_0000001233368900.png)**Events** and set **OnClick** to **this.back**.
![en-us_image_0000001280385809](figures/en-us_image_0000001280385809.png)
......
# Getting Started with eTS in the Traditional Coding Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> To use eTS, your DevEco Studio must be V3.0.0.601 Beta1 or later.
>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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.
## Creating an eTS Project
1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001223556342](figures/en-us_image_0000001223556342.png)
......@@ -21,14 +20,14 @@
## eTS Project Files
- **entry** : OpenHarmony project module, which can be built into an ability package (HAP).
- **entry** : OpenHarmony project module, which can be built into an ability package ([HAP](../../glossary.md#hap)).
- **src &gt; main &gt; ets** : a collection of eTS source code.
- **src &gt; main &gt; ets &gt; MainAbility** : entry to your application/service.
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages** : pages contained in **MainAbility**.
- **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets** : ability lifecycle file.
- **src &gt; main &gt; resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
- **src &gt; main &gt; 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** : module information and build configuration options, including **buildOption target**.
- **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.
......@@ -37,9 +36,10 @@
## Building the First Page
1. Use the **Text** component.
After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility** &gt; **pages** in the **Project** window and open the **index.ets** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.ets** file is shown below:
```
@Entry
@Component
......@@ -61,9 +61,10 @@
```
2. Add a **&lt;Button&gt;** component.
On the default page, add a **&lt;Button&gt;** component to accept user clicks and implement redirection to another page. The sample code in the **index.ets** file is shown below:
```
@Entry
@Component
......@@ -97,7 +98,9 @@
}
```
3. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks on the Previewer.
3. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
Below is how the first page looks on the Previewer.
![en-us_image_0000001216239356](figures/en-us_image_0000001216239356.png)
......@@ -105,14 +108,16 @@
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder:
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **ets** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png)
![en-us_image_0000001223397122](figures/en-us_image_0000001223397122.png)
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.ets** file is shown below:
```
@Entry
@Component
......@@ -151,9 +156,10 @@
You can implement page redirection through the page router, which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the **index.ets** file of the first page, bind the **onClick** event to the **Next** button so that clicking the button redirects the user to the second page. The sample code in the **index.ets** file is shown below:
```
import router from '@ohos.router';
......@@ -194,9 +200,10 @@ You can implement page redirection through the page router, which finds the targ
```
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **onClick** event to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.ets** file is shown below:
```
import router from '@ohos.router';
......
# Getting Started with JavaScript in the Low-Code Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> This feature will be available in DevEco Studio V2.2 Beta1 and later versions.
>
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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.
......@@ -19,15 +18,15 @@ You can develop applications or services in the low-code approach using either o
## Creating a Project That Supports Low-Code Development
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>This feature is available in DevEco Studio 3.0 Beta2 and later versions and works with compileSdkVersion 7 or later.
>
1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001268198893](figures/en-us_image_0000001268198893.png)
2. Go to the project configuration page, select **Enable Super Visual**, set **UI Syntax** to **JS**, and retain the default values for other parameters.
![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)
![en-us_image_0000001223717294](figures/en-us_image_0000001223717294.png)
3. Click **Finish**. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
......@@ -39,8 +38,8 @@ After the project synchronization is complete, a low-code directory structure is
![en-us_image_0000001223558810](figures/en-us_image_0000001223558810.png)
- **entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages &gt; index &gt; 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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> 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** &gt; **MainAbility** &gt; **pages** &gt; **index**.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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** &gt; **MainAbility** &gt; **pages** &gt; **index**.
>
- **entry &gt; src &gt; main &gt; supervisual &gt; MainAbility &gt; pages &gt; index &gt; 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.
......@@ -51,26 +50,33 @@ After the project synchronization is complete, the default first page contains t
Add **Div**, **Text**, and **Button** components to the first page.
1. Delete the existing template components from the canvas.<a name= delete_origin_content></a>
Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
Open the index.visual file, right-click the existing template components on the canvas, and choose **Delete** from the shortcut menu to delete them. Below is an illustration of the operations.
![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
![en-us_image_0000001216600980](figures/en-us_image_0000001216600980.gif)
2. Add a **Div** component and set its styles and attributes.<a name = add_container></a>
Drag the **Div** component from the **UI Control** area to the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260226691](figures/en-us_image_0000001260226691.png)**General** and set **Height** to **100%** so that the component fills the entire screen. Click ![en-us_image_0000001215226858](figures/en-us_image_0000001215226858.png)**Flex**, set **FlexDirection** to **column** so that the main axis of the component is vertical, and set both **JustifyContent** and **AlignItems** to **center** so that the child components of the **Div** component are centered along the main axis and cross axis. Below is an illustration of the operations.
![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
![en-us_image_0000001216448880](figures/en-us_image_0000001216448880.gif)
3. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215066868](figures/en-us_image_0000001215066868.png)**Properties** and set **Content** of the **Text** component to **Hello World**. Click ![en-us_image_0000001215386842](figures/en-us_image_0000001215386842.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001216446670](figures/en-us_image_0000001216446670.gif)
4. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001260106745](figures/en-us_image_0000001260106745.png)**Properties** and set **Value** of the **Button** component to **Next**. Click ![en-us_image_0000001259866741](figures/en-us_image_0000001259866741.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001260928361](figures/en-us_image_0000001260928361.gif)
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks on the Previewer.
5. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
Below is how the first page looks on the Previewer.
![en-us_image_0000001216288558](figures/en-us_image_0000001216288558.png)
......@@ -78,20 +84,23 @@ Add **Div**, **Text**, and **Button** components to the first page.
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below is the structure of the **pages** folder:
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Visual**, name the page **second**, and click **Finish**. Below, you can see the structure of the **pages** folder.
![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
![en-us_image_0000001223882030](figures/en-us_image_0000001223882030.png)
2. [Delete the existing template components from the canvas.](#delete_origin_content)
3. [Add a Div component and set its styles and attributes.](#add_container)
4. Add a **Text** component.
Drag the **Text** component from the **UI Control** area to the center area of the **Div** component. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001260227453](figures/en-us_image_0000001260227453.png)**Properties** and set **Content** of the **Text** component to **Hi there**. Click ![en-us_image_0000001260107497](figures/en-us_image_0000001260107497.png)**Feature**, and set **FontSize** to **60px** and **TextAlign** to **center**. Then, select the **Text** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001216614132](figures/en-us_image_0000001216614132.gif)
5. Add a **Button** component.
Drag the **Button** component from the **UI Control** area to a position under the **Text** component on the canvas. In the **Attributes &amp; Styles** area on the right, click ![en-us_image_0000001215227618](figures/en-us_image_0000001215227618.png)**Properties** and set **Value** of the **Button** component to **Back**. Click ![en-us_image_0000001259987441](figures/en-us_image_0000001259987441.png)**Feature** and set **FontSize** to **40px**. Then, select the **Button** component on the canvas and drag its corners to fully display the text. Below is an illustration of the operations.
![en-us_image_0000001261017331](figures/en-us_image_0000001261017331.gif)
......@@ -102,7 +111,9 @@ Add **Div**, **Text**, and **Button** components to the first page.
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .js and .visual files.
In the files of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. This operation needs to be completed in both .js and .visual files.
- In the **index.js** file:
```js
......@@ -118,10 +129,11 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
```
- In the index.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388136](figures/en-us_image_0000001215388136.png)**Events** and set **Click** to **onclick**.
![en-us_image_0000001223722586](figures/en-us_image_0000001223722586.png)
![en-us_image_0000001223722586](figures/en-us_image_0000001223722586.png)
2. Implement redirection from the second page to the first page.
In the files of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page.
This operation needs to be completed in both .js and .visual files.
......@@ -137,7 +149,7 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
}
}
```
- In the second.visual file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.
- In the **second.visual** file, select the **Button** component on the canvas. In the **Attributes &amp; Styles** area, click ![en-us_image_0000001215388262](figures/en-us_image_0000001215388262.png)**Events** and set **Click** to **back**.
![en-us_image_0000001268082945](figures/en-us_image_0000001268082945.png)
......
# Getting Started with JavaScript in the Traditional Coding Approach
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note:**
> 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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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
1. Open DevEco Studio, choose **File** &gt; **New** &gt; **Create Project**, select **Empty Ability**, and click **Next**.
1. In DevEco Studio, if no project is open, click **Create Project**; if a project is already open, choose **File** &gt; **New** &gt; **Create Project**. Then, select **Empty Ability** and click **Next**.
![en-us_image_0000001223558814](figures/en-us_image_0000001223558814.png)
......@@ -19,26 +19,27 @@
## JavaScript Project Files
- **entry** : OpenHarmony project module, which can be built into an ability package (HAP).
- **src &gt; main &gt; js** : a collection of JS source code.
- **src &gt; main &gt; js &gt; MainAbility** : entry to your application/service.
- **src &gt; main &gt; js &gt; MainAbility &gt; i18n** : resources in different languages, for example, UI strings and image paths.
- **src &gt; main &gt; js &gt; MainAbility &gt; pages** : pages contained in **MainAbility**.
- **src &gt; main &gt; js &gt; MainAbility &gt; app.js** : ability lifecycle file.
- **src &gt; main &gt; resources** : a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
- **src &gt; main &gt; 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** : 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 &gt; main &gt; js**: a collection of JS source code.
- **src &gt; main &gt; js &gt; MainAbility**: entry to your application/service.
- **src &gt; main &gt; js &gt; MainAbility &gt; i18n**: resources in different languages, for example, UI strings and image paths.
- **src &gt; main &gt; js &gt; MainAbility &gt; pages**: pages contained in **MainAbility**.
- **src &gt; main &gt; js &gt; MainAbility &gt; app.js**: ability lifecycle file.
- **src &gt; main &gt; resources**: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files.
- **src &gt; main &gt; 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
1. Use the **Text** component.
After the project synchronization is complete, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **&lt;Text&gt;** component. The sample code in the **index.hml** file is shown below:
```
<div class="container">
<text class="title">
......@@ -48,9 +49,10 @@
```
2. Add a button and bind the **onclick** method to this button.
On the default page, add an **&lt;input&gt;** 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:
```
<div class="container">
<text class="title">
......@@ -63,9 +65,10 @@
```
3. Set the page style in the **index.css** file.
From the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility** &gt; **pages** &gt; **index**, open the **index.css** file, and set the page styles, such as the width, height, font size, and spacing. The sample code in the **index.css** file is shown below:
```
.container {
display: flex;
......@@ -96,22 +99,26 @@
}
```
4. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer. Below is how the first page looks on the Previewer.
4. On the toolbar in the upper right corner of the editing window, click **Previewer** to open the Previewer.
Below is how the first page looks on the Previewer.
![en-us_image_0000001216084724](figures/en-us_image_0000001216084724.png)
## Building the Second Page
1. Create the second page.
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below is the structure of the **second** folder:
In the **Project** window, choose **entry** &gt; **src** &gt; **main** &gt; **js** &gt; **MainAbility**, right-click the **pages** folder, choose **New** &gt; **Page**, name the page **second**, and click **Finish**. Below, you can see the structure of the **second** folder.
![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png)
![en-us_image_0000001223877210](figures/en-us_image_0000001223877210.png)
2. Add **&lt;Text&gt;** and **&lt;Button&gt;** components.
Add **&lt;Text&gt;** and **&lt;Button&gt;** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below:
```
<div class="container">
<text class="title">
......@@ -124,7 +131,7 @@
```
3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below:
```
.container {
display: flex;
......@@ -161,9 +168,10 @@
You can implement page redirection through the [page router](../ui/ui-js-building-ui-routes.md), which finds the target page based on the page URI. Import the **router** module and then perform the steps below:
1. Implement redirection from the first page to the second page.
In the **index.js** file of the first page, bind the **onclick** method to the button so that clicking the button redirects the user to the second page. The sample code in the **index.js** file is shown below:
```
import router from '@ohos.router';
......@@ -177,9 +185,10 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin
```
2. Implement redirection from the second page to the first page.
In the **second.ets** file of the second page, bind the **back** method to the **Back** button so that clicking the button redirects the user back to the first page. The sample code in the **second.js** file is shown below:
```
import router from '@ohos.router';
......
# Input Method Framework
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> 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.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **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
......@@ -40,16 +40,18 @@ Obtains an [InputMethodController](#InputMethodController) instance.
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Return value
**Return value**
| Type| Description|
| -------- | -------- |
| [InputMethodController](#InputMethodController) | Returns the current **InputMethodController** instance.|
| Type| Description|
| -------- | -------- |
| [InputMethodController](#InputMethodController) | Returns the current **InputMethodController** instance.|
**Example**
```
var InputMethodController = inputMethod.getInputMethodController();
```
- Example
```
var InputMethodController = inputMethod.getInputMethodController();
```
## inputMethod.getInputMethodSetting<sup>8+</sup><a name="getInputMethodSetting"></a>
getInputMethodSetting(): InputMethodSetting
......@@ -58,17 +60,17 @@ Obtains an [InputMethodSetting](#InputMethodSetting) instance.
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Return value
**Return value**
| Type | Description |
| ----------------------------------------- | ---------------------------- |
| [InputMethodSetting](#InputMethodSetting) | Returns the current **InputMethodSetting** instance.|
| Type | Description |
| ----------------------------------------- | ---------------------------- |
| [InputMethodSetting](#InputMethodSetting) | Returns the current **InputMethodSetting** instance.|
**Example**
- Example
```
var InputMethodSetting = inputMethod.getInputMethodSetting();
```
```js
var InputMethodSetting = inputMethod.getInputMethodSetting();
```
## InputMethodController<a name="InputMethodController"></a>
......@@ -82,15 +84,15 @@ Hides the keyboard. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Parameters
**Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;boolean&gt; | Yes| Callback used to return whether the keyboard is successfully hidden.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;boolean&gt; | Yes| Callback used to return whether the keyboard is successfully hidden.|
- Example
**Example**
```
```js
InputMethodController.stopInput((error)=>{
console.info('stopInput');
});
......@@ -104,16 +106,16 @@ Hides the keyboard. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Return value
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;boolean&gt; | Promise used to return whether the keyboard is successfully hidden.|
| Type| Description|
| -------- | -------- |
| Promise&lt;boolean&gt; | Promise used to return whether the keyboard is successfully hidden.|
- Example
**Example**
```
```js
var isSuccess = InputMethodController.stopInput();
console.info('stopInput isSuccess = ' + isSuccess);
```
......@@ -130,20 +132,22 @@ Obtains the list of installed input methods. This API uses an asynchronous callb
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Parameters
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------------------- | ---- | ---------------------- |
| callback | Array<[InputMethodProperty](#InputMethodProperty)> | Yes | Callback used to return the list of installed input methods.|
- Example
```
InputMethodSetting.listInputMethod((properties)=>{
for (var i = 0;i < properties.length; i++) {
var property = properties[i];
console.info(property.packageName + "/" + property.methodId);
}
});
```
**Parameters**
| Name | Type | Mandatory| Description |
| -------- | -------------------------------------------------- | ---- | ---------------------- |
| callback | Array<[InputMethodProperty](#InputMethodProperty)> | Yes | Callback used to return the list of installed input methods.|
**Example**
```js
InputMethodSetting.listInputMethod((properties)=>{
for (var i = 0;i < properties.length; i++) {
var property = properties[i];
console.info(property.packageName + "/" + property.methodId);
}
});
```
### listInputMethod
......@@ -153,19 +157,21 @@ Obtains the list of installed input methods. This API uses an asynchronous callb
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Return value
| Type | Description |
| ----------------------------------------------------------- | ---------------------- |
| Promise<Array<[InputMethodProperty](#InputMethodProperty)>> | Promise used to return the list of installed input methods.|
**Return value**
- Example
```
var properties = InputMethodSetting.listInputMethod();
for (var i = 0;i < properties.length; i++) {
var property = properties[i];
console.info(property.packageName + "/" + property.methodId);
}
```
| Type | Description |
| ----------------------------------------------------------- | ---------------------- |
| Promise<Array<[InputMethodProperty](#InputMethodProperty)>> | Promise used to return the list of installed input methods.|
**Example**
```js
var properties = InputMethodSetting.listInputMethod();
for (var i = 0;i < properties.length; i++) {
var property = properties[i];
console.info(property.packageName + "/" + property.methodId);
}
```
### displayOptionalInputMethod
......@@ -181,12 +187,12 @@ Displays a dialog box for selecting an input method. This API uses an asynchrono
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to return the execution result.|
- Example
```
InputMethodSetting.displayOptionalInputMethod(()=>{
console.info('displayOptionalInputMethod is called');
});
```
**Example**
```js
InputMethodSetting.displayOptionalInputMethod(()=>{
console.info('displayOptionalInputMethod is called');
});
```
### displayOptionalInputMethod
......@@ -194,15 +200,16 @@ displayOptionalInputMethod(): Promise&lt;void&gt;
Displays a dialog box for selecting an input method. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.Miscservices.InputMethodFramework
**System capability**: SystemCapability.Miscservices.InputMethodFramework
- Return value
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the execution result.|
- Example
```
InputMethodSetting.displayOptionalInputMethod();
```
**Example**
```js
InputMethodSetting.displayOptionalInputMethod();
```
\ No newline at end of file
# Setting the System Time
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br>The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
## Modules to Import
```
import systemTime from '@ohos.systemTime';
```
......@@ -22,16 +22,17 @@ Sets the system time. This API uses an asynchronous callback to return the resul
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Parameters**
- Example
```
// Set the system time to 2021-01-20 02:36:25.
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Example**
```js
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time, (error, data) => {
if (error) {
......@@ -53,26 +54,28 @@ Sets the system time. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| time | number | Yes| Timestamp to set, in milliseconds.|
- Example
```
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time).then((data) => {
console.log(`systemTime.setTime success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.setTime because ` + JSON.stringify(error));
});
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```js
// Set the system time to 2021-01-20 02:36:25.
var time = 1611081385000;
systemTime.setTime(time).then((data) => {
console.log(`systemTime.setTime success data : ` + JSON.stringify(data));
}).catch((error) => {
console.error(`failed to systemTime.setTime because ` + JSON.stringify(error));
});
```
......@@ -84,15 +87,16 @@ Obtains the time elapsed since the Unix epoch. This API uses an asynchronous cal
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getCurrentTime(true, (error, data) => {
if (error) {
console.error(`failed to systemTime.getCurrentTime because ` + JSON.stringify(error));
......@@ -111,19 +115,21 @@ Obtains the time elapsed since the Unix epoch. This API uses a promise to return
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Example
```
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data) => {
console.log(`systemTime.getCurrentTime success data : ` + JSON.stringify(data));
}).catch((error) => {
......@@ -140,15 +146,16 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getRealActiveTime(true, (error, data) => {
if (error) {
console.error(`failed to systemTime.getRealActiveTimebecause ` + JSON.stringify(error));
......@@ -167,19 +174,21 @@ Obtains the time elapsed since system start, excluding the deep sleep time. This
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Example
```
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
```js
systemTime.getCurrentTime().then((data) => {
console.log(`systemTime.getRealActiveTime success data : ` + JSON.stringify(data));
}).catch((error) => {
......@@ -196,15 +205,16 @@ Obtains the time elapsed since system start, including the deep sleep time. This
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
| callback | AsyncCallback&lt;number&gt; | Yes| Callback used to return the time.|
**Example**
```js
systemTime.getRealTime(true, (error, data) => {
if (error) {
console.error(`failed to systemTime.getRealTime because ` + JSON.stringify(error));
......@@ -223,19 +233,21 @@ Obtains the time elapsed since system start, including the deep sleep time. This
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| isNano | boolean | No| Whether nanoseconds or milliseconds will be returned. If the value is **true**, nanoseconds will be returned. Otherwise, milliseconds will be returned.|
- Example
```
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;number&gt; | Promise used to return the time.|
**Example**
```js
systemTime.getRealTime().then((data) => {
console.log(`systemTime.getRealTime success data: ` + JSON.stringify(data));
}).catch((error) => {
......@@ -254,15 +266,16 @@ Sets the system date. This API uses an asynchronous callback to return the resul
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Example**
```js
var data = new Date("October 13, 2020 11:13:00");
systemTime.setDate(data,(error, data) => {
if (error) {
......@@ -284,19 +297,21 @@ Sets the system date. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| date | Date | Yes| Target date to set.|
- Example
```
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```js
var data = new Date("October 13, 2020 11:13:00");
systemTime.setDate(data).then((value) => {
console.log(`systemTime.setDate success data : ` + JSON.stringify(value));
......@@ -314,14 +329,15 @@ Obtains the current system date. This API uses an asynchronous callback to retur
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;Date&gt; | Yes| Callback used to return the current system date.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;Date&gt; | Yes| Callback used to return the current system date.|
**Example**
```js
systemTime.getDate((error, data) => {
if (error) {
console.error(`failed to systemTime.getDate because ` + JSON.stringify(error));
......@@ -340,14 +356,15 @@ Obtains the current system date. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;Date&gt; | Promise used to return the current system date.|
**Return value**
- Example
```
| Type| Description|
| -------- | -------- |
| Promise&lt;Date&gt; | Promise used to return the current system date.|
**Example**
```js
systemTime.getDate().then((data) => {
console.log(`systemTime.getDate success data : ` + JSON.stringify(data));
}).catch((error) => {
......@@ -366,15 +383,16 @@ Sets the system time zone. This API uses an asynchronous callback to return the
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
| callback | AsyncCallback&lt;void&gt; | Yes| Callback used to process the received return value.|
**Example**
```js
systemTime.setTimezone('Asia/Shanghai', (error, data) => {
if (error) {
console.error('failed to systemTime.setTimezone because ' + JSON.stringify(error));
......@@ -395,19 +413,21 @@ Sets the system time zone. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
**Parameters**
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| timezone | string | Yes| System time zone to set.|
- Example
```
**Return value**
| Type| Description|
| -------- | -------- |
| Promise&lt;void&gt; | Promise used to return the result.|
**Example**
```js
systemTime.setTimezone('Asia/Shanghai').then((data) => {
console.log(`systemTime.setTimezone success data : ` + JSON.stringify(data));
}).catch((error) => {
......@@ -424,14 +444,15 @@ Obtains the system time zone. This API uses an asynchronous callback to return t
**System capability**: SystemCapability.MiscServices.Time
- **Parameters**
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;string&gt; | Yes| Callback used to return the system time zone.|
**Parameters**
- Example
```
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| callback | AsyncCallback&lt;string&gt; | Yes| Callback used to return the system time zone.|
**Example**
```js
systemTime.getTimezone((error, data) => {
if (error) {
console.error(`failed to systemTime.getTimezone because ` + JSON.stringify(error));
......@@ -450,14 +471,15 @@ Obtains the system time zone. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.Time
- Return value
| Type| Description|
| -------- | -------- |
| Promise&lt;string&gt; | Promise used to return the system time zone.|
**Return value**
- Example
```
| Type| Description|
| -------- | -------- |
| Promise&lt;string&gt; | Promise used to return the system time zone.|
**Example**
```js
systemTime.getTimezone().then((data) => {
console.log(`systemTime.getTimezone success data : ` + JSON.stringify(data));
}).catch((error) => {
......
......@@ -51,11 +51,11 @@
- [Qrcode Development](ui-js-components-qrcode.md)
- [Search Development](ui-js-components-search.md)
- Canvas Development
- [Canvas](ui-js-components-canvas.md)
- [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui-js-components-path2d.md)
- [OffscreenCanvas](ui-js-components-offscreencanvas.md)
- [Grid-container Development](ui-js-components-calendar.md)
- [Canvas](ui-js-components-canvas.md)
- [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui-js-components-path2d.md)
- [OffscreenCanvas](ui-js-components-offscreencanvas.md)
- [Grid-container Development](ui-js-components-grid.md)
- Svg
- [Basics](ui-js-components-svg-overview.md)
- [Graph Drawing](ui-js-components-svg-graphics.md)
......
......@@ -152,7 +152,7 @@ export default {
![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**<br/>
> - This component supports only one child component.
>
> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated.
......@@ -333,4 +333,4 @@ export default {
The following sample is provided to help you better understand how to develop the **&lt;dialog&gt;** component:
[`JsDialog`: JS Dialog Box (API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
\ No newline at end of file
[`JsDialog`: JS Dialog Box (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册