Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 cabcc97c 编写于 作者: Z zengyawen
浏览文件
操作

update docs 

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>
上级 467ea445
隐藏空白更改
内联 并排
Showing with 3 addition and 461 deletion
en/application-dev/Readme-EN.md
浏览文件 @ cabcc97c
......@@ -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)
......
en/application-dev/media/Readme-EN.md
浏览文件 @ cabcc97c
# Media
- [Audio](audio.md)
- Audio
- [Audio Overview](audio-overview.md)
- [Audio Playback Development](audio-playback.md)
......
en/application-dev/quick-start/Readme-EN.md
浏览文件 @ cabcc97c
......@@ -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)
en/application-dev/quick-start/start-overview.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 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).
en/application-dev/quick-start/start-with-js.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 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.
en/application-dev/quick-start/start.md 已删除 100644 → 0
浏览文件 @ 467ea445
# Getting Started<a name="EN-US_TOPIC_0000001115740240"></a>
- **[Preparations](start-overview.md)**
- **[Getting Started with JavaScript](start-with-js.md)**
en/application-dev/reference/arkui-js/js-components-common-transition.md
浏览文件 @ cabcc97c
......@@ -270,7 +270,7 @@ export default {
}
```
![](figures/卡片转场.gif)
![](figures/01.gif)
## Page Transition Styles<a name="section0565021620"></a>
......
en/application-dev/reference/arkui-ts/ts-pixel-units.md
浏览文件 @ cabcc97c
......@@ -121,5 +121,5 @@ struct Example {
}
```
![](figures/像素单位.gif)
![](figures/01.gif)
zh-cn/application-dev/Readme-CN.md
浏览文件 @ cabcc97c
......@@ -3,7 +3,6 @@
- [应用开发导读](application-dev-guide.md)
- [DevEco Studio（OpenHarmony）使用指南](quick-start/deveco-studio-user-guide-for-openharmony.md)
- [包结构说明](quick-start/package-structure.md)
- [快速入门](quick-start/start.md)
- [Ability框架](ability/Readme-CN.md)
- 方舟开发框架（ArkUI）
- [基于JS扩展的类Web开发范式](ui/ui-arkui-js.md)
......
zh-cn/application-dev/quick-start/Readme-CN.md
浏览文件 @ cabcc97c
......@@ -10,7 +10,3 @@
- [配置OpenHarmony应用签名信息](configuring-openharmony-app-signature.md)
- [安装运行OpenHarmony应用](installing-openharmony-app.md)
- [包结构说明](package-structure.md)
- 快速入门
- [开发准备](start-overview.md)
- [使用JS语言开发](start-with-js.md)
- [使用eTS语言开发](start-with-ets.md)
zh-cn/application-dev/quick-start/start-overview.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 开发准备
## 任务说明
本文档适用于OpenHarmony应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用（如下图[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行效果所示），熟悉OpenHarmony应用开发流程。
为确保运行效果，本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
![zh-cn_image_0000001089359413](figures/zh-cn_image_0000001089359413.png)
**表1** 方舟开发框架的对比
| 比较项 | 基于JS扩展的类Web开发范式 | 基于TS扩展的声明式开发范式 |
| -------- | -------- | -------- |
| 语言生态 | JS | eTS |
| 接口方式 | 类Web范式 | 声明式 |
| 执行方式 | 框架层处理，基于数据驱动的UI自动变更 | 框架层处理，基于数据驱动的UI自动变更 |
| 相对优势 | 轻量化，开发更简便 | 极简开发，内存占用更少、运行性能更高 |
接下来，分别使用JS语言、eTS语言实现上述两个页面跳转的功能。
## 开发准备
1. 开始前请参考[配置OpenHarmony SDK](../quick-start/configuring-openharmony-sdk.md)，完成**DevEco Studio**的安装和开发环境配置。
2. 开发环境配置完成后，请参考[创建OpenHarmony工程](../quick-start/use-wizard-to-create-project.md)创建工程。
- 使用JS语言开发，模板选择Empty Ability，Language选择JS。
- 使用eTS语言开发，模板选择Empty Ability，Language选择eTS。
3. 工程创建完成后，使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行该工程。
完成上述操作后，请参考[使用JS语言开发](../quick-start/start-with-js.md)、[使用eTS语言开发](../quick-start/start-with-ets.md)继续下一步的学习。
zh-cn/application-dev/quick-start/start-with-ets.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 使用eTS语言开发
> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
> 请使用DevEco Studio V3.0.0.601 Beta1及更高版本。本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
## 创建eTS工程
1. 打开DevEco Studio，创建一个新工程，选择模板，如Empty Ability：
![zh-cn_image_0000001238733799](figures/zh-cn_image_0000001238733799.png)
2. 进入配置工程界面，Project Type选择Application，Language选择eTS，其他参数根据实际需要设置即可。
![zh-cn_image_0000001238853759](figures/zh-cn_image_0000001238853759.png)
## 编写第一个页面
1. 工程创建完成后，在"Project"窗口，点击entry &gt; src &gt; main &gt; ets &gt; default &gt; pages，打开index.ets文件。
![zh-cn_image_0000001213883165](figures/zh-cn_image_0000001213883165.png)
2. 第一个页面由Flex容器组件、Text组件和Button组件构成。在index.ets中编写并设置页面组件的属性和样式，示例代码如下所示：
```
@Entry
@Component
struct Index {
build() {
//Flex容器组件
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
//Text组件
Text('Hello World')
.fontSize(60)
.fontWeight(500)
//Button组件
Button('Next')
.fontSize(40)
.fontWeight(500)
.width(280)
.height(60)
}
//容器整体宽高
.width('100%')
.height('100%')
}
}
```
3. 使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示：
![zh-cn_image_0000001168898456](figures/zh-cn_image_0000001168898456.png)
## 创建第二个页面
1. 在"Project"窗口，打开entry &gt; src &gt; main &gt; ets &gt; default，右键点击pages文件夹，选择NeweTS Page，命名为details，单击回车键。创建完成后，可以看到pages文件夹下的文件目录结构如下：
![zh-cn_image_0000001214043107](figures/zh-cn_image_0000001214043107.png)
2. 第二个页面由Flex容器组件、Text组件构成。在details.ets中编写并设置页面组件的属性和样式，示例代码如下所示：
```
@Entry
@Component
struct Details {
build() {
//Flex容器组件
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
//Text组件
Text('Hi there')
.fontSize(60)
.fontWeight(500)
}
//容器整体宽高
.width('100%')
.height('100%')
}
}
```
## 实现页面跳转
1. 打开第一个页面的index.ets文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下：
```
//导入router模块
import router from '@system.router';
@Entry
@Component
struct Index {
build() {
//Flex容器组件
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
//Text组件
Text('Hello World')
.fontSize(60)
.fontWeight(500)
//Button组件
Button('Next')
.fontSize(40)
.fontWeight(500)
.width(280)
.height(60)
//点击Button实现页面跳转
.onClick(() => { router.push({ uri: 'pages/details' }) })
}
//容器整体宽高
.width('100%')
.height('100%')
}
}
```
2. 再次使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示：
![zh-cn_image_0000001169221404](figures/zh-cn_image_0000001169221404.png)
恭喜你，至此已成功完成OpenHarmony快速入门-使用eTS语言开发。
zh-cn/application-dev/quick-start/start-with-js.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 使用JS语言开发（传统代码方式）
为确保运行效果，本文以使用**DevEco Studio 3.0 Beta2**版本为例，点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download_beta)获取下载链接。
## 编写第一个页面
1. 第一个页面内有一个文本和一个按钮，通过text和button组件来实现。
在"Project"窗口，选择entry &gt; src &gt; main &gt; js &gt; default &gt; pages &gt; index，打开index.hml文件，添加一个文本和一个按钮，示例代码如下：
```
<!-- index.hml -->
<div class="container">
<!-- 添加一个文本 -->
<text class="text">
Hello World
</text>
<!-- 添加一个按钮，按钮样式设置为胶囊型，文本显示为Next，绑定launch事件 -->
<button class="button" type="capsule" value="Next" onclick="launch"></button>
</div>
```
2. 打开index.css文件，设置文本和按钮的样式，示例代码如下：
```
/* index.css */
.container {
flex-direction: column; /* 设置容器内的项目纵向排列 */
justify-content: center; /* 设置项目位于容器主轴的中心 */
align-items: center; /* 项目在交叉轴居中 */
width:100%;
height:100%;
}
/* 对class="text"的组件设置样式 */
.text{
font-size: 42px;
}
/* 对class="button"的组件设置样式 */
.button {
width: 240px;
height: 60px;
background-color: #007dff;
font-size: 30px;
text-color: white;
margin-top: 20px;
}
```
3. 使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示：
![zh-cn_image_0000001167690688](figures/zh-cn_image_0000001167690688.png)
## 创建另一个页面
1. 在"Project"窗口，打开entry &gt; src &gt; main &gt; js &gt; default，右键点击pages文件夹，选择NewJS Page，命名为details，单击回车键。
创建完成后，可以看到pages文件夹下的文件目录结构如下：
![zh-cn_image_0000001167850660](figures/zh-cn_image_0000001167850660.png)
2. 打开details.hml文件，添加一个文本，示例代码如下：
```
<!-- details.hml -->
<div class="container">
<text class="text">
Hi there
</text>
</div>
```
3. 打开details.css文件，设置文本的样式，示例代码如下：
```
/* details.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
height:100%;
}
.text {
font-size: 42px;
text-align: center;
}
```
## 实现页面跳转
1. 打开第一个页面的index.js文件，导入router模块，页面路由router根据页面的uri来找到目标页面，从而实现跳转。示例代码如下：
```
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/details/details', // 指定要跳转的页面
})
}
}
```
2. 再次使用[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行项目，效果如下图所示：
![zh-cn_image_0000001213130527](figures/zh-cn_image_0000001213130527.png)
恭喜你，至此已成功完成OpenHarmony快速入门-使用JS语言开发。
zh-cn/application-dev/quick-start/start.md 已删除 100644 → 0
浏览文件 @ 467ea445
# 快速入门
- **[开发准备](start-overview.md)**
- **[使用JS语言开发](start-with-js.md)**
- **[使用eTS语言开发](start-with-ets.md)**
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或