鸿蒙实战：页面跳转传参

文章目录

[1. 实战概述](#1. 实战概述)
[2. 实现步骤](#2. 实现步骤)
- [2.1 创建鸿蒙项目](#2.1 创建鸿蒙项目)
- [2.2 编写首页代码](#2.2 编写首页代码)
- [2.3 新建第二个页面](#2.3 新建第二个页面)
[3. 测试效果](#3. 测试效果)
[4. 实战总结](#4. 实战总结)

1. 实战概述

本次实战，学习如何在HarmonyOS应用中实现页面间参数传递。首先创建项目，编写首页代码，实现按钮跳转至第二个页面并传递参数。在第二个页面中接收并显示这些参数，最后测试应用以验证功能。

2. 实现步骤

2.1 创建鸿蒙项目

创建项目 - PassParams

2.2 编写首页代码

首页 - Index.ets

ts 复制代码

// 导入router模块
import router from '@ohos.router'

@Entry
@Component
struct Index {
  @State message: string = 'Index页面';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .foregroundColor(Color.Yellow)
          .margin('10')
        // 添加按钮，触发跳转
        Button('跳转')
          .fontSize(40)
          .width(150)
          .height(70)
          .backgroundColor('#44dd22')
          .foregroundColor('#ffffff')
          .onClick(() => {
            router.pushUrl({
              url: 'pages/Second',
              params: {
                id: '20240101',
                name: '陈燕文',
                gender: '女',
                age: 19,
                major: '软件技术专业',
                class: '2024软件1班',
                telephone: '15893451170'
              }
            })
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#00662F')
  }
}

代码说明 ：这段代码是一个使用HarmonyOS开发框架的组件，用于创建一个名为Index的页面。页面中包含一个文本消息和一个按钮。点击按钮时，会触发页面跳转至名为Second的页面，并传递一系列参数。页面的背景颜色设置为深绿色(#00662F)。

2.3 新建第二个页面

创建页面 - Second.ets

ts 复制代码

// 导入router模块
import router from '@ohos.router'

@Entry
@Component
struct Second {
  @State message: string = 'Second页面';
  @State student: string = '';

  aboutToAppear(): void {
    let record = router.getParams() as Record<string, string>;
    this.student = '学号：' + record['id'] + '\n'
      + '姓名：' + record['name'] + '\n'
      + '性别：' + record['gender'] + '\n'
      + '年龄：' + record['age'] + '\n'
      + '专业：' + record['major'] + '\n'
      + '班级：' + record['class'] + '\n'
      + '手机：' + record['telephone'];
  }

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(40)
          .fontWeight(FontWeight.Bold)
          .foregroundColor(Color.Yellow)
          .margin('10')
        // 显示传参的内容
        Text(this.student)
          .fontSize(30)
          .fontColor(Color.Red)
          .margin('20')
        // 添加按钮，触发返回
        Button('返回')
          .fontSize(40)
          .width(150)
          .height(70)
          .backgroundColor('#44dd22')
          .foregroundColor('#ffffff')
          .onClick(() => {
            router.back();
          })
      }
      .width('100%')
    }
    .height('100%')
    .backgroundColor('#00008B')
  }
}

代码说明 ：这段代码定义了一个名为Second的HarmonyOS页面组件，它接收从Index页面传递的参数，并在页面上显示这些参数。页面背景为深蓝色(#00008B)，包含一个返回按钮，点击后可返回上一页。

3. 测试效果

启动应用，显示首页
单击【跳转】按钮，跳转到第二个页面，并且传递了一组参数，第二个页面获取参数并显示
单击【返回】按钮，返回首页
操作录屏演示

4. 实战总结

通过本次实战，我们学习了在HarmonyOS中创建项目、编写页面代码以及实现页面间参数传递。我们掌握了如何使用router模块进行页面跳转和参数接收，以及如何布局和显示页面内容。通过实际操作，加深了对HarmonyOS开发流程的理解。