当前位置: 首页 > news >正文

【鸿蒙应用ArkTS开发系列】- 页面跳转及传参

先看下效果图

大致实现的功能点:

  1. 从Indext页面跳转到Second页面,传递两个参数,一个字符串,一个数量;
  2. Second获取Index页面传递的数据;
  3. Second页面点击返回弹窗;
  4. Second页面返回携带参数数据;
  5. Index获取Second页面回传数据。

下面我们一个一个讲解:

1、从Indext页面跳转到Second页面,并传递参数

 

import router from '@ohos.router';@Entry
@Component
struct Index {@State message: string = 'Index Page'@State fromSecondMessage: string  = ''build() {Column() {Column() {Text(`${this.message}`).width("300vp").height("60vp").textAlign(TextAlign.Center).fontSize("50fp").fontWeight(FontWeight.Normal)Button("Next").borderRadius("5vp").width("80%").height("50vp").margin({ top: "10vp" }).onClick(this.clickNext.bind(this))Text(this.fromSecondMessage).fontSize('20vp').textAlign(TextAlign.Center).margin({top:'10vp'})}.width("100%").height("100%").justifyContent(FlexAlign.Center)}.width("100%").height("100%")}clickNext() {router.pushUrl({url: "pages/Second",params: {name: '我是来自页面Index的数据',count: 100}}, router.RouterMode.Single)}
}

使用router 进行页面跳转,这里使用pushUrl进行页面跳转,除了pushUrl外,还可以使用replaceUrl进行页面替换,其中参数是RouterOptions对象,主要是url跟params,url是页面路径,params是传递数据,类型为object。

最后面参数是RouterMode.Single,

RouterMode9+

路由跳转模式。

系统能力: SystemCapability.ArkUI.ArkUI.Full。

名称

说明

Standard

标准模式。

目标页面会被添加到页面路由栈顶,无论栈中是否存在相同url的页面。

Single

单实例模式。

如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的页面会被移动到栈顶,移动后的页面为新建页。

如目标页面的url在页面栈中不存在同url页面,按标准模式跳转。

2、Second获取Index页面传递的数据

import router from '@ohos.router';@Entry
@Component
struct Second {@State message: string = 'Second Page'@State paramsFromIndex: object = router.getParams()build() {Row() {Column() {Text(this.message).margin({ top: "10vp" }).fontSize(50).fontWeight(FontWeight.Normal)Text(this.paramsFromIndex?.['name'] + ",count:" + this.paramsFromIndex?.['count']).margin({ top: "10vp" }).fontSize(20).fontWeight(FontWeight.Normal).margin({top:"10vp"})Button("Back").width("80%").height("50vp").margin({top:"10vp"})}.width('100%')}.height('100%')}}

使用router.getParams()获取Index页面传递的数据。

3、Second页面点击返回弹窗

router.enableBackPageAlert({message: "确认关闭当前页面吗?"})router.back()

调用enableBackPageAlert,触发返回询问弹窗,点击取消,不会触发back方法,点击确定,触发返回。

4、Second页面返回携带参数数据

router.back({url:'pages/Index',params: {src: "这是来自Second Page的数据"}})

5、Index获取Second页面回传数据

回到Index页面后怎么获取Second页面的回传数据呢,也是使用 router.getParams() 进行数据获取,那在什么时候函数里进行获取呢,可以跟Second页面中一样,使用

@State params: object = router.getParams()

这样定义获取吗,其实是不行的,重新回到Index页面后,上述代码并不会执行,这个时候我们应该在页面生命周期函数里进行获取。

  onPageShow() {this.fromSecondMessage = router.getParams()?.['src']}

本文到此结束。

相关文章:

【鸿蒙应用ArkTS开发系列】- 页面跳转及传参

先看下效果图 大致实现的功能点: 从Indext页面跳转到Second页面,传递两个参数,一个字符串,一个数量;Second获取Index页面传递的数据;Second页面点击返回弹窗;Second页面返回携带参数数据&#…...

