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

【鸿蒙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,查看后台日志信息,查看有无参数。

具体代码如下:

  1. 项目结构如下截图所示:

  2. LoginPage页面完整代码如下:

typescript 复制代码
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) // 背景颜色
}
  1. HomePage页面完整代码如下:
typescript 复制代码
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

相关推荐
SameX6 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX6 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos
Random_index14 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
鸿蒙自习室18 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu720 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr05751 天前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟4641 天前
初识ArkUI
harmonyos
SameX1 天前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠1 天前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤2 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