diff --git a/en/application-dev/quick-start/figures/1-0.png b/en/application-dev/quick-start/figures/1-0.png new file mode 100644 index 0000000000000000000000000000000000000000..7ff0d06f4af8d0cfe137995d5c37c661cff3887c Binary files /dev/null and b/en/application-dev/quick-start/figures/1-0.png differ diff --git a/en/application-dev/quick-start/getting-started-with-javascript.md b/en/application-dev/quick-start/getting-started-with-javascript.md index d0fd372139e75779584c4db9e5a26c190627969d..617db59fa4d0d6528ce3fcbe18f9db4d386e91b3 100644 --- a/en/application-dev/quick-start/getting-started-with-javascript.md +++ b/en/application-dev/quick-start/getting-started-with-javascript.md @@ -6,7 +6,7 @@ ## Building the First Page -1. Add a **** and a **** 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 -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 **** 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. + diff --git a/en/application-dev/quick-start/preparations.md b/en/application-dev/quick-start/preparations.md index 0f9adcbb2e932f4076a5fb713af749a0643822e5..f25977d4ebb0c1c4cceb4ebe169727a8ebdf88d2 100644 --- a/en/application-dev/quick-start/preparations.md +++ b/en/application-dev/quick-start/preparations.md @@ -5,17 +5,21 @@ ## Task Description -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 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). diff --git a/zh-cn/application-dev/quick-start/figures/1-0.png b/zh-cn/application-dev/quick-start/figures/1-0.png new file mode 100644 index 0000000000000000000000000000000000000000..7ff0d06f4af8d0cfe137995d5c37c661cff3887c Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/1-0.png differ diff --git "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" "b/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" index c2f095a70864ecdb56150c551a322795cd2db5c9..b9d6d3bb9c983b7910feaee0c861817c9bdac781 100755 --- "a/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.md" +++ "b/zh-cn/application-dev/quick-start/\344\275\277\347\224\250JS\350\257\255\350\250\200\345\274\200\345\217\221.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) ## 创建另一个页面 -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语言开发。 + diff --git "a/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" "b/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" index 343aa44a3d8eb95b95e9dbc7eb05a98098ad4bbd..5c358a3afe92b1225314361b96d635c9070fb6e5 100755 --- "a/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" +++ "b/zh-cn/application-dev/quick-start/\345\274\200\345\217\221\345\207\206\345\244\207.md" @@ -5,17 +5,21 @@ ## 任务说明 -本文档适用于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界面的效率。 + ## 开发准备 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)继续下一步的学习。