一、实验目标

1、学习使用快速启动模板创建小程序的方法；

2、学习不使用模板手动创建小程序的方法；

3、掌握HarmonyOS应用程序包结构、资源文件的使用；

4、掌握ArkTS的核心功能和语法基础知识。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1. 开发环境准备

下载并安装最新版DevEco Studio开发工具

配置HarmonyOS SDK（兼容版本5.1.1(19)）

1. 创建ArkTS工程

使用Empty Ability模板创建新工程

配置工程参数：Application类型，API Version 5.1.1(19)

1. 工程结构分析

工程主要包含以下重要目录和文件：

1. 构建第一个页面（Index.ets）

1）使用文本组件。 工程同步完成后，在Project窗口，单击entry > src > main > ets > pages，打开Index.ets文件，将页面从 RelativeContainer相对布局修改成Row/Column线性布局。 针对本文中使用文本/按钮来实现页面跳转/返回的应用场景，页面均使用 Row和 Column组件来组建布局。对于 更多复杂元素对齐的场景，可选择使用 RelativeContainer组件进行布局。更多关于UI布局的选择和使用，可见如何选择布局。

2）添加按钮。

在默认页面基础上，我们添加一个Button组件，作为按钮响应用户onClick事件，从而实现跳转到另一个页面。

3）在编辑窗口右上角的侧边工具栏，单击Previewer，打开预览器。

1. 创建第二个页面

1）创建第二个页面。 新建第二个页面文件。在Project窗口，打开entry > src > main > ets，右键单击pages文件夹，选择 New > ArkTS File，命名为Second，单击回车键。

配置第二个页面的路由。在Project窗口，打开entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二个页面的路由"pages/Second"。

2）添加文本及按钮。 参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。

1. 实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。如果需要实现更好的转场动效，推荐使用Navigation。

1）第一个页面跳转到第二个页面。在第一个页面中，跳转按钮绑定onClick事件，单击按钮时跳转到第二页。

2）第二个页面返回到第一个页面。在第二个页面中，返回按钮绑定onClick事件，单击按钮时返回到第一页。

代码部分：

index.ets:

// Index.ets
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户onClick事件
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 跳转按钮绑定onClick事件，单击时跳转到第二页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Next' button.`)
          // 获取UIContext
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();
          // 跳转到第二页
          router.pushUrl({ url: 'pages/Second' }).then(() => {
            console.info('Succeeded in jumping to the second page.')
          }).catch((err: BusinessError) => {
            console.error(`Failed to jump to the second page. Code is ${err.code},
message is ${err.message}`)
          })
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Second.ets:

// Second.ets
import { BusinessError } from '@kit.BasicServicesKit';
@Entry
@Component
struct Second {
  @State message: string = 'Hi there';
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
        // 返回按钮绑定onClick事件，单击按钮时返回到第一页
        .onClick(() => {
          console.info(`Succeeded in clicking the 'Back' button.`)
          // 获取UIContext
          let uiContext: UIContext = this.getUIContext();
          let router = uiContext.getRouter();
          try {
            // 返回第一页
            router.back()
            console.info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as BusinessError).code;
            let message = (err as BusinessError).message;
            console.error(`Failed to return to the first page. Code is ${code},
message is ${message}`)
          }
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

三、程序运行结果

列出程序的最终运行结果及截图。

运行效果：

第一个页面：显示"Hello World"标题和蓝色"Next"按钮，页面采用Column垂直布局，按钮样式为胶囊形状，蓝色背景。

第二个页面：点击Next按钮后跳转到显示标题和"Back"按钮的页面，点击Back按钮可返回首页。

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

遇到的问题及解决方案：

1. 环境配置问题：首次安装DevEco Studio时SDK下载缓慢

解决方案：更换下载镜像源，使用国内镜像加速下载

1. 路由配置错误：手动创建页面后忘记在main_pages.json中添加路由

解决方案：按照文档提示，在"src"数组中添加"pages/Second"

收获与体会：

通过本次实验，我成功完成了首个HarmonyOS应用的开发，深刻体会到从环境搭建到功能实现的完整开发流程。在使用DevEco Studio创建工程的过程中，我不仅熟悉了开发工具的基本操作，还掌握了ArkTS语言的声明式开发范式。在构建双页面跳转功能时，我深入理解了HarmonyOS的路由机制和页面生命周期，通过router模块实现了页面间的无缝导航。遇到路由配置问题时，通过查阅文档及时解决了main_pages.json的配置遗漏，这个过程让我认识到配置文件的重要性。这次实践不仅让我对HarmonyOS应用架构有了直观认识，更为后续复杂应用开发奠定了坚实基础，让我对移动应用开发产生了更浓厚的兴趣。