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

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

Merge pull request !1750 from zengyawen/master
......@@ -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)
......
......@@ -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 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 app in JavaScript.
# Getting Started<a name="EN-US_TOPIC_0000001115740240"></a>
- **[Preparations](start-overview.md)**
- **[Getting Started with JavaScript](start-with-js.md)**
......@@ -2111,7 +2111,7 @@ let deviceName = gattClient.getDeviceName().then((data) => {
getRssiValue(callback: AsyncCallback&lt;number&gt;): void
Obtains the received signal strength indication (RSSI) of the peer BLE device. This method uses an asynchronous callback to return the result. It can be used only after a connection is set up by calling [connect](#connect-boolean).
Obtains the received signal strength indication (RSSI) of the peer BLE device. This method uses an asynchronous callback to return the result. It can be used only after a connection is set up by calling [connect](#connect).
**Parameters:**
......@@ -2140,7 +2140,7 @@ let rssi = gattClient.getRssiValue((err, data)=> {
getRssiValue(): Promise&lt;number&gt;
Obtains the RSSI of the peer BLE device. This method uses a promise to return the result. It can be used only after a connection is set up by calling [connect](#connect-boolean).
Obtains the RSSI of the peer BLE device. This method uses a promise to return the result. It can be used only after a connection is set up by calling [connect](#connect).
**Return values:**
......
......@@ -8,7 +8,7 @@ SystemCapability.DistributedDataManager.RelationalStore.Core
## Usage<a name="section42211227142416"></a>
The **resultSet** object is obtained by using [**RdbStore.query\(\)**](js-apis-data-rdb.md#section6231155031814).
The **resultSet** object is obtained by using [**RdbStore.query\(\)**](js-apis-data-rdb.md#query).
```
import dataRdb from '@ohos.data.rdb';
......@@ -795,4 +795,3 @@ Closes the result set.
})
```
......@@ -586,7 +586,7 @@ Obtains the size of the element and its position relative to the window.
## createIntersectionObserver<a name="section7425195215615"></a>
createIntersectionObserver\(param?: [ObserverParam](#table143341035121917)\):[Observer](#table4506633141711)
createIntersectionObserver\(param?: ObserverParam):Observer
Gets notified of the visibility of an element on the current page.
......
......@@ -61,8 +61,7 @@ Before creating a project, you need to install DevEco Studio. For details, see
![](figures/en-us_image_0000001148858818.png)
Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](https://gitee.com/openharmony/docs/blob/master/en/application-dev/quick-start/configuring-the-openharmony-app-signature.md). After the installation is complete, click the **Run** icon on the screen to open the application. **Hello World** is displayed in the center of the screen.
Before the installation, you must configure an application signature. For details, see [Configuring the OpenHarmony App Signature](../quick-start/configuring-openharmony-app-signature.md). After the installation is complete, click the **Run** icon on the screen to open the application. **Hello World** is displayed in the center of the screen.
![](figures/en-us_image_0000001158896538.png)
......@@ -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)
......
......@@ -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)
# 开发准备
## 任务说明
本文档适用于应用开发的初学者。通过构建一个简单的具有页面跳转功能的应用(如下图[预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/previewer-0000001054328973#ZH-CN_TOPIC_0000001056725592__section16523172216252)运行效果所示),熟悉应用开发流程。
为确保运行效果,本文以使用**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)继续下一步的学习。
# 使用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)
恭喜你,至此已成功完成快速入门-使用eTS语言开发。
# 使用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)
恭喜你,至此已成功完成快速入门-使用JS语言开发。
# 快速入门
- **[开发准备](start-overview.md)**
- **[使用JS语言开发](start-with-js.md)**
- **[使用eTS语言开发](start-with-ets.md)**
\ No newline at end of file
......@@ -20,7 +20,7 @@ Hap包签名工具支持本地签名需求的开发,为OpenHarmony应用提供
- 证书
OpenHarmony采用RFC5280标准构建X509证书信任体系。用于应用签名的OpenHarmony证书按层级可分为:根CA证书、子CA证书、三级实体证书,其中三级实体证书分为应用签名证书和profile签名证书。应用签名证书表示应用开发者的身份,可保证系统上安装的应用来源可追溯,profile签名证书实现对profile文件的签名进行验签,保证profile文件的完整性。
- HAP包
HAP(HarmonyOS Ability Package)是Ability的部署包,OpenHarmony应用代码围绕Ability组件展开,它是由一个或者多个Ability组成。
HAP(OpenHarmony Ability Package)是Ability的部署包,OpenHarmony应用代码围绕Ability组件展开,它是由一个或者多个Ability组成。
- profile文件
hap包中的描述文件,该描述文件描述了已授权的证书权限和设备ID信息等信息。
### 约束与限制
......@@ -354,6 +354,7 @@ java -jar hap-sign-tool.jar sign-app -keyAlias "oh-app1-key-v1" -signAlg "SHA256
## 常见问题
**1.执行[生成应用签名证书](#生成应用签名证书)命令时,控制台打印结果,无文件输出**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册