鸿蒙开发-UI-页面路由

news2024/11/25 22:45:29

鸿蒙开发-UI-组件

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

文章目录

一、基本概念

二、页面跳转

1.router基本概念

2.使用场景

3.页面跳转参数传递

三、页面返回

1.普通页面返回

2.页面返回前增加一个询问框

1.系统默认询问框

2.自定义询问框

总结


前言

前面系列文章,我们详细学习了鸿蒙开发UI组件相关知识,学习了组件基本使用方法、自定义样式以及各种组件的使用场景,本文将学习鸿蒙开发UI页面路由

一、基本概念

页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块,通过不同的url地址,可以方便地进行页面路由,轻松地访问不同的页面

二、页面跳转

1.router基本概念

2.使用场景

场景一:一个主页Home.ets和一个详情页Detail.ets,主页点击一个商品跳转到详情页,详情页点击返回回到主页

实现:pushUrl() + Standard

代码示例:

//step1:导入系统提供router模块
import router from '@ohos.router';

//step2:在Home.ets页面,定义跳转按钮的绑定事件
function onJumpClick(): void {
//step3:调用pushUrl,
// 1.定义跳转到目标url,
// 2.设置实例模式(默认standard,可以省略)
// 3.定义跳转状态的回调函数,如果成功打印成功信息,如果失败打印失败信息
  router.pushUrl({
    url: 'pages/Detail' 
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });
}

场景二:一个登录页Login.ets和一个个人中心页Profile.ets,登录页成功登录后跳转到个人中心页,同时销毁登录页,在返回时直接退出应用

实现:replaceUrl() + Standard

代码示例:

//step1:导入系统提供router模块
import router from '@ohos.router';

