【鸿蒙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

相关推荐
小脑斧爱吃鱼鱼17 分钟前
鸿蒙项目笔记(1)
笔记·学习·harmonyos
鸿蒙布道师1 小时前
鸿蒙NEXT开发对象工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
zhang1062091 小时前
HarmonyOS 基础组件和基础布局的介绍
harmonyos·基础组件·基础布局
马剑威(威哥爱编程)1 小时前
在HarmonyOS NEXT 开发中,如何指定一个号码,拉起系统拨号页面
华为·harmonyos·arkts
GeniuswongAir3 小时前
Flutter极速接入IM聊天功能并支持鸿蒙
flutter·华为·harmonyos
90后的晨仔6 小时前
鸿蒙ArkUI框架中的状态管理
harmonyos
别说我什么都不会1 天前
OpenHarmony 5.0(API 12)关系型数据库relationalStore 新增本地数据变化监听接口介绍
api·harmonyos
MardaWang1 天前
HarmonyOS 5.0.4(16) 版本正式发布,支持wearable类型的设备!
华为·harmonyos
余多多_zZ1 天前
鸿蒙学习手册(HarmonyOSNext_API16)_应用开发UI设计:Swiper
学习·ui·华为·harmonyos·鸿蒙系统
斯~内克1 天前
鸿蒙网络通信全解析:从网络状态订阅到高效请求实践
网络·php·harmonyos