鸿蒙实战：页面跳转传参
1. 实战概述[*]本次实战，学习如何在HarmonyOS应用中实现页面间参数传递。起首创建项目，编写首页代码，实现按钮跳转至第二个页面并传递参数。在第二个页面中接收并表现这些参数，末了测试应用以验证功能。
2. 实现步骤
2.1 创建鸿蒙项目
[*]创建项目 - PassParams
https://i-blog.csdnimg.cn/direct/20e1adb90a504eabb4f1944868ea3219.png
2.2 编写首页代码
[*]首页 - Index.ets
https://i-blog.csdnimg.cn/direct/edbecbd0b5c6433bad4abbca9e65e172.png
// 导入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
https://i-blog.csdnimg.cn/direct/b31f4295473a4a1a801be47739df55d7.png
// 导入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. 测试结果
[*]启动应用，表现首页
https://i-blog.csdnimg.cn/direct/810fee97eda94d42b9b97462b8f5f18d.png
[*]单击【跳转】按钮，跳转到第二个页面，而且传递了一组参数，第二个页面获取参数并表现
https://i-blog.csdnimg.cn/direct/04518512331b4603b249c1d21c08f89b.png
[*]单击【返回】按钮，返回首页
https://i-blog.csdnimg.cn/direct/69eca3abf55c4086a9e1a0d8ec4c8cb7.png
[*]操作录屏演示
https://i-blog.csdnimg.cn/direct/3fe6f594afd54ec89057174b308617b0.gif
4. 实战总结
[*]通过本次实战，我们学习了在HarmonyOS中创建项目、编写页面代码以及实现页面间参数传递。我们掌握了如何使用router模块进行页面跳转和参数接收，以及如何结构和表现页面内容。通过现实操作，加深了对HarmonyOS开辟流程的理解。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]