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

!1757 update docs:快速入门下线

Merge pull request !1757 from zengyawen/OpenHarmony-3.0-LTS
......@@ -6,8 +6,3 @@
- [Creating an OpenHarmony Project](creating-an-openharmony-project.md)
- [Configuring the OpenHarmony App Signature](configuring-the-openharmony-app-signature.md)
- [Installing and Running Your OpenHarmony App](installing-and-running-your-openharmony-app.md)
- [Getting Started](getting-started.md)
- [Preparations](preparations.md)
- [Getting Started with JavaScript](getting-started-with-javascript.md)
# Getting Started with JavaScript<a name="EN-US_TOPIC_0000001064805858"></a>
- [Building the First Page](#section17436202895811)
- [Creating the Second Page](#section944219415598)
- [Implementing Page Redirection](#section126857614017)
## Building the First Page<a name="section17436202895811"></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. */
}
/* 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="section944219415598"></a>
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**.
Below is the structure of the **pages.index** folder:
![](figures/1-0.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;
}
.text {
font-size: 42px;
text-align: center;
}
```
## Implementing Page Redirection<a name="section126857614017"></a>
1. Open the **index.js** file and import the router module. The page router redirects to the target page based on its URI.
```
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/index/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 HarmonyOS app in JavaScript.
# Getting Started<a name="EN-US_TOPIC_0000001115740240"></a>
- **[Preparations](preparations.md)**
- **[Getting Started with JavaScript](getting-started-with-javascript.md)**
# Preparations<a name="EN-US_TOPIC_0000001063968051"></a>
- [Task Description](#section2073881513322)
- [Before You Start](#section11843205017326)
## 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. 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 Ability\(JS\)** for **Template**.
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).
......@@ -6,9 +6,5 @@
- [创建OpenHarmony工程](创建OpenHarmony工程.md)
- [配置OpenHarmony应用签名信息](配置OpenHarmony应用签名信息.md)
- [安装运行OpenHarmony应用](安装运行OpenHarmony应用.md)
- [包结构说明](包结构说明.md)
- [快速入门](快速入门.md)
- [开发准备](开发准备.md)
- [使用JS语言开发](使用JS语言开发.md)
# 使用JS语言开发<a name="ZH-CN_TOPIC_0000001064805858"></a>
- [编写第一个页面](#section17436202895811)
- [创建另一个页面](#section944219415598)
- [实现页面跳转](#section126857614017)
## 编写第一个页面<a name="section17436202895811"></a>
1. 第一个页面内有一个文本和一个按钮,通过text和button组件来实现。
在“Project“窗口,选择“entry \> src \> main \> js \> default \> pages.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; /* 项目在交叉轴居中 */
}
/* 对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)[模拟器](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“,单击回车键。
创建完成后,可以看到“pages.index“文件夹下的文件目录结构如:
![](figures/1-0.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;
}
.text {
font-size: 42px;
text-align: center;
}
```
## 实现页面跳转<a name="section126857614017"></a>
1. 打开第一个页面的“index.js“文件,导入router模块,页面路由router根据页面的uri来找到目标页面,从而实现跳转。示例代码如下:
```
// index.js
import router from '@system.router';
export default {
launch() {
router.push ({
uri:'pages/index/details/details', // 指定要跳转的页面
})
}
}
```
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语言开发。
......@@ -3,7 +3,7 @@
- [前提条件](#section13642104391619)
- [操作步骤](#section132671712101714)
通过工程向导创建一个OpenHarmony工程,该功能只有DevEco Studio 2.2 Beta1及以上版本支持。如果是DevEco Studio 2.1 Release版本,请根据[通过导入Sample方式创建新工程](通过导入Sample方式创建新工程.md)进行操作。
通过工程向导创建一个OpenHarmony工程,该功能只有DevEco Studio 2.2 Beta1及以上版本支持。如果是DevEco Studio 2.1 Release版本,请根据[使用导入Sample方式创建新工程](使用导入Sample方式创建新工程.md)进行操作。
## 前提条件<a name="section13642104391619"></a>
......
# 基于Native的Data Ability创建与访问
- **[Data Ability基本概念](#section001)**
- **[Data Ability基本概念](#Data Ability基本概念)**
- **[创建Data](#section002)**
- **[创建Data](#创建Data)**
- **[访问Data](#section003)**
- **[访问Data](#访问Data)**
## Data Ability基本概念
通过Ability派生出的DataAbility类(以下简称“Data”),有助于应用管理其自身和其他应用存储数据的访问,并提供与其他应用共享数据的方法。Data既可用于同设备不同应用的数据共享,也支持跨设备不同应用的数据共享。
......
# 开发准备<a name="ZH-CN_TOPIC_0000001063968051"></a>
- [任务说明](#section2073881513322)
- [开发准备](#section11843205017326)
## 任务说明<a name="section2073881513322"></a>
本文档适用于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 Ability\(JS\)
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)继续下一步的学习。
# 快速入门<a name="ZH-CN_TOPIC_0000001115740240"></a>
- **[开发准备](开发准备.md)**
- **[使用JS语言开发](使用JS语言开发.md)**
......@@ -11,7 +11,7 @@ DevEco Studio是HarmonyOS的配套的开发IDE,因为HarmonyOS是基于OpenHar
使用DevEco Studio开发OpenHarmony应用的流程与开发HarmonyOS的流程完全一样,本文档仅描述OpenHarmony应用开发与HarmonyOS应用开发的差异点。
- **搭建开发环境差异**:OpenHarmony应用开发环境需要开发者手动配置SDK,具体可参考[配置OpenHarmony SDK](配置OpenHarmony-SDK.md)章节。
- **导入OpenHarmony工程**:OpenHarmony应用开发,只能通过导入Sample工程的方式来创建一个新工程,具体可参考[导入OpenHarmony工程](导入OpenHarmony工程.md)
- **导入OpenHarmony工程**:OpenHarmony应用开发,只能通过导入Sample工程的方式来创建一个新工程,具体可参考[导入OpenHarmony工程](使用导入Sample方式创建新工程.md)
- **调试签名配置**:OpenHarmony应用运行在真机设备上,需要对应用进行签名,关于OpenHarmony应用的签名指导请参考[配置OpenHarmony应用签名信息](配置OpenHarmony应用签名信息.md)
- **在真机设备上运行应用**:需要使用hdc工具将OpenHarmony的hap包推送到真机设备上进行安装,具体可参考[安装运行OpenHarmony应用](安装运行OpenHarmony应用.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册