# 构建第一个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应用。这只是鸿蒙应用开发的一小步，后续还有更多精彩的功能和技术等待我们去探索和学习。