---

明白了！我会在文章中同时为每一段代码加上详细的注释，帮助你更好地理解。

---

创建第一个ArkTS应用

步骤1：创建项目

首先，打开 DevEco Studio，然后点击 Create Project 来创建一个新项目。你也可以通过菜单栏中的 File > New > Create Project 来进行创建。

选择 Application 类型，然后在模板选择界面选择 Empty Ability 模板，点击 Next。

接下来，选择你想要支持的最低API版本，建议选择 5.0.0(12)，其余选项可以保持默认。

点击 Finish，工具将会自动为你创建项目文件，并生成相关代码和资源。

---

步骤2：了解项目结构

在创建项目后，你将会看到一个类似如下的文件夹结构：

• AppScope > app.json5：这是应用程序的全局配置文件。

• entry > src > main > ets：这里是应用的 ArkTS 源代码文件夹。

  • entryability：存放应用的入口文件。
  • pages：存放不同页面的文件。
  • resources：存放图片、布局等资源文件。
  • module.json5：模块配置文件。

• build-profile.json5：编译和构建设置。

• hvigorfile.ts：构建任务脚本文件。

---

步骤3：编辑首页

现在，我们开始编辑首页的代码。在 Project 窗口打开 Index.ets 文件，你将看到一个简单的页面布局。以下是示例代码：

// Index.ets 文件
@Entry  // 标记为入口结构体，应用启动时会加载此页面
@Component  // 标记该结构体为一个组件
struct Index {
  @State message: string = 'Hello World'  // 定义一个状态变量 message，初始值为 'Hello World'

  build() {
    // 使用 Row 布局来创建一个行容器，适用于横向排列子元素
    Row() {  
      Column() {  // 创建一个列容器，适用于纵向排列子元素
        // 创建一个文本组件来显示状态变量 message 的值
        Text(this.message)  
          .fontSize(50)  // 设置字体大小为 50
          .fontWeight(FontWeight.Bold)  // 设置字体加粗
      }
      .width('100%')  // 设置列容器的宽度为 100%
    }
    .height('100%')  // 设置行容器的高度为 100%
  }
}

代码解析：

• @Entry：这个注解表示这个组件是应用程序的入口，应用启动时会显示这个页面。
• @Component：将结构体标记为组件，表示它是一个 UI 元素，可以在屏幕上显示。
• @State：标记 message 变量为可变状态，值改变时界面会自动更新。
• Row() 和 Column()：用于布局的容器，分别表示横向和纵向排列。
• Text()：用于显示文本信息，这里显示的是 message 变量的值。

---

步骤4：添加跳转按钮

接下来，我们在首页上添加一个按钮，点击后跳转到第二个页面。以下是添加按钮的代码：

// Index.ets 文件中的更新代码
@Entry  // 标记为入口结构体
@Component  // 标记为组件
struct Index {
  @State message: string = 'Hello World'  // 状态变量 message

  build() {
    Row() {
      Column() {
        // 显示消息的文本组件
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        
        // 创建一个按钮，点击后跳转到第二个页面
        Button() {  
          Text('Next')  // 按钮上的文本内容
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)  // 设置按钮类型为胶囊型
        .backgroundColor('#0D9FFB')  // 设置按钮背景颜色
        .width('40%')  // 设置按钮宽度
        .height('5%')  // 设置按钮高度
        .onClick(() => {  // 设置按钮点击事件
          router.pushUrl({ url: 'pages/Second' })  // 跳转到第二个页面
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

代码解析：

• Button()：用于创建一个按钮，按钮内有一段文本显示 “Next”。
• onClick()：为按钮添加点击事件，当按钮被点击时，会触发跳转事件。
• router.pushUrl()：调用路由跳转方法，跳转到 Second 页面（需要事先创建此页面）。

---

步骤5：创建第二个页面

现在我们来创建一个第二个页面。首先，在 pages 文件夹内创建一个 Second.ets 文件，并编写以下代码：

// Second.ets 文件
@Entry
@Component
struct Second {
  build() {
    // 显示第二个页面的文本
    Column() {
      Text('Welcome to the Second Page!')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
    .height('100%')
  }
}

代码解析：

• Second.ets 页面显示一条欢迎信息，表明跳转成功。

---

通过这些步骤，你已经完成了一个简单的 ArkTS 应用程序，其中包括了页面跳转功能。

如果你有其他问题或需要进一步的帮助，请告诉我！