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

news2024/11/24 4:57:26

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

一、环境说明
二、页面之间相互传参

一、环境说明

DevEco Studio 版本：
API版本：以12为主

二、页面之间相互传参

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

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

具体实现步骤如下：

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

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%')
  }
}

编译运行测试查看结果：

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

输入账号和密码，点击登录，页面进行跳转，效果如下：
用户从首页（HomePage）返回到登录页面（LoginPage）,并点击弹出中的【确定】按钮，将首页数据回传给登录页，效果如下图所示：

登录页面接收到的参数为：homepage