## Building the First Page<a name="section17436202895811"></a>
1. Add a **<text\>** and a **<button\>** component to the first page.
1. Add a **Text** and a **Button** component to the first page.
In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default** \> **pages.index**, open the **index.hml** file, and add the components.
...
...
@@ -33,31 +33,31 @@
}
/* Set the style for the component of the text class. */
.text{
font-size: 72px;
font-size: 42px;
}
/* Set the style for the component of the button class. */
.button {
width: 362px;
height: 80px;
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 39px;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
```
3.Run your project on a real mobile phone or the simulator. The following figure shows the display effect:
3.[Preview](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [run your app on the emulator](https://developer.harmonyos.com/en/docs/documentation/doc-guides/run_simulator-0000001053303709). The following figure shows the running effect.
## Creating the Second Page<a name="section944219415598"></a>
1. In the **Project** window, choose **entry**\>**src**\>**main**\>**js**\>**default**, right-click the **pages.index** folder, and choose **New**\>**JS Page**. Set the new page name to **details**.
1. In the **Project** window, choose **entry**\>**src**\>**main**\>**js**\>**default**, right-click the **pages.index** folder, and choose **New**\>**JS Page**. Name the new page **details** and press **Enter**.
The **index** and **details** folders are displayed in the **pages** folder.
Below is the structure of the **pages.index** folder:
2. Open the **details.hml** file, add the **<text\>** component, and set its layout.
...
...
@@ -80,7 +80,7 @@
align-items: center;
}
.text {
font-size: 70px;
font-size: 42px;
text-align: center;
}
```
...
...
@@ -97,14 +97,16 @@
export default {
launch() {
router.push ({
uri:'pages/details/details', // Specify the page to be redirected to.
uri:'pages/index/details/details', // Specify the page to be redirected to.
})
}
}
```
2.Run the project again. The following figure shows the effect.
2.[Preview](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [run your app on the emulator](https://developer.harmonyos.com/en/docs/documentation/doc-guides/run_simulator-0000001053303709) again. The following figure shows the running effect.
Congratulations! You have finished developing your HarmonyOS app in JavaScript.
This document is intended for novices at developing OpenHarmony apps. You will learn from the following example to build two pages and implement redirection from the first to the second page.
This document is intended for novices at developing OpenHarmony apps. You will learn the development procedure from the following sections to build two pages and implement redirection from the first page to the second one. The following figure shows how the pages look on the [Previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252).
For best results, use the latest version of DevEco Studio. Click [here](https://developer.harmonyos.com/en/develop/deveco-studio#download) if you want to download the latest DevEco Studio.
If your DevEco Studio is V2.2 Beta1 or later, you can also use HarmonyOS low-code development to visualize your development with a variety of UI editing features. HarmonyOS low-code development allows you to build your UI in compliance with the [HarmonyOS JavaScript development specifications](https://developer.harmonyos.com/en/docs/documentation/doc-references/js-apis-overview-0000001056361791) more efficiently and cost-effectively.
## Before You Start<a name="section11843205017326"></a>
1.[Configure the OpenHarmony SDK](../quick-start/configuring-the-openharmony-sdk.md).
2. Create a project by referring to [Creating and Running a Hello World Project](https://developer.harmonyos.com/en/docs/documentation/doc-guides/hello_world-0000001054516888). Select **Phone** as the device type.
- If you are using the JavaScript language, select **Empty Feature Ability\(JS\)** for **Template**.
- If you are using the JavaScript language, select **Empty Ability\(JS\)** for **Template**.
3.Run your project on the phone emulator.
3.Use the [previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [phone emulator](https://developer.harmonyos.com/en/docs/documentation/doc-guides/run_simulator-0000001053303709) to run the project.
Now you have created your first OpenHarmony project. You can continue the development by referring to [Getting Started with JavaScript](getting-started-with-javascript.md).
另外，DevEco Studio V2.2 Beta1及更高版本还支持HarmonyOS低代码开发方式。低代码开发方式遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791)，具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的上手成本提升用户构建UI界面的效率。
