From 74d3c1ab201151cb9e1036f03b3b05288d59d183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=9B=E4=BA=9A=E8=8A=B3?= Date: Wed, 8 Jun 2022 11:42:57 +0000 Subject: [PATCH] update en/application-dev/quick-start/start-with-js.md. Signed-off-by: @ge-yafang --- .../quick-start/start-with-js.md | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/en/application-dev/quick-start/start-with-js.md b/en/application-dev/quick-start/start-with-js.md index 301da91e43..23b28e30ab 100644 --- a/en/application-dev/quick-start/start-with-js.md +++ b/en/application-dev/quick-start/start-with-js.md @@ -40,7 +40,8 @@ After the project synchronization is complete, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **index** in the **Project** window and open the **index.hml** file. You can see that the file contains a **<Text>** component. The sample code in the **index.hml** file is shown below: - ``` + ```html +
Hello World @@ -53,7 +54,8 @@ 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 +
Hello World @@ -69,7 +71,7 @@ From the **Project** window, choose **entry** > **src** > **main** > **js** > **MainAbility** > **pages** > **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: - ``` + ```css .container { display: flex; flex-direction: column; @@ -119,7 +121,8 @@ Add **<Text>** and **<Button>** components and set their styles, as you do for the first page. The sample code in the **second.hml** file is shown below: - ``` + ```html +
Hi there @@ -132,7 +135,7 @@ 3. Set the page style in the **second.css** file. The sample code in the **second.css** file is shown below: - ``` + ```css .container { display: flex; flex-direction: column; @@ -172,7 +175,8 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin 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: - ``` + ```js + // index.js import router from '@ohos.router'; export default { @@ -189,7 +193,8 @@ You can implement page redirection through the [page router](../ui/ui-js-buildin 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: - ``` + ```js + // second.js import router from '@ohos.router'; export default { -- GitLab