//step2:在Login.ets页面,定义跳转按钮的绑定事件
function onJumpClick(): void {
//step3:调用replaceUrl,
// 1.定义跳转到目标url,
// 2.设置实例模式(默认standard,可以省略)
// 3.定义跳转状态的回调函数,如果成功打印成功信息,如果失败打印失败信息
  router.replaceUrl({
    url: 'pages/Profile' 
  }, router.RouterMode.Standard, (err) => {
    if (err) {
      console.error(`Invoke replaceUrlfailed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke replaceUrlsucceeded.');
  });
}

场景三:一个设置页Setting.ets和一个主题切换页Theme.ets,从设置页点击主题选项,跳转到主题切换页。同时需要保证每次只有一个主题切换页存在于页面栈中,在返回时直接回到设置页

实现:pushUrl() + Single

代码示例:

//step1:导入系统提供router模块
import router from '@ohos.router';

//step2:在Setting.ets页面,定义跳转按钮的绑定事件
function onJumpClick(): void {
//step3:调用pushUrl,
// 1.定义跳转到目标url,
// 2.设置实例模式(默认standard,可以省略)
// 3.定义跳转状态的回调函数,如果成功打印成功信息,如果失败打印失败信息
  router.pushUrl({
    url: 'pages/Theme' 
  }, router.RouterMode.Single, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  });
}

场景四:一个搜索结果列表页SearchResult.ets和一个搜索结果详情页SearchDetail.ets,从搜索结果列表页点击某一项结果,跳转到搜索结果详情页。如果该结果已经被查看过,则不需要再新建一个详情页,而是直接跳转到已经存在的详情页

实现:replaceUrl() + Single

代码示例:

//step1:导入系统提供router模块
import router from '@ohos.router';

//step2:在SearchResult.ets页面,定义跳转按钮的绑定事件
function onJumpClick(): void {
//step3:调用replaceUrl,
// 1.定义跳转到目标url,
// 2.设置实例模式(默认standard,可以省略)
// 3.定义跳转状态的回调函数,如果成功打印成功信息,如果失败打印失败信息
  router.replaceUrl({
    url: 'pages/SearchDetail' 
  }, router.RouterMode.Single, (err) => {
    if (err) {
      console.error(`Invoke replaceUrlfailed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke replaceUrlsucceeded.');
  });
}

3.页面跳转参数传递

页面跳转源页面构造传递数据

代码示例

//step1:定义页面传递数据的模型
class DataModelInfo {
  age: number;
}

class DataModel {
  id: number;
  info: DataModelInfo;
}


function onJumpClick(): void {
//step2:定义跳转页面,传递的数据实例paramsInfo
  let paramsInfo: DataModel = {
    id: 123,
    info: {
      age: 20
    }
  };
//step3:pushUrl方法中 定义params并将页面跳转传递数据实例赋值给params参数
  router.pushUrl({
    url: 'pages/Detail',
    params: paramsInfo 
  }, (err) => {
    if (err) {
      console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);
      return;
    }
    console.info('Invoke pushUrl succeeded.');
  })
}

页面跳转目标页面接收传递数据

代码示例

const params = router.getParams(); // 获取传递过来的参数对象
const id = params['id']; // 获取id属性的值
const age = params['info'].age; // 获取age属性的值

三、页面返回

当用户在一个页面完成操作后,通常需要返回到上一个页面或者指定页面,这就需要用到页面返回功能。在返回的过程中,可能需要将数据传递给目标页,这就需要用到数据传递功能。

1.普通页面返回

用以下几种页面返回方式

方式一:返回到上一个页面

router.back();

方式二:返回到指定页面

router.back({
  url: 'pages/Home'
});

方式三:返回到指定页面并传递自定义参数信息

router.back({
  url: 'pages/Home',
  params: {
    info: '来自Home页'
  }
});

2.页面返回前增加一个询问框

在开发应用时,为了避免用户误操作或者丢失数据,有时候需要在用户从一个页面返回到另一个页面之前,弹出一个询问框,让用户确认是否要执行这个操作。

1.系统默认询问框

Router模块提供的两个方法可以实现返回前弹窗询问框,router.showAlertBeforeBackPage() + router.back()

router.showAlertBeforeBackPage()方法接收一个对象作为参数,该对象包含一个message属性,s类型为string,表示询问框的内容。如果调用成功,则会在目标界面开启页面返回询问框;如果调用失败,则会抛出异常,并通过err.code和err.message获取错误码和错误信息。

当用户点击“返回”按钮时,会弹出确认对话框,询问用户是否确认返回。选择“取消”将停留在当前页目标页;选择“确认”将触发router.back()方法,并根据参数决定如何执行跳转。

代码示例,通过step1,step2,step3 完成页面返回弹出系统默认询问框的操作

//step1:导入页面路由Router模块
import router from '@ohos.router';
//step2:定义一个返回按钮的点击事件处理函数
function onBackClick(): void {
  //step3: 调用router.showAlertBeforeBackPage()方法,设置返回询问框的信息
  try {
    router.showAlertBeforeBackPage({
      message: '您还没有完成支付,确定要返回吗?' // 设置询问框的内容
    });
  } catch (err) {
    console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);
  }

  //step4: 调用router.back()方法,返回上一个页面
  router.back();
}

2.自定义询问框

自定义询问框的方式,可以使用弹窗和自定义弹窗来实现,这样可以让应用界面与系统默认询问框有所区别,提高应用的用户体验度。实现方式是通过promptAction.showDialog()打开弹窗

代码示例

//step1:先导入Router模块
import router from '@ohos.router';
//step2:定义点击返回回调函数
function onBackClick() {
  
//step3:弹出自定义的询问框,message属性定义弹框提示信息,buttons数组定义弹框中按钮,then定义弹框按钮被点击后响应逻辑,catch定义弹框按钮被点击异常响应逻辑
  promptAction.showDialog({
    message: '您还没有完成支付,确定要返回吗?',
    buttons: [
      {
        text: '取消',
        color: '#FF0000'
      },
      {
        text: '确认',
        color: '#0099FF'
      }
    ]
  }).then((result) => {
    if (result.index === 0) {
      // 用户点击了“取消”按钮
      console.info('User canceled the operation.');
    } else if (result.index === 1) {
      // 用户点击了“确认”按钮
      console.info('User confirmed the operation.');
      // 调用router.back()方法,返回上一个页面
      router.back();
    }
  }).catch((err) => {
    console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);
  })
}

