提升网站知名度,学校网站建设要点,用jsp做的网站需要什么工具栏,小程序开发平台哪家的好一些【鸿蒙HarmonyOS NEXT】页面之间相互传递参数 一、环境说明二、页面之间相互传参 一、环境说明 DevEco Studio 版本#xff1a; API版本#xff1a;以12为主
二、页面之间相互传参
说明#xff1a; 页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页… 【鸿蒙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 Recordstring, 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 Recordstring, 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