StringBuilder 类

Java StringBuilder类是一个可变字符串缓冲区,它提供了丰富的方法可以方便地进行字符串操作。与Java StringBuffer类类似,Java StringBuilder类的主要作用是优化字符串的拼接操作,提高代码的效率。在本篇文章中,我们将详细介绍Jav…...

kubectl-k8s用户切换

kubernetes默认使用$HOME/.kube/config配置文件。可以在配置文件中定义多个USER和Cluster的上下文。所以就有两种方式切换用户同一个config中,切换不同用户上下文切换不同的config配置文件同config切换不同用户上下文查看config文件kubeconfig config view查看当前上…...

【面试题】三道面试题让你掌握JavaScript中的执行上下文与作用域以及闭包

前言大厂面试题分享 面试题库前后端面试题库 (面试必备) 推荐:★★★★★地址:前端面试题库大家好,笔者呢最近再回顾JavaScript知识时,又看到了JavaScript的一些较为常见的内容,仔细看了之后发现…...

计算机网络-- 应用层(day08)

计算机网络两种方式 网络应用程序运行再处于网络边缘的不同端系统上,通过彼此间的通信来共同完成某项任务。 开发一种新的网络应用首先要考虑的问题就是网络应用程序在各种端系统上的组织方式和它们之间的关系。 目前流行的主要有以下两种: 客户/服务器…...

English Learning - L2-5 英音地道语音语调 弹力双元音 [ɪə] [ʊə] [eə] 2023.03.6 周一

