【HarmonyOS应用开发】UIAbility实践第一部分（五）

news2024/11/16 3:47:49

在这里插入图片描述

一、UIAbility概述

1、UIAbility是一种包含用户界面的应用组件，主要用于和用户进行交互。UIAbility也是系统调度的单元，为应用提供窗口在其中绘制界面。
2、每一个UIAbility实例，都对应于一个最近任务列表中的任务。
3、一个应用可以有一个UIAbility，也可以有多个UIAbility，如下图所示。例如浏览器应用可以通过一个UIAbility结合多页面的形式让用户进行的搜索和浏览内容；而聊天应用增加一个“外卖功能”的场景，则可以将聊天应用中“外卖功能”的内容独立为一个UIAbility，当用户打开聊天应用的“外卖功能”，查看外卖订单详情，此时有新的聊天消息，即可以通过最近任务列表切换回到聊天窗口继续进行聊天对话。
4、一个UIAbility可以对应于多个页面，建议将一个独立的功能模块放到一个UIAbility中，以多页面的形式呈现。例如新闻应用在浏览内容的时候，可以进行多页面的跳转使用。

在这里插入图片描述

二、UIAbility内页面的跳转和数据传递

UIAbility的数据传递包括有UIAbility内页面的跳转和数据传递、UIAbility间的数据跳转和数据传递，本章节主要讲解UIAbility内页面的跳转和数据传递。在一个应用包含一个UIAbility的场景下，可以通过新建多个页面来实现和丰富应用的内容。这会涉及到UIAbility内页面的新建以及UIAbility内页面的跳转和数据传递。打开DevEco Studio，选择一个Empty Ability工程模板，创建一个工程，例如命名 MyApplication。

  • 在src/main/ets/entryability目录下，初始会生成一个UIAbility文件EntryAbility.ts。可以在EntryAbility.ts文件中根据业务需要实现UIAbility的生命周期回调内容。
  • 在src/main/ets/pages目录下，会生成一个Index页面。这也是基于UIAbility实现的应用的入口页面。可以在Index页面中根据业务需要实现入口页面的功能。
  • 在src/main/ets/pages目录下，右键New->Page，新建一个Second页面，用于实现页面间的跳转和数据传递。

为了实现页面的跳转和数据传递，需要新建一个页面。在原有Index页面的基础上，新建一个页面，例如命名为Second.ets。

页面间的导航可以通过页面路由router模块来实现。页面路由模块根据页面url找到目标页面，从而实现跳转。通过页面路由模块，可以使用不同的url访问不同的页面，包括跳转到UIAbility内的指定页面、用UIAbility内的某个页面替换当前页面、返回上一页面或指定的页面等。具体使用方法请参见ohos.router (页面路由)。

2.1 页面跳转和参数接收

在使用页面路由之前，需要先导入router模块，如下代码所示。

import router from '@ohos.router';

页面跳转的几种方式，根据需要选择一种方式跳转即可。

方式一：API9及以上，router.pushUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，移动后的页面为新建页，原来的页面仍然存在栈中，页面栈的元素数量不变；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量会加1。

说明

  • 当页面栈的元素数量较大或者超过32时，可以通过调用router.clear()方法清除页面栈中的所有历史页面，仅保留当前页面作为栈顶页面。
router.pushUrl({
  url: 'pages/Second',  
  params: {  
    src: 'Index页面传来的数据', 
  }
}, router.RouterMode.Single)

方式二：API9及以上，router.replaceUrl()方法新增了mode参数，可以将mode参数配置为router.RouterMode.Single单实例模式和router.RouterMode.Standard多实例模式。

  • 在单实例模式下：如果目标页面的url在页面栈中已经存在同url页面，离栈顶最近同url页面会被移动到栈顶，替换当前页面，并销毁被替换的当前页面，移动后的页面为新建页，页面栈的元素数量会减1；如果目标页面的url在页面栈中不存在同url页面，按多实例模式跳转，页面栈的元素数量不变。
router.replaceUrl({
  url: 'pages/Second',  
  params: {  
    src: 'Index页面传来的数据',  
  }
}, router.RouterMode.Single)

