当前位置：首页 > news >正文

鸿蒙实战：页面跳转传参

news 2025/6/24 15:51:36

文章目录

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

1. 实战概述

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

2. 实现步骤

2.1 创建鸿蒙项目

创建项目 - PassParams

2.2 编写首页代码

首页 - Index.ets

// 导入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

// 导入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')}
}