提交 9a1e1e46 编写于 作者: O openharmony_ci 提交者: Gitee

!616 刷新JS快速入门

Merge pull request !616 from 时睿/master
......@@ -6,7 +6,7 @@
## 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.
![](figures/1.png)
## 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:
![](figures/项目列表.png)
![](figures/1-0.png)
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.
![](figures/2.png)
Congratulations! You have finished developing your HarmonyOS app in JavaScript.
......@@ -5,17 +5,21 @@
## Task Description<a name="section2073881513322"></a>
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.
![](figures/3.png)
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).
......@@ -33,31 +33,31 @@
}
/* 对class="text"的组件设置样式 */
.text{
font-size: 72px;
font-size: 42px;
}
/* 对class="button"的组件设置样式 */
.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. 使用真机或模拟器运行项目,效果如图所示:
3. 使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)[模拟器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709)运行项目,效果如下图所示:
![](figures/1.png)
## 创建另一个页面<a name="section944219415598"></a>
1. 在“Project“窗口,打开“entry \> src \> main \> js \> default“,右键点击“pages.index“文件夹,选择“New \> JS Page“,命名为“details“。
1. 在“Project“窗口,打开“entry \> src \> main \> js \> default“,右键点击“pages.index“文件夹,选择“New \> JS Page“,命名为“details“,单击回车键
创建完成后,可以看到变成了“pages“文件夹下的“index“和“details“文件夹。
创建完成后,可以看到“pages.index“文件夹下的文件目录结构如:
![](figures/项目列表.png)
![](figures/1-0.png)
2. 打开“details.hml“文件,添加一个文本,示例代码如下:
......@@ -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', // 指定要跳转的页面
uri:'pages/index/details/details', // 指定要跳转的页面
})
}
}
```
2. 再次运行项目,效果如图所示:
2. 再次使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)[模拟器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709)运行项目,效果如下图所示:
![](figures/2.png)
恭喜你,至此已成功完成HarmonyOS快速入门-使用JS语言开发。
......@@ -5,17 +5,21 @@
## 任务说明<a name="section2073881513322"></a>
本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用,熟悉OpenHarmony应用开发流程。
本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用(如下图[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行效果所示),熟悉OpenHarmony应用开发流程。
为确保运行效果,请使用最新版本的**DevEco Studio**完成本任务,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。
![](figures/3.png)
另外,DevEco Studio V2.2 Beta1及更高版本还支持HarmonyOS低代码开发方式。低代码开发方式遵循[HarmonyOS JS开发规范](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-overview-0000001056361791),具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低用户的上手成本提升用户构建UI界面的效率。
## 开发准备<a name="section11843205017326"></a>
1. 开始前请参考[配置OpenHarmony SDK](../quick-start/配置OpenHarmony-SDK.md),完成**DevEco Studio**的安装和开发环境配置。
2. 开发环境配置完成后,请参考[创建和运行Hello World](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/hello_world-0000001054516888)创建工程,设备类型以“Phone“为例:
- 使用JS语言开发,模板选择“Empty Feature Ability\(JS\)
- 使用JS语言开发,模板选择“Empty Ability\(JS\)
3. 创建完成后在Phone模拟器中运行该工程。
3. 工程创建完成后,使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)或Phone[模拟器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/run_simulator-0000001053303709)运行该工程。
完成上述操作后,请参考[使用JS语言开发](使用JS语言开发.md)继续下一步的学习。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册