已经实现了页面的跳转，接下来，在Second页面中如何进行自定义参数的接收呢？通过调用router.getParams()方法获取Index页面传递过来的自定义参数。

import router from '@ohos.router';

@Entry
@Component
struct Second {
  @State src: string = (router.getParams() as Record<string, string>)['src'];  
  // 页面刷新展示  
  // ...
}

效果示意如下图所示。在Index页面中，点击“Next”后，即可从Index页面跳转到Second页面，并在Second页面中接收参数和进行页面刷新展示。

在这里插入图片描述

2.2 页面返回和参数接收

经常还会遇到一个场景，在Second页面中，完成了一些功能操作之后，希望能返回到Index页面，那我们要如何实现呢？
在Second页面中，可以通过调用router.back()方法实现返回到上一个页面，或者在调用router.back()方法时增加可选的options参数（增加url参数）返回到指定页面。

说明

  • 调用router.back()返回的目标页面需要在页面栈中存在才能正常跳转。
  • 例如调用router.pushUrl()方法跳转到Second页面，在Second页面可以通过调用router.back()方法返回到上一个页面。
  • 例如调用router.clear()方法清空了页面栈中所有历史页面，仅保留当前页面，此时则无法通过调用router.back()方法返回到上一个页面。
  • 返回上一个页面。
    router.back();
  • 返回到指定页面。
    router.back({ url: 'pages/Index' });

效果示意如下图所示。在Second页面中，点击“Back”后，即可从Second页面返回到Index页面。

在这里插入图片描述
页面返回可以根据业务需要增加一个询问对话框。

即在调用router.back()方法之前，可以先调用router.enableBackPageAlert()方法开启页面返回询问对话框功能。

说明

  • router.enableBackPageAlert()方法开启页面返回询问对话框功能，只针对当前页面生效。例如在调用router.pushUrl()或者router.replaceUrl()方法，跳转后的页面均为新建页面，因此在页面返回之前均需要先调用router.enableBackPageAlert()方法之后，页面返回询问对话框功能才会生效。
  • 如需关闭页面返回询问对话框功能，可以通过调用router.disableAlertBeforeBackPage()方法关闭该功能即可。
router.enableBackPageAlert({
  message: 'Message Info'
});

router.back();

在Second页面中，调用router.back()方法返回上一个页面或者返回指定页面时，根据需要继续增加自定义参数，例如在返回时增加一个自定义参数src。

router.back({
  url: 'pages/Index',  
  params: {
      src: 'Second页面传来的数据',
  }
})

从Second页面返回到Index页面。在Index页面通过调用router.getParams()方法，获取Second页面传递过来的自定义参数。

说明

调用router.back()方法，不会新建页面，返回的是原来的页面，在原来页面中@State声明的变量不会重复声明，以及也不会触发页面的aboutToAppear()生命周期回调，因此无法直接在变量声明以及页面的aboutToAppear()生命周期回调中接收和解析router.back()传递过来的自定义参数。

可以放在业务需要的位置进行参数解析。示例代码在Index页面中的onPageShow()生命周期回调中进行参数的解析。

import router from '@ohos.router';

class routerParams {
  src:string  
  constructor(str:string) {  
    this.src = str  
  }
}

@Entry
@Component
struct Index {
  @State src: string = '';  
  onPageShow() {  
    this.src = (router.getParams() as routerParams).src  
  }  
  // 页面刷新展示  
  // ...
}

效果示意图如下图所示。在Second页面中，点击“Back”后，即可从Second页面返回到Index页面，并在Index页面中接收参数和进行页面刷新展示。

在这里插入图片描述

由于内容过长，在同一篇博文中，会显得过长。

  • 第三大点（ UIAbility的生命周期）

  • 第四大点（UIAbility的启动模式）

在下一篇系列里继续接上，请有兴趣的童鞋持续关注更新。

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

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

相关文章

【学网攻】 第(14)节 -- 动态路由(EIGRP)

【学网攻】 第(14)节 -- 动态路由(EIGRP)

系列文章目录 目录 系列文章目录 文章目录 前言 一、动态路由EIGRP是什么&#xff1f; 二、实验 1.引入 实验步骤 实验拓扑图 实验配置 看到D开头是便是我们的EIGRP动态路由 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学…
阅读更多...
公司宣传电子画册的制作方法

