HarmonyOS实战开发-实现Ability内页面间的跳转和数据传递。

介绍

本篇Codelab基于Stage模型下的Ability开发,实现Ability内页面间的跳转和数据传递。

最终效果图如下:

相关概念

  • 页面路由:提供通过不同的url访问不同的页面,包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

环境搭建

软件要求

  • DevEco Studio版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:润和RK3568开发板。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. 获取OpenHarmony系统版本:标准系统解决方案(二进制)。以3.2 Release版本为例:

2.搭建烧录环境。

  1. 完成DevEco Device Tool的安装
  2. 完成RK3568开发板的烧录

3.搭建开发环境。

  1. 开始前请参考工具准备,完成DevEco Studio的安装和开发环境配置。
  2. 开发环境配置完成后,请参考使用工程向导创建工程(模板选择“Empty Ability”)。
  3. 工程创建完成后,选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets                // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstants.ets      // 公共常量类
│  │  └──utils
│  │    └──Logger.ets                // 日志类
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  └──pages
│     ├──IndexPage.ets               // 入口页面
│     └──SecondPage.ets              // 跳转页
└──entry/src/main/resources          // 资源文件目录

页面跳转

  1. 在工程pages目录中,选中Index.ets,点击鼠标右键 > Refactor > Rename,改名为IndexPage.ets。改名后,修改工程entryability目录下EntryAbility.ets文件中windowStage.loadContent方法第一个参数为pages/IndexPage。
// EntryAbility.ets
onWindowStageCreate(windowStage: Window.WindowStage): void {
  ...
  windowStage.loadContent('pages/IndexPage', (err, data) => {
    ...
  });
}

2.在工程pages目录中,点击鼠标右键 > New > Page,新建命名为SecondPage的page页。

3.从IndexPage页面跳转到SecondPage页面,并进行数据传递,需要如下几个步骤:

  • 给两个页面导入router路由模块。
  • 在IndexPage页面中给Button组件添加点击事件,使用router.pushUrl()方法将SecondPage页面路径添加到url中,params为自定义参数。
  • SecondPage页面通过router.getParams()方法获取IndexPage页面传递过来的自定义参数。

IndexPage页面有一个Text文本和Button按钮,点击按钮跳转到下一个页面,并传递数据。IndexPage.ets代码如下:

// IndexPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';

@Entry
@Component
struct IndexPage {
  @State message: string = CommonConstants.INDEX_MESSAGE;

  build() {
    Row() {
      Column() {
        Text(this.message)
          ...
        Blank()
        Button($r('app.string.next'))
          ...
          .onClick(() => {
            router.pushUrl({
              url: CommonConstants.SECOND_URL,
              params: {
                src: CommonConstants.SECOND_SRC_MSG
              }
           }).catch((error: Error) => {
             Logger.info(TAG, 'IndexPage push error' + JSON.stringify(error));
           });
        })
      }
      ...
    }
    ...
  }
}

SecondPage页面有两个Text文本,其中一个文本展示从IndexPage页面传递过来的数据。SecondPage.ets代码如下:

// SecondPage.ets
import router from '@ohos.router';
import CommonConstants from '../common/constants/CommonConstants';

@Entry
@Component
struct Second {
  @State message: string = CommonConstants.SECOND_MESSAGE;
  @State src: string = (router.getParams() as Record<string, string>)[CommonConstants.SECOND_SRC_PARAM];

  build() {
    Row() {
      Column() {
        Text(this.message)
          ...
        Text(this.src)
          ...
      }
      ...
    }
    ...
  }
}

页面返回

在SecondPage页面中,Button按钮添加onClick()事件。调用router.back()方法,实现返回上一页面的功能。

// SecondPage.ets
Button($r('app.string.back'))
  ...
  .onClick(() => {
    router.back();
  })

总结

您已经完成了本次Codelab的学习,并了解到以下知识点:

  1. 使用页面路由实现应用内页面跳转。

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF:

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. .……