English Learning - L2-5 英音地道语音语调 弹力双元音 [ɪə] [ʊə] [eə] 2023.03.6 周一朗读节奏元音的长度元音发音在清辅音和浊辅音前的区别元音发音跟后面浊辅音节数的区别元音在重读音节中复习大小元音发音对比/ʌ/ 舌中音/ɒ/ 舌后音/ʊ/ 舌后音/ɪ/ 舌前音[ɑ:] VS […...

SpringBoot——统一功能处理

处理登陆拦截 上一片博客中讲到SpringAOP可以对页面进行拦截,我们可以用SpringAOP实现对登陆的拦截 但是由于拦截需要HttpSession对象,并且之后还需要页面重定向,因此在实际应用中,并不用SpringAOP进行登陆拦截,而是…...

ORACLE SQL格式化小数点

ORACLE SQL格式化小数点 select CONCAT(TO_CHAR(0.00100,‘990.999’),‘%’) as a0 , CONCAT(TO_CHAR(1100,‘990.999’),‘%’) as a1 , CONCAT(TO_CHAR(0.236100,‘990.999’),‘%’) as a2 , CONCAT(TO_CHAR(0.0200100,‘990.999’),‘%’) as a3 , CONCAT(TO_CHAR(1.0310…...

【信息学奥数】—— 第一部分 C++语言 知识总结

【信息学奥数】—— 第一部分 C语言 知识总结C语言一、C语言入门二、顺序结构程序设计运算符和表达式常量和变量标准数据类型数据输入输出三、控制结构程序设计if语句switch语句四、循环结构程序设计for语句while语句do-while语句五、数组一维数组二维数组字符数组六、函数七、…...

video层级过高,以及界面使用多个video时,在安卓APP上同时播放的问题(uniapp)

1、video层级过高的问题 问题一: 我的界面由于是自定义导航栏,所以使用video时,上滑界面video会直在最上层,盖着 头部导航栏 解决方法:使用cover-view,自定义头部使用cover-view替换view 问题二:自定义…...

C++基础了解-14-C++ 字符串

C 字符串 一、C 风格字符串 C 风格的字符串起源于 C 语言,并在 C 中继续得到支持。字符串实际上是使用 null 字符 \0 终止的一维字符数组。因此,一个以 null 结尾的字符串,包含了组成字符串的字符。 下面的声明和初始化创建了一个 RUNOOB …...

浅谈几种网络攻击及攻防原理

HTTP Flood攻击 https://zhuanlan.zhihu.com/p/337399808 HTTP Flood攻击是针对Web服务在第七层协议发起的攻击。第七层主要是应用层,是一些终端的应用,比如(各种文件下载)、浏览器、QQ等,可以将其理解为在电脑屏幕上可…...

Kafka消息中间件(Kafka与MQTT区别)

文章目录KafkaKafka重要原理Topic 主题Partition 分区Producer 生产者Consumer 消费者Broker 中间件Offset 偏移量Kafka与mqtt区别Kafka Kafka是一个分布式流处理平台,它可以快速地处理大量的数据流。Kafka的核心原理是基于发布/订阅模式的消息队列。Kafka允许多个…...

Go垃圾回收原理

术语介绍 赋值器:说白了就是你写的程序代码,在程序的执行过程中,可能会改变对象的引用关系,或者创建新的引用。 回收器:垃圾回收器的责任就是去干掉那些程序中不再被引用得对象。 STW:全称是stop the word,GC期间某个阶段会停止…...

Coredump-N: stack 空间被临时变量吃满,导致内存访问出现问题

文章目录 代码寄存器汇编代码 int main() {fun(0); #define S 0x0019fd08UL 、、 乘5 等0x81F128 char buff4[S]; char buff3[S]; char buff2[S]; char buff1[S]; char buff[S]; memset(buff, 0, sizeof(buff)); memset(buff4, 0, sizeof(buff)); memset(buff3, 0, sizeof(buf…...

GO中使用viper读取配置文件

文章目录 viper的使用例子一:例子二:viper的使用 ​ viper的源码地址https://github.com/spf13/viper,它是一个可以用来读取配置文件的工具。在项目中可以通过下面指令安装: go get github.com/spf13/viper​ 下面我们通过两个例子,来介绍一下viper在项目中应该如何使用…...

webpack dll 提升构建速度

DLL,动态链接库(Dynamic Link Library 或者 Dynamic-link Library),由微软公司提出。目的是为了节约应用程序所需的磁盘和内存空间。 在一个传统的非共享库中,如果两个程序调用同一个子程序,就会出现两份那…...

C++面向对象编程之三:初始化列表、类对象作为类成员、静态成员

初始化列表C提供了初始化列表语法,可以用于成员属性初始化。语法规则:无参构造函数():属性1(值1), 属性2(值2), ... { }有参构造函数(形参1, 形参2, ...):属性1(形参1), 属性2(形参2), ... { }example:写一个怪物类,有怪物id和血量…...

跨域问题解决方案

目录 1.同源策略 2.解决方案(后端) (1)在后端方法添加CrossOrigin (2)添加CORS过滤器 (3)实现WebMvcConfigure接口,重写addCorsMappings方法 3.解决方案(前端) (1)前端配置代理 1.同源策略 同源策略(Same origin policy)是一种约定&am…...

Vue3电商项目实战-购物车模块7【20-登录后-批量删除、21-登录后-选中状态修改数量、22-登录后-全选反选、23-登录后-修改规格、24-下单结算】

文章目录20-登录后-批量删除21-登录后-选中状态&修改数量22-登录后-全选反选23-登录后-修改规格24-下单结算20-登录后-批量删除 目标:完成批量删除选中商品,完成清空失效的商品 大概步骤: 完成cart.js模块中的批量删除actions的登录状态…...

【Oracle APEX开发小技巧12】

有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统,支持多语言对话(如 中文,英文,日语),语音情感(如 开心,悲伤)&#x…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析,分为​​已启动​​和​​未启动​​两种场景: 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​:当其他组件(如Activity、Service)通过ContentR…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

【WebSocket】SpringBoot项目中使用WebSocket

1. 导入坐标 如果springboot父工程没有加入websocket的起步依赖&#xff0c;添加它的坐标的时候需要带上版本号。 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId> </dep…...