当用户点击step2定义的回调函数绑定的按钮时,会弹出自定义的询问框,询问用户是否确认返回。选择“取消”将停留在当前页目标页;选择“确认”将触发router.back()方法,并根据参数决定如何执行跳转。


总结

本文详细学习了鸿蒙开发UI页面跳转的相关知识,学习页面路由router基本概念,使用方法,页面路由两种跳转模式和两种实例模式的区别以及不同跳转模式和实例模式组合下的使用场景,学习了页面跳转后普通返回和带弹窗的返回使用方法,学习了页面带数据的跳转方式以及目标页面接收数据的方法,下文将学习鸿蒙UI开发组件导航。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1426396.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在Windows系统中执行DOS命令

目录 一、用菜单的形式进入DOS窗口 二、通过IE浏览器访问DOS窗口 三、复制、粘贴命令行 四、设置窗口风格 1.颜色 2.字体 3.布局 4.选项 五、Windows系统命令行 由于Windows系统彻底脱离了DOS操作系统,所以无法直接进入DOS环境,只能通过第三方软…

UE4学习笔记 FPS游戏制作3 添加武器

文章目录 章节目标为骨骼添加武器挂载点添加武器 章节目标 本章节为手部添加一个武器挂载点,并挂载一个武器 为骨骼添加武器挂载点 添加挂载点需要以一个动画片段为基础,为骨骼添加挂载点。 首先找到我们需要的动画片段,通常是idle 双击打…

8、应急响应-战前溯源反制主机蜜罐系统HFishHIDSElkeidWazuh

用途:个人学习笔记,欢迎指正 目录 背景: 一、潮源反制-平台部署-蜜罐-Hfish 二、溯源反制-平台部署-HIDS-Wazuh 三、溯源反制-平台部署-HlDS-Elkeid-hub 背景: 攻击者对服务器存在着各种威胁行为,作为安全人员&am…

React实现组件扩展机制

在java中,SPI机制是Java中提供的一种服务发现机制。同样,前端也很需要这种机制,这样可以做到组件可插拔,可替换,减少相互冗余。 快速使用 1.扩展点使用 通过使用Extension组件定义扩展点,通过name标记扩展…

数据结构—动态查找表

动态查找介绍 1. 动态查找的引入:当查找表以线性表的形式组织时,若对查找表进行插入、删除或排序操作,就必须移动大量的记录,当记录数很多时,这种移动的代价很大。 2. 动态查找表的设计思想:表结构本身是…

亚信安慧的AntDB数据库:稳定可靠的保障

亚信安慧AntDB数据库在运营商自主可控替换项目中的成功应用,具有极其重要的意义。该数据库的落地,不仅为这一项目注入了强大的支持力量,还在更大程度上提升了整体的运营效能。作为一种高效可靠的数据库解决方案,AntDB引入了先进的…

k8s存储之PV、PVC

在k8s集群中,资源存储会散落到各个工作节点上,这样对用资源调用很不方便,那么k8s是如何实现存储资源共享的呢,本文浅尝辄止的探讨一下,k8s是通过pv、pvc实现的。 一、PV、PVC的概念 1、持久卷(PV) pv是Pe…

防火墙用户认证、NAT、策略路由、DNS透明代理以及双机热备笔记

用户认证 防火墙管理员登录认证 --- 检验身份的合法性,划分身份权限 用户认证 --- 上网行为管理的一部分 用户,行为,流量 --- 上网行为管理三要素 用户认证的分类 上网用户认证 --- 三层认证 --- 所有的跨网段的通信都可以属于上网行为。…

【演讲比赛流程管理系统(C++版)】

一、演讲比赛程序需求 1.1、比赛规则 学校举行一场演讲比赛,共有12个人参加。比赛共两轮,第一轮为淘汰赛,第二轮为决赛 每名选手都有对应的编号,如10001~10012 比赛方式:分组比赛,每组6个人 第一轮分为两个小组&a…

Unity SRP 管线【第九讲:URP 点光源与聚光灯】