在这里插入图片描述


二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

在这里插入图片描述

三、如何快速入门?《鸿蒙基础入门学习指南》

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. .……

在这里插入图片描述


四、开发基础知识

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. .……

在这里插入图片描述


五、基于ArkTS 开发

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 7.网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. .……

在这里插入图片描述


更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据分析之Power BI

POWER QUERY 获取清洗 POWER PIVOT建模分析 如何加载power pivot 文件-选项-加载项-com加载项-转到 POWER VIEW 可视呈现 如何加载power view 文件-选项-自定义功能区-不在功能区中的命令-新建组-power view-添加-确定 POWER MAP可视地图

HTTP(1)

目录 一、认识HTTP协议 理解 应用层协议 二、fiddler的安装以及介绍 1、fiddler的安装 2、fiddler的介绍 三、HTTP 报文格式 1、http的请求 2、http的响应 五、认识URL 六、关于URL encode 一、认识HTTP协议 HTTP 全称为&#xff1a;“超文本传输协议”&#xff0c;是…

【01-20】计算机网络基础知识(非常详细)从零基础入门到精通,看完这一篇就够了

【01-20】计算机网络基础知识&#xff08;非常详细&#xff09;从零基础入门到精通&#xff0c;看完这一篇就够了 以下是本文参考的资料 欢迎大家查收原版 本版本仅作个人笔记使用1、OSI 的七层模型分别是&#xff1f;各自的功能是什么&#xff1f;2、说一下一次完整的HTTP请求…

Mybatis-plus + 通用mapper(tk.mybatis)

推荐课程&#xff1a;MyBatisPlus实战教程02-课程介绍与案例演示_哔哩哔哩_bilibili 官网&#xff1a;MyBatis-Plus (baomidou.com) 目录 01 引言 1&#xff09;MyBatis与MyBatis-Plus区别 2&#xff09;Mybatis-plus入门案例 案例一&#xff1a;spring容器版本的案例 案例…

pip永久修改镜像地址

修改命令&#xff1a; pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple/ 效果&#xff1a; 会在C:\Users\PC(用户名)\AppData\Roaming\pip目录下新增或修改文件pip.ini 文件内容&#xff1a; [global] index-url https://pypi.tuna.tsinghua.e…

通过keil MDK生成静态库以减少编译时间

当我们的程序复杂度提高,代码量增大,每次编译都会花费更多的时间,虽然相比较Linux动则好几个小时的编译时间,单片机编译的时间已经算很短了,但是一个200多KB的程序编译也得需要好几分钟。如果将一些成熟固定,几乎不会再去修改的程序编译成静态库,那么可以减少一部分编译…

HarmonyOS实战开发-实现UIAbility内和UIAbility间页面的跳转

介绍 本篇Codelab基于Stage模型下的UIAbility开发&#xff0c;实现UIAbility内和UIAbility间页面的跳转。包含如下功能&#xff1a; UIAbility内页面的跳转。跳转到指定UIAbility的首页。跳转到指定UIAbility的指定页面&#xff08;非首页&#xff09;。 最终效果图如下&…

新数据显示,寻求博士后职位的美国科学家越来越少

戈罗登科夫/盖蒂图片社 美国国家科学基金会&#xff08;NSF&#xff09;发布的新数据显示&#xff0c;美国公民从事博士后工作的人数急剧下降&#xff0c;特别是在生物和生物医学科学领域。这一趋势凸显了人们对学术界正面临博士后短缺的担忧&#xff0c;以及早期职业科学家越来…

PPP、RRE、MGRE综合实验

一、实验拓扑图 二、实验要求 1.R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址&#xff1b; 2.R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方: R2与R5之间使用ppp的CHAP认证&#xff0c; R5为主认证方;R3与R5之间使用HDLC封装; 3.R1、R2、…

Python:执行py命令,提示: Can‘t find a default Python.

