鸿蒙实战：页面跳转传参

1. 实战概述

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

2. 实现步骤

2.1 创建鸿蒙项目

• 创建项目 - PassParams
  
  
  
  

2.2 编写首页代码

• 首页 - Index.ets
  
  
  
  

1. // 导入router模块
2. import router from '@ohos.router'
4. @Entry
5. @Component
6. struct Index {
7.   @State message: string = 'Index页面';
9.   build() {
10.     Row() {
11.       Column() {
12.         Text(this.message)
13.           .fontSize(40)
14.           .fontWeight(FontWeight.Bold)
15.           .foregroundColor(Color.Yellow)
16.           .margin('10')
17.         // 添加按钮，触发跳转
18.         Button('跳转')
19.           .fontSize(40)
20.           .width(150)
21.           .height(70)
22.           .backgroundColor('#44dd22')
23.           .foregroundColor('#ffffff')
24.           .onClick(() => {
25.             router.pushUrl({
26.               url: 'pages/Second',
27.               params: {
28.                 id: '20240101',
29.                 name: '陈燕文',
30.                 gender: '女',
31.                 age: 19,
32.                 major: '软件技术专业',
33.                 class: '2024软件1班',
34.                 telephone: '15893451170'
35.               }
36.             })
37.           })
38.       }
39.       .width('100%')
40.     }
41.     .height('100%')
42.     .backgroundColor('#00662F')
43.   }
44. }

复制代码

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

2.3 新建第二个页面

• 创建页面 - Second.ets
  
  
  
  

1. // 导入router模块
2. import router from '@ohos.router'
4. @Entry
5. @Component
6. struct Second {
7.   @State message: string = 'Second页面';
8.   @State student: string = '';
10.   aboutToAppear(): void {
11.     let record = router.getParams() as Record<string, string>;
12.     this.student = '学号：' + record['id'] + '\n'
13.       + '姓名：' + record['name'] + '\n'
14.       + '性别：' + record['gender'] + '\n'
15.       + '年龄：' + record['age'] + '\n'
16.       + '专业：' + record['major'] + '\n'
17.       + '班级：' + record['class'] + '\n'
18.       + '手机：' + record['telephone'];
19.   }
21.   build() {
22.     Row() {
23.       Column() {
24.         Text(this.message)
25.           .fontSize(40)
26.           .fontWeight(FontWeight.Bold)
27.           .foregroundColor(Color.Yellow)
28.           .margin('10')
29.         // 显示传参的内容
30.         Text(this.student)
31.           .fontSize(30)
32.           .fontColor(Color.Red)
33.           .margin('20')
34.         // 添加按钮，触发返回
35.         Button('返回')
36.           .fontSize(40)
37.           .width(150)
38.           .height(70)
39.           .backgroundColor('#44dd22')
40.           .foregroundColor('#ffffff')
41.           .onClick(() => {
42.             router.back();
43.           })
44.       }
45.       .width('100%')
46.     }
47.     .height('100%')
48.     .backgroundColor('#00008B')
49.   }
50. }

复制代码

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

3. 测试结果

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

4. 实战总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。