公司宣传电子画册的制作方法

​制作公司宣传电子画册是一种非常有效的方式&#xff0c;可以展示公司的形象和产品&#xff0c;同时也可以吸引更多的潜在客户。不仅低碳环保&#xff0c;还省了不少人力和财力&#xff0c;只要一个二维码、一个链接就能随时随地访问公司的宣传画册。以下是一些制作电子画册的…
阅读更多...
【vue】vue.config.js里面获取本机ip：

【vue】vue.config.js里面获取本机ip：

文章目录 一、效果&#xff1a;二、实现&#xff1a; 一、效果&#xff1a; 二、实现&#xff1a; const os require(os);function getLocalIpAddress() {const interfaces os.networkInterfaces();for (let key in interfaces) {const iface interfaces[key];for (let i …
阅读更多...
对鸢尾花进行分类预测-----pycharm

对鸢尾花进行分类预测-----pycharm

项目说明 #项目&#xff1a; 对鸢尾花进行分类预测 #实例数量150个(3类各50个) #属性数量&#xff1a;4(数值型&#xff0c;数值型&#xff0c;帮助预测的属性和类) #特征&#xff1a;花萼长度&#xff0c;花萼宽度&#xff0c;花瓣长度&#xff0c;花瓣宽度 单位&#xff1…
阅读更多...
C#需要学到什么程度才能做MES系统开发工作？

C#需要学到什么程度才能做MES系统开发工作？

C#需要学到什么程度才能做MES系统开发工作&#xff1f; 在开始前我分享下我的经历&#xff0c;刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;两年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些C#学习方法和资料&#xff0c;让我不断提升自己&#xff…
阅读更多...
读书人必须知道的9个搜书引擎

读书人必须知道的9个搜书引擎

各位小伙伴大家好&#xff0c;众所周知&#xff0c;现在找资源的难度要比以前高的多&#xff0c;各种网站封的封删的删&#xff0c;但大家对书籍资源的需求却越来越大。那今天我镜像哥就决定整一期电子书资源狠活儿。 这些资源都是我辛苦收集&#xff0c;并逐一验证筛选出来的的…
阅读更多...
1分钟内生成美妙歌曲：Suno AI的音乐魔法

1分钟内生成美妙歌曲：Suno AI的音乐魔法

1分钟内生成美妙歌曲&#xff1a;Suno AI的音乐魔法 Suno AI是一款人工智能工具&#xff0c;让创作者能够生成超现实的音乐、语音和音效&#xff0c;可以根据用户的指令生成音乐、语音和其他音频内容。它可以帮助创作者快速生成高质量的音乐作品&#xff0c;并且可以根据不同的…
阅读更多...
全国网络安全行业职业技能大赛WP

全国网络安全行业职业技能大赛WP

word_sercet 文档被加密 查看图片的属性 在备注可以看到解压密码 解密成功 在选项里面把隐藏的文本显示出来 可以看到ffag easy_encode 得到一个bmp二维码 使用qr research 得到的密文直接放瑞士军刀 base32解码base64解码hex解码 dir_pcap 直接搜索flag 发现flag…
阅读更多...
【lesson2】定长内存池的实现

【lesson2】定长内存池的实现

文章目录 介绍定长内存池的设计定长内存池的实现需要成员变量需要的成员函数定长内存池结构定长内存池Delete&#xff08;释放空间&#xff09;的实现定长内存池New&#xff08;申请空间&#xff09;的实现 定长内存池的实现完整版 介绍 作为程序员(C/C)我们知道申请内存使用的…
阅读更多...
C++ Qt开发：运用QJSON模块解析数据

C++ Qt开发：运用QJSON模块解析数据

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍如何运用QJson组件的实现对JSON文本的灵活解析…
阅读更多...
vue 使用echarts-gl实现3d旋转地图

vue 使用echarts-gl实现3d旋转地图