1.Python运行环境罢工 今天&#xff0c;要运行一个前年用python编写的爬虫程序&#xff0c;先检测python运行环境是否正常&#xff1a; D:\Python38-32\works>c:\windows\py.exe Cant find a default Python. 再试&#xff1a; D:\Python38-32\works>py --list Installe…

Keepalived+MySQL简单搭建实现数据库高可用

需求&#xff1a;想要实现当MySQL服务挂了之后&#xff0c;能够自动切换到另一台&#xff0c;不对当前服务造成过多影响。查找了很多实现数据库高可用方案&#xff0c;比较常见的有MHA&#xff08;至少三台&#xff0c;一主多从&#xff09;、开源数据库中间件&#xff08;Myca…

浅试Kimi

最近KIMI大模型挺火的&#xff0c;擅长处理中文文本&#xff0c;咱也来试试吧&#xff01; 测试问题&#xff1a; 写一篇800字以上的短片小说&#xff1a;主要故事是以一位上进但其他方面表现平平的大男孩小贱&#xff0c;刚到公司不久&#xff0c;就被一位名叫大弟的女同事看…

量化交易入门(二十八)什么是布林带,量化中怎么使用

什么叫布林带 布林带&#xff08;Bollinger Bands&#xff09;是一种常用的技术分析指标&#xff0c;由约翰布林&#xff08;John Bollinger&#xff09;于20世纪80年代开发。它由三条线组成&#xff1a;中轨&#xff08;通常为20日移动平均线&#xff09;、上轨&#xff08;中…

python编程软件有什么

Python开发软件可根据其用途不同分为两种&#xff0c;一种是Python代码编辑器&#xff0c;一种是Python集成开发工具&#xff0c;两者的配合使用可以极大的提高Python开发人员的编程效率&#xff0c;以下是常用的几款Python代码编辑器和Python集成开发工具。 一、Python代码编…

嵌入式linux学习之交叉编译器安装

交叉编译器介绍 ARM 裸机、Uboot 移植、Linux 移植这些都需要在 Ubuntu 下进行编译&#xff0c;编译就需要编译器&#xff0c;在 Liux 进行 C 语言开发里面使用 GCC 编译器进行代码编译&#xff0c;但是 Ubuntu 自带的 gcc 编译器是针对 X86 架构的&#xff01;而我们现在要编…

深入理解Java接口:定义、使用与重要性(day13)

导语&#xff1a;Java接口是Java编程语言中的一个核心概念&#xff0c;它提供了一种定义方法但不包含方法实现的方式。接口在Java编程中扮演着重要角色&#xff0c;能够帮助我们实现代码的高内聚、低耦合&#xff0c;提高代码的复用性和可维护性。本文将详细介绍Java接口的定义…

python练习四

1. 求一个十进制的数值的二进制的0、1的个数 def count_binary_ones(n):binary_str bin(n)[2:] # 转换为二进制字符串&#xff0c;去除前缀0bprint(f"{n} 的二进制为: {binary_str}")return binary_str.count(0), binary_str.count(1) n int(input("输入一个…

Python车道线偏离预警

程序示例精选 Python车道线偏离预警 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《Python车道线偏离预警》编写代码&#xff0c;代码整洁&#xff0c;规则&#xff0c;易读。 学习与应用推…

memcached缓存数据库简介

memcached是一套分布式的高速缓存系统&#xff0c;由LiveJournal的Brad Fitzpatrick开发&#xff0c;但被许多网站使用。这是一套开放源代码软件&#xff0c;以BSD license授权发布。 memcached缺乏认证以及安全管制&#xff0c;这代表应该将memcached服务器放置在防火墙后。 …

自建机房私有云吗?

大家好&#xff0c;我是小码哥&#xff0c;之前一种有没搞清楚公有云、私有云的概念&#xff0c;今天算是弄清楚了&#xff0c;这里给大家分享一下公有云、私有云的区别&#xff0c;以及自建机房算不算私有云&#xff01; 其实私有云&#xff08;Private Cloud&#xff09;和公…