文章目录 CPU数据搜集GPU数据使用光照计算 CPU数据搜集 我们只能支持有限数量的其他灯。并将这些灯光数据(位置、颜色、阴影强度、方向光光源、灯光遮蔽Probe、灯光层级Mask)发送到GPU以供场景中所有物体渲染使用。 //ForwardLights.cs 额外光源数量与…

HarmonyOS4.0系统性深入开发33相对布局(RelativeContainer)

相对布局(RelativeContainer) 概述 RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个…

postgresql|数据库|pg_repack插件的部署和使用

一, 表和索引的膨胀现象 Postgres SQL 实现的MVCC的机制不同于 oracle , mysql innodb 的 undo tablespace 的机制。 表上所用的更新和删除等操作的行为,都不会实际的删除或修改,而是标记为死元祖 (dead rows or dead…

强化学习原理python篇08——actor-critic

强化学习原理python篇08——actor-critic 前置知识TD ErrorREINFORCEQACAdvantage actor-critic (A2C) torch实现步骤第一步第二步第三步训练结果 Ref 本章全篇参考赵世钰老师的教材 Mathmatical-Foundation-of-Reinforcement-Learning Actor-Critic Methods 章节,请…

灵伴科技(Rokid)借助 Knative 实现 AI 应用云原生 Serverless 化

作者:朱炜栋、元毅、子白 公司介绍 Rokid 创立于 2014 年,是一家专注于人机交互技术的产品平台公司,2018 年即被评为国家高新技术企业。Rokid 作为行业的探索者、领跑者,目前致力于 AR 眼镜等软硬件产品的研发及以 YodaOS 操作系…

【SpringBoot3】Spring 请求处理流程,自定义返回类型处理(HttpMessageConverter)

一、Spring Boot 请求处理 1、请求处理流程 Spring Boot 的接口请求处理流程主要基于 Spring MVC 架构,以下是详细的请求处理流程: 客户端发送请求:客户端发送HTTP请求到Spring Boot应用的URL。 DispatcherServlet 接收请求:Sp…

《C程序设计》上机实验报告(五)之一维数组二维数组与字符数组

实验内容&#xff1a; 1.运行程序 #include <stdio.h> void main( ) { int i,j,iRow0,iCol0,m; int x[3][4]{{1,11,22,33},{2,28,98,38},{3,85,20,89}}; mx[0][0]; for(i0;i<3;i) for(j0;j<4;j) if (x[i][j]>m) { mx[i][j]; iRowi…

QT学习日记 | 信号与槽

目录 前言 一、初始信号与槽 1、信号与槽的本质 2、信号与槽的使用 3、内置信号、内置槽函数与自定义信号、自定义槽函数 &#xff08;1&#xff09;文档查询 &#xff08;2&#xff09;自定义信号与内置槽函数的使用 4、信号与槽函数关联关系 5、带参数的信号与槽函数…

17- OpenCV:图像矩(Image Moments)和点多边形测试

目录 一、图像矩 1、矩的概念介绍 2、相关的API 3、代码演示 二、点多边形测试 1、概念介绍-点多边形测试 2、cv::pointPolygonTest 3、代码演示 一、图像矩 引言 在数字图像处理、计算机视觉与相关领域中&#xff0c;图像矩(Image moments)是指图像的某些特定像素灰…

如何搭建良好的软件测试环境?有什么作用?

在软件开发过程中&#xff0c;测试环境是非常重要的一环。它为软件测试提供了一个模拟真实生产环境的平台&#xff0c;以确保软件的质量和稳定性。那么如何搭建良好的测试环境呢?测试环境又有什么作用呢?卓码软件测评小编将进行以下解答。 软件测试环境是指在软件测试过程中…

Windows10更新失败 错误 0x80070643、KB5034441的解决方法之二

Windows10更新失败 错误 0x80070643、KB5034441 在知乎Windows10更新失败 错误 0x80070643、KB5034441的原因分析和几个解决方法 - 知乎 参考文章进行操作&#xff0c;更详细信息自己看上面链接。 我电脑的硬盘是mbr格式&#xff0c;而且没有划分恢复分区。 Microsoft Windo…