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

!1754 update docs:快速入门下线&例行工具扫描处理

Merge pull request !1754 from zengyawen/OpenHarmony-3.1-Beta
......@@ -3,7 +3,6 @@
- [Application Development Overview](application-dev-guide.md)
- [DevEco Studio \(OpenHarmony\) User Guide](quick-start/deveco-studio-user-guide-for-openharmony.md)
- [Directory Structure](quick-start/package-structure.md)
- [Getting Started](quick-start/start.md)
- [ArkUI](ui/ui-arkui.md)
- [JavaScript-based Web-like Development Paradigm](ui/ui-arkui-js.md)
......
# Media
- [Audio](audio.md)
- Audio
- [Audio Overview](audio-overview.md)
- [Audio Playback Development](audio-playback.md)
......
......@@ -11,7 +11,4 @@
- [Configuring the OpenHarmony App Signature](configuring-openharmony-app-signature.md)
- [Installing and Running Your OpenHarmony App](installing-openharmony-app.md)
- [Directory Structure](package-structure.md)
- [Getting Started](start.md)
- [Preparations](start-overview.md)
- [Getting Started with JavaScript](start-with-js.md)
# Preparations<a name="EN-US_TOPIC_0000001063968051"></a>
## Task Description<a name="section2073881513322"></a>
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](https://developer.harmonyos.com/en/develop/deveco-studio#download) for your development.
![](figures/3.png)
**Table 1** Comparison between ArkUI paradigms
<a name="table1663194773617"></a>
<table><thead align="left"><tr id="row20632174793610"><th class="cellrowborder" valign="top" width="17.88%" id="mcps1.2.4.1.1"><p id="p1863274783615"><a name="p1863274783615"></a><a name="p1863274783615"></a>Comparison Item</p>
</th>
<th class="cellrowborder" valign="top" width="41.730000000000004%" id="mcps1.2.4.1.2"><p id="p344415455554"><a name="p344415455554"></a><a name="p344415455554"></a>JavaScript-based Web-like Development Paradigm</p>
</th>
<th class="cellrowborder" valign="top" width="40.39%" id="mcps1.2.4.1.3"><p id="p20391115416559"><a name="p20391115416559"></a><a name="p20391115416559"></a>TypeScript-based Declarative Development Paradigm</p>
</th>
</tr>
</thead>
<tbody><tr id="row15632164733618"><td class="cellrowborder" valign="top" width="17.88%" headers="mcps1.2.4.1.1 "><p id="p166323477367"><a name="p166323477367"></a><a name="p166323477367"></a>Language</p>
</td>
<td class="cellrowborder" valign="top" width="41.730000000000004%" headers="mcps1.2.4.1.2 "><p id="p16321947123618"><a name="p16321947123618"></a><a name="p16321947123618"></a>JS</p>
</td>
<td class="cellrowborder" valign="top" width="40.39%" headers="mcps1.2.4.1.3 "><p id="p1563224773617"><a name="p1563224773617"></a><a name="p1563224773617"></a>eTS</p>
</td>
</tr>
<tr id="row17632144716361"><td class="cellrowborder" valign="top" width="17.88%" headers="mcps1.2.4.1.1 "><p id="p10632184713363"><a name="p10632184713363"></a><a name="p10632184713363"></a>Paradigm</p>
</td>
<td class="cellrowborder" valign="top" width="41.730000000000004%" headers="mcps1.2.4.1.2 "><p id="p13632447133617"><a name="p13632447133617"></a><a name="p13632447133617"></a>Web-like paradigm</p>
</td>
<td class="cellrowborder" valign="top" width="40.39%" headers="mcps1.2.4.1.3 "><p id="p15632114710367"><a name="p15632114710367"></a><a name="p15632114710367"></a>Declarative paradigm</p>
</td>
</tr>
<tr id="row2632134753615"><td class="cellrowborder" valign="top" width="17.88%" headers="mcps1.2.4.1.1 "><p id="p46321947183612"><a name="p46321947183612"></a><a name="p46321947183612"></a>Execution</p>
</td>
<td class="cellrowborder" valign="top" width="41.730000000000004%" headers="mcps1.2.4.1.2 "><p id="p1363244717361"><a name="p1363244717361"></a><a name="p1363244717361"></a>Handled by the framework; data-driven automatic UI update</p>
</td>
<td class="cellrowborder" valign="top" width="40.39%" headers="mcps1.2.4.1.3 "><p id="p1463274733610"><a name="p1463274733610"></a><a name="p1463274733610"></a>Handled by the framework; data-driven automatic UI update</p>
</td>
</tr>
<tr id="row126321547173610"><td class="cellrowborder" valign="top" width="17.88%" headers="mcps1.2.4.1.1 "><p id="p963314717366"><a name="p963314717366"></a><a name="p963314717366"></a>Advantages</p>
</td>
<td class="cellrowborder" valign="top" width="41.730000000000004%" headers="mcps1.2.4.1.2 "><p id="p963314710361"><a name="p963314710361"></a><a name="p963314710361"></a>Simple and easy to use</p>
</td>
<td class="cellrowborder" valign="top" width="40.39%" headers="mcps1.2.4.1.3 "><p id="p963315474367"><a name="p963315474367"></a><a name="p963315474367"></a>Simplified development, less memory usage, and higher running performance</p>
</td>
</tr>
</tbody>
</table>
## Before You Start<a name="section965173113911"></a>
1. Install DevEco Studio and configure the development environment. For details, see [Configuring the OpenHarmony SDK](configuring-openharmony-sdk.md).
2. Create a project as instructed in [Creating an OpenHarmony Project](create-openharmony-project.md).
- If you are using the JavaScript language, select **Empty Ability** for **Template** and **JS** for **Language**.
3. Use the [previewer](https://developer.harmonyos.com/en/docs/documentation/doc-guides/previewer-0000001054328973#EN-US_TOPIC_0000001056725592__section16523172216252) or [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 following instructions in [Getting Started with JavaScript](start-with-js.md).
# Getting Started with JavaScript<a name="EN-US_TOPIC_0000001168007068"></a>
For best results, use the [latest version of DevEco Studio](https://developer.harmonyos.com/en/develop/deveco-studio#download) for your development.
## Building the First Page<a name="section1754373063820"></a>
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.
```
<!-- index.hml -->
<div class="container">
<!-- Add text. -->
<text class="text">
Hello World
</text>
<!-- Add a button, set its type to capsule, set button text to Next, and bind it to the launch event. -->
<button class="button" type="capsule" value="Next" onclick="launch"></button>
</div>
```
2. Open the **index.css** file and set text and button styles.
```
/* index.css */
.container {
flex-direction: column; /* Arrange container items vertically. */
justify-content: center; /* Center the items along the main axis of the container. */
align-items: center; /* Center the items along the cross axis of the container. */
width:100%;
height:100%;
}
/* Set the style for the component of the text class. */
.text{
font-size: 42px;
}
/* Set the style for the component of the button class. */
.button {
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
```
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="section11544830123813"></a>
1. In the **Project** window, choose **entry** \> **src** \> **main** \> **js** \> **default**, right-click the **pages** folder, and then choose **New** \> **JS Page**. Name the new page **details** and press **Enter**.
Below is the structure of the **pages** folder:
![](figures/en-us_image_0000001167850660.png)
2. Open the **details.hml** file, add the **<text\>** component, and set its layout.
```
<!-- details.hml -->
<div class="container">
<text class="text">
Hi there
</text>
</div>
```
3. Open the **details.css** file and set the text style.
```
/* details.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.text {
font-size: 42px;
text-align: center;
}
```
## Implementing Page Redirection<a name="section55441830123814"></a>
1. Open the **index.js** file and import the router module. The page router finds the target page based on its URI for the redirection. The sample code is as follows:
```
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/details/details', // Specify the page to be redirected to.
})
}
}
```
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 OpenHarmony app in JavaScript.
# Getting Started<a name="EN-US_TOPIC_0000001115740240"></a>
- **[Preparations](start-overview.md)**
- **[Getting Started with JavaScript](start-with-js.md)**
此差异已折叠。
此差异已折叠。
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册