之前也有使用过echarts开发项目中涉及到的地图功能&#xff0c;当时使用geo来实现地图轮廓&#xff0c;看上去有种3d的感觉。最近闲来无事看了一份可视化大屏的UI设计图&#xff0c;感觉3d旋转地图挺好玩的&#xff0c;今天就来尝试实现下。 首先安装下echarts和echarts-gl依赖…
阅读更多...
WebGL开发艺术和创意项目

WebGL开发艺术和创意项目

WebGL提供了强大的图形渲染能力&#xff0c;可以用于开发各种艺术和创意项目。以下是一些使用WebGL开发艺术和创意项目的示例&#xff0c;希望对大家有所帮助。 1.交互式艺术品&#xff1a; 利用WebGL&#xff0c;可以创建具有交互性的艺术品。用户可以与艺术品进行互动、探索和…
阅读更多...
正则表达式 文本三剑客

正则表达式 文本三剑客

一 正则表达式&#xff1a; 由一类特殊字符及文本字符所编写的模式&#xff0c;其中有些字符&#xff08;元字符&#xff09;不表示字符字面意义&#xff0c;而表示控制或通配的功能&#xff0c;类似于增强版的通配符功能&#xff0c;但与通配符不同&#xff0c;通配符功能是用…
阅读更多...
openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错

openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错

文章目录 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错210.1 谓词下推引起的查询报错210.1.1 问题现象210.1.2 原因分析210.1.3 处理办法 openGauss学习笔记-210 openGauss 数据库运维-常见故障定位案例-谓词下推引起的查询报错 210.…
阅读更多...
这些好用小众的知识库软件，快收藏起来

这些好用小众的知识库软件，快收藏起来

现代企业和团队日益重视知识管理&#xff0c;寻找能提供精准、高效、简便的知识库应用变得尤其重要。而今天&#xff0c;将带给大家三款小众却倍受好评的知识库软件&#xff0c;如果你是寻找有效的信息管理工具的话&#xff0c;那么以下就是你不能错过的秘密武器了&#xff0c;…
阅读更多...
由于系统注册表文件丢失或损坏，因此Windows无法加载，如何解决？

由于系统注册表文件丢失或损坏，因此Windows无法加载，如何解决？

问题描述&#xff1a;windows黑屏未能启动&#xff0c;提示由于系统注册表文件丢失或损坏&#xff0c;因此windows无法加载&#xff0c;错误代码&#xff1a;0xc000014c。出现这种问题的原因大多是因为电脑在使用过程中硬件松动&#xff0c;导致出现这种问题。 解决办法: 1. 如…
阅读更多...
尝试搭建域

尝试搭建域

使用window 7 作为dmz 主机 server_2008 作为 预控 前提两台主机都在同一个LAN 下&#xff08;设置一个LAN 区域&#xff09;&#xff0c;同样防火墙关闭状态 首先搞定server 2008 中的域 1. 在计算机属性中选择更改设置中将主机名修改一下&#xff1a; 2. 在server 2008 中…
阅读更多...
Java 面向对象进阶 01（黑马）

Java 面向对象进阶 01（黑马）

static案例代码&#xff1a; 代码&#xff1a; public class Student {private String gender;private String name;private int age;public static String teacherName ;public Student() {}public Student(String gender, String name, int age) {this.gender gender;this.…
阅读更多...
四、ES集群安全策略设置 X-pack

四、ES集群安全策略设置 X-pack

本文主要是结合ES集群搭建时使用&#xff0c;并且适用于ES7.x以上版本 背景及安全策略方案对比 ES 7.x以下版本默认几乎没有任何安全策略&#xff0c;如果集群IP、端口被暴露&#xff0c;在可访问的情况下任何用户都可以对索引进行管理以及数据的增删改查等&#xff0c;基于此需…
阅读更多...
故障脚本的重要作用：预防、诊断与恢复

故障脚本的重要作用：预防、诊断与恢复

故障脚本是在信息技术和计算机领域中广泛使用的一种自动化工具&#xff0c;它们的主要目的是预测、诊断和修复系统或软件中的故障。这些脚本在现代技术环境中扮演着至关重要的角色&#xff0c;本文将介绍故障脚本的主要作用。 一、预防性作用 监控和预警 故障脚本可以用于监控系…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023