【鸿蒙HarmonyOS NEXT】页面之间相互传递参数

一、环境说明

1. DevEco Studio 版本：
   

2. API版本：以12为主
   

二、页面之间相互传参

说明： 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。

需求： 我们现在模拟用户从登录页面（如页面名称为LoginPage）调整到首页（HomePage），将用户登录信息传递给HomePage，当从HomePage返回到登录页面时也将HomePage的数据传递给LoginPage页面。

具体实现步骤如下：

1. 新建项目取名为pageparameter的工程，当工程被创建成功后，默认只有一个Index.ets页面。
2. 将Index页面名称改成LoginPage，作为登录页面。
3. 在main_pages.json中将原来的Index改成LoginPage。
4. 修改LoginPage的UI布局，添加必要的几个UI组件测试。
5. 新建HomePage页面，并添加几个必要的测试组件。
6. 点击跳转按钮，从LoginPage跳转到HomePage，查看HomePage页面内容有无变化，并查看后台日志信息，查看有无页面传递参数。
7. 点击返回上一页按钮，从LoginPage跳转到HomePage，查看后台日志信息，查看有无参数。

具体代码如下：
8. 项目结构如下截图所示：

9. LoginPage页面完整代码如下：

import { router } from '@kit.ArkUI';@Entry
@Component
struct Index {@State message: string = '登录页';@State btnMsg: string = '登录';@State account: string = ''; // 账号状态变量@State password: string = ''; // 密码状态变量@State isShowProgress: boolean = false; // 显示进度指示器的状态变量// 页面每次显示时都会调用该函数，这里用于测试接收页面传参onPageShow(): void {if (router.getParams() !== undefined && router.getParams() !== null) {let record = router.getParams() as Record<string, string>;if (record !== undefined && record !== null) {let msg = record['msg']console.info('接收到HomePage页面的参数：', msg)}}}build() {Column() {Text(this.message).id('HelloWorld').fontSize(20).fontWeight(FontWeight.Bold).width('100%').height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5)Image($r('app.media.startIcon')).width(150).height(150).margin({ top: 40, bottom: 40 })TextInput({ placeholder: '请输入手机号' }).maxLength(11)// 最大长度.type(InputType.Number)// 输入类型为数字.inputStyle()// 应用自定义样式.onChange((value: string) => {this.account = value; // 更新账号状态})Line().lineStyle() // 应用自定义Line样式// 密码输入框TextInput({ placeholder: '请输入密码' }).maxLength(12)// 最大长度.type(InputType.Password)// 输入类型为密码.inputStyle()// 应用自定义样式.onChange((value: string) => {// TODO: 生产环境需要使用正则表达式对手机号进行验证this.password = value; // 更新密码状态})Line().lineStyle() // 应用自定义Line样式Button(this.btnMsg).width('80%').margin({ top: 100 }).height(50).onClick(() => {if (this.account === undefined || this.account === '') {console.info('请输入账号')return}if (this.password === undefined || this.password === '') {console.info('请输入密码')return}router.pushUrl({url: 'pages/HomePage',params: {account: this.account,password: this.password}})})}.height('100%').width('100%').padding(0)}
}// TextInput组件的自定义样式扩展
@Extend(TextInput)
function inputStyle() {.placeholderColor(Color.Gray) // 占位符颜色.height(50) // 输入框高度.fontSize(15) // 字体大小.backgroundColor(0xF1F3F5) // 背景颜色.width('90%') // 宽度为父组件的100%.padding({ left: 12 }) // 左侧填充.margin({ top: 15 }) // 上方边距
}// Line组件的自定义样式扩展
@Extend(Line)
function lineStyle() {.width('100%') // 宽度为父组件的100%.height(1) // 高度.backgroundColor(0xF1F3F5) // 背景颜色
}

10. HomePage页面完整代码如下：

import { Router, router } from '@kit.ArkUI';@Entry
@Component
struct HomePage {@State message: string = '首页';// 获取前一个页面传递过来的数据@State account: string = ''@State password: string = ''aboutToAppear(): void {if (router.getParams() !== undefined && router.getParams() !== null) {let record = router.getParams() as Record<string, string>;if (record !== undefined && record !== null) {this.account = record['account']this.password = record['password']console.info('接收到前一个页面的参数：', JSON.stringify(record))}}}build() {Column() {Text(this.message).fontSize(30).width('100%').height(50).textAlign(TextAlign.Center).backgroundColor(0xF1F3F5)Blank().height(120)Text(`接收到的用户名：${this.account}`).fontSize(20).width('100%').height(50).padding({ left: 12, right: 12 })Text(`接收到的密码：${this.password}`).fontSize(20).width('100%').height(50).padding({ left: 12, right: 12 })Button('返回上一页').width('80%').margin({ top: 100 }).height(50).onClick(() => {// 返回登录页面router.showAlertBeforeBackPage({message: '确认返回上一页吗？'})router.back({url: 'pages/LoginPage',params: {msg: 'homepage'}})})}.height('100%').width('100%')}
}

编译运行测试查看结果：

1. 用户从登录页面（如页面名称为LoginPage）跳转到首页（HomePage），将用户登录的账号和密码进行传递，效果如下图所示：
   
   输入账号和密码，点击登录，页面进行跳转，效果如下：
   

2. 用户从首页（HomePage）返回到登录页面（LoginPage）,并点击弹出中的【确定】按钮，将首页数据回传给登录页，效果如下图所示：
   
   登录页面接收到的参数为：homepage