提交 f2bc024b 编写于 作者: G ge-yafang

update docs

Signed-off-by: Nge-yafang <geyafang@huawei.com>
上级 1d0dce03
......@@ -9,8 +9,6 @@
- 快速入门
- [开发准备](quick-start/start-overview.md)
- [使用ArkTS语言开发(Stage模型)](quick-start/start-with-ets-stage.md)
- [使用ArkTS语言开发(FA模型)](quick-start/start-with-ets-fa.md)
- [使用JS语言开发(FA模型)](quick-start/start-with-js-fa.md)
- 开发基础知识
- 应用程序包基础知识
- [应用程序包概述](quick-start/application-package-overview.md)
......
......@@ -3,8 +3,6 @@
- 快速入门
- [开发准备](start-overview.md)
- [使用ArkTS语言开发(Stage模型)](start-with-ets-stage.md)
- [使用ArkTS语言开发(FA模型)](start-with-ets-fa.md)
- [使用JS语言开发(FA模型)](start-with-js-fa.md)
- 开发基础知识
- 应用程序包基础知识
- [应用程序包概述](application-package-overview.md)
......
......@@ -29,8 +29,9 @@ OpenHarmony提供了一套UI开发框架,即方舟开发框架(ArkUI框架
随着系统的演进发展,OpenHarmony先后提供了两种应用模型:
- **FA(Feature Ability)模型:** OpenHarmony API 7开始支持的模型,已经不再主推。FA模型开发可见[FA模型开发概述](../application-models/fa-model-development-overview.md)
- **Stage模型:** OpenHarmony API 9开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”,因此称这种应用模型为Stage模型。Stage模型开发可见[Stage模型开发概述](../application-models/stage-model-development-overview.md)
- **Stage模型:** OpenHarmony API 9开始新增的模型,是目前主推且会长期演进的模型。在该模型中,由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”,因此称这种应用模型为Stage模型。Stage模型开发可见[Stage模型开发概述](../application-models/stage-model-development-overview.md)**快速入门以此为例提供开发指导。**
- **FA(Feature Ability)模型:** OpenHarmony API 7开始支持的模型,已经不再主推。FA模型开发可见[FA模型开发概述](../application-models/fa-model-development-overview.md)**快速入门章节不再对此展开提供开发指导。**
FA模型和Stage模型的整体架构和设计思想等更多区别,请见[应用模型解读](../application-models/application-model-description.md)
......@@ -39,8 +40,8 @@ FA模型和Stage模型的整体架构和设计思想等更多区别,请见[应
## 工具准备
1. 安装最新版[DevEco Studio](https://developer.harmonyos.com/cn/develop/deveco-studio)
1. 安装最新版[DevEco Studio](../../release-notes/OpenHarmony-v4.0-beta1.md#配套关系)
2. 请参考[配置开发环境](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/environment_config-0000001052902427-V3),完成**DevEco Studio**的安装和开发环境配置。
完成上述操作及基本概念的理解后,可参照[使用ArkTS语言进行开发(Stage模型)](start-with-ets-stage.md)[使用ArkTS语言开发(FA模型)](start-with-ets-fa.md)[使用JS语言开发(FA模型)](../quick-start/start-with-js-fa.md)中的任一章节进行下一步体验和学习。
\ No newline at end of file
完成上述操作及基本概念的理解后,可参照[使用ArkTS语言进行开发(Stage模型)](start-with-ets-stage.md)中的任一章节进行下一步体验和学习。
# 使用ArkTS语言开发(FA模型)
> **说明:**
>
> 请使用**DevEco Studio V3.0.0.601 Beta1**及更高版本。
>
> 为确保运行效果,本文以使用**DevEco Studio 3.1 Beta2**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。
## 创建ArkTS工程
1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** &gt; **New** &gt; **Create Project**来创建一个新工程。选择**Application**应用开发(本文以应用开发为例,**Atomic Service**对应为原子化服务开发),选择模板“**Empty Ability**”,点击**Next**进行下一步配置。
![createProject](figures/createProject.png)
2. 进入配置工程界面,**Compile SDK** 选择“**8**”(**Compile SDK**选择“**9**”时注意同步选择**Model** 为“**FA**”,此处以选择“**8**”为例),**Language**选择“**ArkTS**”,其他参数保持默认设置即可。
![chooseFAModel_ets](figures/chooseFAModel_ets.png)
> **说明:**
>
> DevEco Studio V3.0 Beta3及更高版本支持使用ArkTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。
>
> 低代码开发方式具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
>
> 如需使用低代码开发方式,请打开上图中的Enable Super Visual开关。
3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。
4. 工程创建完成后,在**entry > build-profile.json5**文件中,将targets中的runtimeOS改为“OpenHarmony”,然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。
## ArkTS工程目录结构(FA模型)
![zh-cn_image_0000001384652328](figures/zh-cn_image_0000001384652328.png)
- **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。
- **src &gt; main &gt; ets**:用于存放ArkTS源码。
- **src &gt; main &gt; ets &gt; MainAbility**:应用/服务的入口。
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages**:MainAbility包含的页面。
- **src &gt; main &gt; ets &gt; MainAbility &gt; pages &gt; index.ets**:pages列表中的第一个页面,即应用的首页入口。
- **src &gt; main &gt; ets &gt; MainAbility &gt; app.ets**:承载Ability生命周期。
- **src &gt; main &gt; resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源文件的分类](resource-categories-and-access.md#资源分类)
- **src &gt; main &gt; config.json**:模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用配置文件(FA模型)](application-configuration-file-overview-fa.md)
- **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。其中targets中可配置当前运行环境,默认为HarmonyOS。若需开发OpenHarmony应用,则需开发者自行修改为OpenHarmony。
- **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
- **build-profile.json5**:应用级配置信息,包括签名、产品配置等。
- **hvigorfile.ts**:应用级编译构建任务脚本。
## 构建第一个页面
1. 使用文本组件。
工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; ets &gt; MainAbility &gt; pages**”,打开“**index.ets**”文件,可以看到页面由Text组件组成。“**index.ets**”文件的示例如下:
```ts
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
```
2. 添加按钮。
在默认页面基础上,我们添加一个Button组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**index.ets**”文件的示例如下:
```ts
// index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
3. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001311334976](figures/zh-cn_image_0000001311334976.png)
## 构建第二个页面
1. 创建第二个页面。
- 新建第二个页面文件。在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; ets &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; ArkTS File**”,命名为“**second**”,点击“**Finish**”。可以看到文件目录结构如下:
![zh-cn_image_0000001311334932](figures/zh-cn_image_0000001311334932.png)
> **说明:**
>
> 开发者也可以在右键点击“**pages**”文件夹时,选择“**New &gt; Page**”,则无需手动配置相关页面路由。
- 配置第二个页面的路由。在config.json文件中的“module - js - pages”下配置第二个页面的路由“pages/second”。示例如下:
```json
{
"module": {
"js": [
{
"pages": [
"pages/index",
"pages/second"
]
}
]
}
}
```
2. 添加文本及按钮。
参照第一个页面,在第二个页面添加Text组件、Button组件等,并设置其样式。“**second.ets**”文件的示例如下:
```ts
// second.ets
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
```
## 实现页面间的跳转
页面间的导航可以通过[页面路由router](../reference/apis/js-apis-router.md)来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onClick事件,点击按钮时跳转到第二页。“**index.ets**”文件的示例如下:
```ts
// index.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮,以响应用户点击
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 跳转按钮绑定onClick事件,点击时跳转到第二页
.onClick(() => {
router.push({ url: 'pages/second' })
// 若为API 9工程,则可使用以下接口
// router.pushUrl({ url: 'pages/second' })
})
}
.width('100%')
}
.height('100%')
}
}
```
2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定onClick事件,点击按钮时返回到第一页。“**second.ets**”文件的示例如下:
```ts
// second.ets
// 导入页面路由模块
import router from '@ohos.router';
@Entry
@Component
struct Second {
@State message: string = 'Hi there'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text('Back')
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// 返回按钮绑定onClick事件,点击按钮时返回到第一页
.onClick(() => {
router.back()
})
}
.width('100%')
}
.height('100%')
}
}
```
3. 打开index.ets文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示:
![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png)
## 使用真机运行应用
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
2. 点击**File** &gt; **Project Structure...** &gt; **Project** &gt; **SigningConfigs** 界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示:
![signConfig](figures/signConfig.png)
3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示:
![zh-cn_image_0000001364254729](figures/zh-cn_image_0000001364254729.png)
恭喜您已经使用ArkTS语言开发(FA模型)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
# 使用ArkTS语言开发(Stage模型)
> **说明:**
>
> 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。
>
> 为确保运行效果,本文以使用**DevEco Studio 3.1 Beta2**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio)获取下载链接。
> **说明:**
>
> 请使用**DevEco Studio V3.0.0.900 Beta3**及更高版本。
>
> 为确保运行效果,本文以使用**DevEco Studio 4.0 Beta1**版本为例,点击[此处](../../release-notes/OpenHarmony-v4.0-beta1.md#配套关系)获取下载链接。
## 创建ArkTS工程
1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** &gt; **New** &gt; **Create Project**来创建一个新工程。选择**Application**应用开发(本文以应用开发为例,**Atomic Service**对应为原子化服务开发),选择模板“**Empty Ability**”,点击**Next**进行下一步配置。
对于不同API版本,创建对应的OpenHarmony工程的步骤不同。主要分为API 9之后的工程创建、API 9及API之前的工程创建两种。
此处分别以创建API 10和创建API 9的OpenHarmony工程为例,给出具体的指导。
### 创建API 10的OpenHarmony工程
1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** &gt; **New** &gt; **Create Project**来创建一个新工程。
2. 选择**Application**应用开发(本文以应用开发为例,Atomic Service对应为原子化服务开发),选择模板“**Empty Ability**”,点击**Next**进行下一步配置。
![createProject](figures/createProject.png)
2. 进入配置工程界面,**Compile SDK**选择“**9**”,**Model** 选择“**Stage**”,其他参数保持默认设置即可。
3. 进入配置工程界面,**Compile SDK**选择“**3.1.0(API 9)**”,其他参数保持默认设置即可。
![chooseStageModel](figures/chooseStageModel.png)
> **说明:**
>
> 支持使用ArkTS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。
>
> 支持使用ArkTS低代码开发方式。
>
> 低代码开发方式具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
>
>
> 如需使用低代码开发方式,请打开上图中的Enable Super Visual开关。
3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。
4. 工程创建完成后,在**entry > build-profile.json5**文件中,将targets中的runtimeOS改为“OpenHarmony”,然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。
4. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。
5. 工程创建完成后,在应用级**build-profile.json5**文件中,将**compileSdkVersion****compatibleSdkVersion**字段从**app**下迁移到当前选中的products中。当前生效的products可以通过点击编辑区域右上方![zh-cn_image_0000001609333677](figures/zh-cn_image_0000001609333677.png)图标进行查看。
![changeToAPI10](figures/changeToAPI10.png)
6. 请将**targetSdkVersion**从9改为10,并配置**runtimeOS**为“**OpenHarmony**”。
![targetSdkVersion](figures/targetSdkVersion.png)
7. 将其他各模块级别的build-profile.json5文件中targets字段下的runtimeOS配置删除。
![deleteRuntimeOS](figures/deleteRuntimeOS.png)
8. 单击Sync Now完成同步。此时工程对应为API 10的OpenHarmony工程。
### 创建API 9的OpenHarmony工程
1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** &gt; **New** &gt; **Create Project**来创建一个新工程。
2. 选择**Application**应用开发(本文以应用开发为例,Atomic Service对应为原子化服务开发),选择模板“**Empty Ability**”,点击**Next**进行下一步配置。
![createProject](figures/createProject.png)
3. 进入配置工程界面,**Compile SDK**选择“**3.1.0(API 9)**”,其他参数保持默认设置即可。
![chooseStageModel](figures/chooseStageModel.png)
> **说明:**
> 支持使用ArkTS低代码开发方式。
>
> 低代码开发方式具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
>
> 如需使用低代码开发方式,请打开上图中的Enable Super Visual开关。
## ArkTS工程目录结构(Stage模型)
4. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。
5. 在模块级**entry > build-profile.json5**文件中,将targets中的**runtimeOS**配置为“**OpenHarmony**”。
6. 单击Sync Now完成同步。此时工程对应为API 9的OpenHarmony工程。
## ArkTS工程目录结构(Stage模型)(API 10)
![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png)
- **AppScope > app.json5**:应用的全局配置信息。
- **AppScope &gt; app.json5**:应用的全局配置信息。
- **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。
- **src &gt; main &gt; ets**:用于存放ArkTS源码。
- **src &gt; main &gt; ets &gt; entryability**:应用/服务的入口。
- **src &gt; main &gt; ets &gt; pages**:应用/服务包含的页面。
- **src &gt; main &gt; resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源文件的分类](resource-categories-and-access.md#资源分类)
- **src &gt; main &gt; module.json5**:模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[module.json5配置文件](module-configuration-file.md)
- **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。其中targets中可配置当前运行环境,默认为HarmonyOS。若需开发OpenHarmony应用,则需开发者自行修改为OpenHarmony。
- **src &gt; main &gt; module.json5**:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[module.json5配置文件](module-configuration-file.md)
- **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。
- **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
- **oh_modules**:用于存放三方库依赖信息。关于原npm工程适配ohpm操作,请参考[历史工程手动迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)
- **build-profile.json5**:应用级配置信息,包括签名、产品配置等。
- **oh_modules**:用于存放三方库依赖信息。关于原npm工程适配ohpm操作,请参考[历史工程迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)
- **build-profile.json5**:应用级配置信息,包括签名signingConfigs、产品配置products等。其中products中的runtimeOS可配置当前运行环境,默认为"HarmonyOS",若需开发OpenHarmony应用,则需开发者自行修改为"OpenHarmony"。
- **hvigorfile.ts**:应用级编译构建任务脚本。
## ArkTS工程目录结构(Stage模型)(API 9)
![zh-cn_image_0000001364054489](figures/zh-cn_image_0000001364054489.png)
- **AppScope &gt; app.json5**:应用的全局配置信息。
- **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。
- **src &gt; main &gt; ets**:用于存放ArkTS源码。
- **src &gt; main &gt; ets &gt; entryability**:应用/服务的入口。
- **src &gt; main &gt; ets &gt; pages**:应用/服务包含的页面。
- **src &gt; main &gt; resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源文件的分类](resource-categories-and-access.md#资源分类)
- **src &gt; main &gt; module.json5**:模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[module.json5配置文件](module-configuration-file.md)
- **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。其中targets中的runtimeOS可配置当前运行环境,默认为"HarmonyOS",若需开发OpenHarmony应用,则需开发者自行修改为"OpenHarmony"。
- **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
- **oh_modules**:用于存放三方库依赖信息。关于原npm工程适配ohpm操作,请参考[历史工程迁移](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/project_overview-0000001053822398-V3#section108143331212)
- **build-profile.json5**:应用级配置信息,包括签名signingConfigs、产品配置products等。
- **hvigorfile.ts**:应用级编译构建任务脚本。
......@@ -127,7 +207,7 @@
![secondPage](figures/secondPage.png)
> **说明:**
> **说明:**
>
> 开发者也可以在右键点击“**pages**”文件夹时,选择“**New &gt; Page**”,则无需手动配置相关页面路由。
- 配置第二个页面的路由。在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; resources &gt; base &gt; profile**”,在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下:
......
# 使用JS语言开发(FA模型)
> **说明:**
>
> 为确保运行效果,本文以使用**DevEco Studio 3.1 Beta2**版本为例,点击[此处](https://developer.harmonyos.com/cn/develop/deveco-studio#download)获取下载链接。
## 创建JS工程
1. 若首次打开**DevEco Studio**,请点击**Create Project**创建工程。如果已经打开了一个工程,请在菜单栏选择**File** &gt; **New** &gt; **Create Project**来创建一个新工程。选择**Application**应用开发(本文以应用开发为例,**Atomic Service**对应为原子化服务开发),选择模板“**Empty Ability**”,点击**Next**进行下一步配置。
![createProject](figures/createProject.png)
2. 进入配置工程界面,**Compile SDK**选择“**8**”(**Compile SDK**选择“**9**”时注意同步选择 **Model** 为“**FA**”,此处以选择“**8**”为例),**Language**选择“**JS**”,其他参数保持默认设置即可。
![chooseFAModel_js](figures/chooseFAModel_js.png)
> **说明:**
>
> DevEco Studio V2.2 Beta1及更高版本支持使用JS[低代码开发](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/ide-low-code-overview-0000001480179573-V3)方式。
>
> 低代码开发方式具有丰富的UI界面编辑功能,通过可视化界面开发方式快速构建布局,可有效降低开发者的上手成本并提升开发者构建UI界面的效率。
>
> 如需使用低代码开发方式,请打开上图中的Enable Super Visual开关。
3. 点击**Finish**,工具会自动生成示例代码和相关资源,等待工程创建完成。
4. 工程创建完成后,在**entry > build-profile.json5**文件中,将targets中的runtimeOS改为“OpenHarmony”,然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。
## JS工程目录结构
![zh-cn_image_0000001435376433](figures/zh-cn_image_0000001435376433.png)
- **entry**:OpenHarmony工程模块,编译构建生成一个[HAP](../../glossary.md#hap)包。
- **src &gt; main &gt; js**:用于存放js源码。
- **src &gt; main &gt; js &gt; MainAbility**:应用/服务的入口。
- **src &gt; main &gt; js &gt; MainAbility &gt; i18n**:用于配置不同语言场景资源内容,比如应用文本词条、图片路径等资源。
- **src &gt; main &gt; js &gt; MainAbility &gt; pages**:MainAbility包含的页面。
- **src &gt; main &gt; js &gt; MainAbility &gt; app.js**:承载Ability生命周期。
- **src &gt; main &gt; resources**:用于存放应用/服务所用到的资源文件,如图形、多媒体、字符串、布局文件等。关于资源文件,详见[资源限定与访问](../ui/js-framework-resource-restriction.md)
- **src &gt; main &gt; config.json**:模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明,详见[应用配置文件(FA模型)](application-configuration-file-overview-fa.md)
- **build-profile.json5**:当前的模块信息 、编译信息配置项,包括buildOption、targets配置等。其中targets中可配置当前运行环境,默认为HarmonyOS。若需开发OpenHarmony应用,则需开发者自行修改为OpenHarmony。
- **hvigorfile.ts**:模块级编译构建任务脚本,开发者可以自定义相关任务和代码实现。
- **build-profile.json5**:应用级配置信息,包括签名、产品配置等。
- **hvigorfile.ts**:应用级编译构建任务脚本。
## 构建第一个页面
1. 使用文本组件。
工程同步完成后,在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.hml**”文件,设置Text组件内容。“**index.hml**”文件的示例如下:
```html
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
</text>
</div>
```
2. 添加按钮,并绑定onclick方法。
在默认页面基础上,我们添加一个button类型的input组件,作为按钮响应用户点击,从而实现跳转到另一个页面。“**index.hml**”文件的示例代码如下:
```html
<!-- index.hml -->
<div class="container">
<text class="title">
Hello World
</text>
<!-- 添加按钮,值为Next,并绑定onclick方法-->
<input class="btn" type="button" value="Next" onclick="onclick"></input>
</div>
```
3. 设置页面样式。
在“**Project**”窗口,点击“**entry &gt; src &gt; main &gt; js &gt; MainAbility &gt; pages&gt; index**”,打开“**index.css**”文件,可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“**index.css**”文件的示例如下:
```css
/* index.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 100px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 10px;
}
.btn {
font-size: 60px;
font-weight: bold;
text-align: center;
width: 40%;
height: 5%;
margin-top: 20px;
}
```
4. 在编辑窗口右上角的侧边工具栏,点击Previewer,打开预览器。第一个页面效果如下图所示:
![zh-cn_image_0000001311494592](figures/zh-cn_image_0000001311494592.png)
## 构建第二个页面
1. 创建第二个页面。
在“**Project**”窗口,打开“**entry &gt; src &gt; main &gt; js &gt; MainAbility**”,右键点击“**pages**”文件夹,选择“**New &gt; Page**”,命名为“**second**”,点击“**Finish**”,即完成第二个页面的创建。可以看到文件目录结构如下:
![zh-cn_image_0000001311334944](figures/zh-cn_image_0000001311334944.png)
2. 添加文本及按钮。
参照第一个页面,在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“**second.hml**”文件的示例如下:
```html
<!-- second.hml -->
<div class="container">
<text class="title">
Hi there
</text>
<!-- 添加按钮,值为Back,并绑定back方法-->
<input class="btn" type="button" value="Back" onclick="back"></input>
</div>
```
3. **设置页面样式。****second.css**”文件的示例如下:
```css
/* second.css */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.title {
font-size: 100px;
font-weight: bold;
text-align: center;
width: 100%;
margin: 10px;
}
.btn {
font-size: 60px;
font-weight: bold;
text-align: center;
width: 40%;
height: 5%;
margin-top: 20px;
}
```
## 实现页面间的跳转
页面间的导航可以通过[页面路由router](../reference/apis/js-apis-router.md)来实现。页面路由router根据页面url找到目标页面,从而实现跳转。使用页面路由请导入router模块。
1. 第一个页面跳转到第二个页面。
在第一个页面中,跳转按钮绑定onclick方法,点击按钮时跳转到第二页。“**index.js**”示例如下:
```js
// index.js
// 导入页面路由模块
import router from '@ohos.router';
export default {
onclick: function () {
router.push({
url: "pages/second/second"
})
}
}
```
2. 第二个页面返回到第一个页面。
在第二个页面中,返回按钮绑定back方法,点击按钮时返回到第一页。“**second.js**”示例如下:
```js
// second.js
// 导入页面路由模块
import router from '@ohos.router';
export default {
back: function () {
router.back()
}
}
```
3. 打开index文件夹下的任意一个文件,点击预览器中的![zh-cn_image_0000001311015192](figures/zh-cn_image_0000001311015192.png)按钮进行刷新。效果如下图所示:
![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png)
## 使用真机运行应用
1. 将搭载OpenHarmony标准系统的开发板与电脑连接。
2. 点击**File** &gt; **Project Structure...** &gt; **Project** &gt; **Signing Configs**界面勾选“**Automatically generate signature**”,等待自动签名完成即可,点击“**OK**”。如下图所示:
![signConfig](figures/signConfig.png)
3. 在编辑窗口右上角的工具栏,点击![zh-cn_image_0000001364054485](figures/zh-cn_image_0000001364054485.png)按钮运行。效果如下图所示:
![zh-cn_image_0000001311175132](figures/zh-cn_image_0000001311175132.png)
恭喜您已经使用JS语言开发(FA模型)完成了第一个OpenHarmony应用,快来[探索更多的OpenHarmony功能](../application-dev-guide.md)吧。
......@@ -5,8 +5,6 @@
- 快速入门
- [开发准备](quick-start/start-overview.md)
- [使用ArkTS语言开发(Stage模型)](quick-start/start-with-ets-stage.md)
- [使用ArkTS语言开发(FA模型)](quick-start/start-with-ets-fa.md)
- [使用JS语言开发(FA模型)](quick-start/start-with-js-fa.md)
- 开发基础知识
- 应用程序包基础知识
- [应用程序包概述](quick-start/application-package-overview.md)
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册