构建第一个ArkTS应用：Hello World之旅
# 构建第一个ArkTS应用：Hello World之旅
在鸿蒙应用开发的领域中，ArkTS语言为我们提供了强大而便捷的开发方式。今天，就让我们一起踏上构建第一个ArkTS应用——Hello World的奇妙旅程。
## 一、创建ArkTS工程
1. 首先，我们要使用DevEco Studio这个强大的开发工具。启动DevEco Studio后，通过点击“Create Project”来创建工程。如果已经打开了一个工程，也可以在菜单栏选择“File > New > Project” 。
2. 接着，选择“Application”类型来创建项目（本文以该类型为例 ）。这里有“Ability”选项，我们选择“Empty Ability” ，然后点击“Next”。如果想要进行Native相关工程的开发，还可以选择“Native C++” ，更多模板的使用说明可以查阅相关工程模板介绍。
3. 进入配置工程界面后，“Compatible SDK”会显示当前默认的API Version ，这里我们选择合适的版本，其他参数可以采用默认设置。
4. 最后，点击“Finish” ，工具就会自动为我们生成代码和相关资源，这样一个ArkTS工程就创建完成啦。
## 二、ArkTS项目目录结构（Stage模型）
创建好工程后，我们来了解一下ArkTS项目的目录结构（基于Stage模型 ）：
- **AppScope > app.json5**：这里存储着应用的全局配置信息，详细内容可以参考app.json5配置文件。
- **src > main > ets**：这是存放ArkTS源码的地方。
- **src > main > ets > entryability**：应用的入口相关代码都在这里。
- **src > main > ets > pages**：应用页面的代码，像页面的扩展标识文件等都在这个目录。
- **src > main > resources**：这里存放着应用开发中会用到的各种资源文件，比如多媒体文件、字符串资源、布局文件等，关于资源文件的详细介绍可以查看相关资源分类。
- **src > main > module.json5**：模块配置文件，里面包含模块的配置信息、模块的发布信息、应用/服务的配置信息等，比如“abilities”数组配置应用/服务的相关信息，“deviceConfig”用于配置设备相关信息等。
- **build-profile.json5**：当前的构建配置文件，涵盖编译配置信息，像“buildOption”“target”等配置项。
- **oh-package.json**：模块包描述文件，在进行包管理操作时会用到。
- **etsconfig.json**：用于存储开发工具相关配置信息，比如入口文件（类型和路径 ）和体验版相关信息等。
- **oh-protodoc.json**：用于生成接口文档。
- **build-profile.json**：工程全局配置信息，包含“signingConfig”“Profile”“product”等，其中“product”可配置当前运行设备的相关信息。
- **oh-package-lock.json**：主要用来锁定依赖版本，像依赖覆盖（override ）、依赖关系声明（overrideDependencyMap ）和依赖版本范围等都在这个文件中管理。
## 三、构建第一个页面
1. 我们打开工程目录中的“Project”窗口，找到“entry > src > main > ets > pages” ，然后打开“Index.ets”文件，开始进行页面的编写。在这个文件中，我们使用“Row”和“Column”组件来布局页面，对于更多的组件使用可以参考相关组件介绍。以下是“Index.ets”文件的初始代码示例：
```ets
// Index.ets
@Entry
@Component
struct Index {
message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
}
```
2. 为了让页面更具交互性，我们添加一个“Button”组件，用来响应用户的点击操作，从而实现跳转到另一个页面。修改后的“Index.ets”文件代码如下：
```ets
// Index.ets
@Entry
@Component
struct Index {
message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，跳转到第二个页面
Button('Next')
.fontSize(16)
.backgroundColor(0x1890ff)
.width(120)
.height(40)
.cornerRadius(10)
}
.width('100%')
}
}
```
3. 编写好代码后，我们在编辑器窗口上方点击调试工具栏中的“Previewer” ，打开预览器，就可以看到第一个页面呈现出“Hello World”和一个“Next”按钮的效果啦。
## 四、构建第二个页面
1. 创建第二个页面文件：在“Project”窗口中，打开“entry > src > main > ets” ，右键点击“pages”文件夹，选择“New > ArkTS File” ，命名为“Second” ，点击“OK” ，就可以看到文件目录结构新增了相关文件。
2. 编写第二个页面代码：参考第一个页面的代码，在第二个页面添加“Text”“Button”等组件，并设置其样式。“Second.ets”文件的代码示例如下：
```ets
// Second.ets
@Entry
@Component
struct Second {
message: string = 'Hi there'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Back')
.fontSize(16)
.backgroundColor(0x1890ff)
.width(120)
.height(40)
.cornerRadius(10)
}
.width('100%')
}
}
```
## 五、实现页面间的跳转
页面间的跳转可以通过路由模块“router”来实现。页面路由“router”会根据页面栈找到目标页面，从而实现跳转。
1. 在第一个页面中，实现跳转到第二个页面：在“Index.ets”文件中添加如下代码，当点击“Next”按钮时，跳转到第二个页面。
```ets
// Index.ets
import { router } from '@ohos.router';
@Entry
@Component
struct Index {
message: string = 'Hello World'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，跳转到第二个页面
Button('Next')
.fontSize(16)
.backgroundColor(0x1890ff)
.width(120)
.height(40)
.cornerRadius(10)
.onClick(() => {
router.pushUrl({
url: 'pages/Second',
params: {
message: 'Hi there'
}
}).then(() => {
console.info('Succeeded in clicking the "Next" button.')
}).catch((err) => {
console.error('Failed to jump to the second page. Code is:'+ err.code + ', message is:'+ err.message)
})
})
}
.width('100%')
}
}
```
2. 在第二个页面中，实现回到第一个页面：在“Second.ets”文件中添加如下代码，当点击“Back”按钮时，回到第一个页面。
```ets
// Second.ets
import { router } from '@ohos.router';
@Entry
@Component
struct Second {
message: string = 'Hi there'
build() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Back')
.fontSize(16)
.backgroundColor(0x1890ff)
.width(120)
.height(40)
.cornerRadius(10)
.onClick(() => {
router.back()
.then(() => {
console.info('Succeeded in returning to the first page.')
})
.catch((err) => {
console.error('Failed to return to the first page. Code is:'+ err.code + ', message is:'+ err.message)
})
})
}
.width('100%')
}
}
```
3. 打开“Index.ets”文件，点击上方的“预览”按钮进行预览，就可以看到页面间跳转的效果啦。
通过以上步骤，我们成功构建了一个包含两个页面且能实现页面跳转的ArkTS应用。这只是鸿蒙应用开发的一小步，后续还有更多精彩的功能和技术等待我们去探索和学习。