鸿蒙仓颉开发语言实战教程:页面跳转和传参

news2025/6/1 15:34:38

前两天分别实现了商城应用的首页和商品详情页面,今天要分享新的内容,就是这两个页面之间的相互跳转和传递参数。

首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键cangjie文件夹新建仓颉文件:

新建的文件里面没什么内容,我们给他添加上4个基础的引用,再简单添加个按钮:

package ohos_app_cangjie_entry.page
import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
@Entry
@Component
public class testPage {
    func build() {
    	Column {
            Button('返回')
    	}
    }
}

页面跳转和返回

仓颉语言有和ArkTs相同的路由Router,不过用法不太一样。在跳转页面的时候,push使用的url,不再是路径,而是直接写页面名称,不用管的路径。比如我刚才新建了页面testPage,跳转的时候就是:

Router.push(url: 'testPage')

当页面需要返回,使用Router.back(),back中可以写url参数,也可以不写。

要注意,这里我们说的页面名称,并不是文件的名字,而是页面的名称。比如index.cj文件,它的页面名称是EntryView而不是index。

传递参数

页面跳转通常伴随着传递参数,在使用push跳转的时候能看到和url并列的还有一个params用来传递参数,它支持两种类型,string和JsonObject。

只需传递一个参数的时候我们可以直接传递string类型的参数:

Router.push(url: 'testPage', params: '100')

在下一个页面接收的参数的时候也要使用Router:

Router.getParams()

同样的,在返回上一级页面的时候也可以同样的方式传递参数,接收参数也是一样的。

Router.back(url: 'EntryView',params:'参数2')

在需要传递多个参数的时候,我们需要使用JsonObject类型,这是一个全新的数据类型,幽蓝君使用它的时候颇费了一番周折。好在看了这篇文章的友友不用再浪费时间了,它是这样用的:

var map = JsonObject()
map.put("name", JsonString("衬衫"))
map.put(“size”, JsonString(“xl”))
Router.push(url: 'testPage', params: map)

在下一个页面接收多个参数时,要使用Router.getParamsObject():

let obj =  Router.getParamsObject()
let a =  obj['name']
AppLog.info('接收多个参数:' + a.toString())

以上就是仓颉开发语言中的页面跳转和传参。#HarmonyOS语言##仓颉##购物#

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

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

相关文章

最新Spring Security实战教程(十六)微服务间安全通信 - JWT令牌传递与校验机制

🌷 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程,入门到实战 🌺《RabbitMQ》…

【五】Spring Cloud微服务开发:解决版本冲突全攻略

Spring Cloud微服务开发:解决版本冲突全攻略 目录 Spring Cloud微服务开发:解决版本冲突全攻略 概述 一、Spring Boot 二、Spring Cloud 三、Spring Cloud Alibaba 总结 概述 spring cloud微服务项目开发过程中经常遇到程序包版本冲突的问题&…

Spring Boot微服务架构(二):开发调试常见中文问题

Spring Boot开发调试常见中文问题及解决方案 一、环境配置类问题 端口冲突 表现:启动时报错"Address already in use"解决:修改application.properties中的server.port或终止占用端口的进程 数据库连接失败 表现:启动时报错"…

Linux基础IO----动态库与静态库

什么是库? 库是由一些.o文件打包在一起而形成的可执行程序的半成品。 如何理解这句话呢? 首先,一个程序在运行前需要进行预处理、编译、汇编、链接这几步。 预处理: 完成头文件展开、去注释、宏替换、条件编译等,最终…

LeetCode百题刷004(哈希表优化两数和问题)

遇到的问题都有解决的方案,希望我的博客可以为你提供一些帮助 一、哈希策略优化两数和问题 题目地址:1. 两数之和 - 力扣(LeetCode)https://leetcode.cn/problems/two-sum/description/ 思路分析: 题目要求在一个整型…

FPGA通信之VGA与HDMI

文章目录 VGA基本概念:水平扫描:垂直扫描: 时序如下:端口设计疑问为什么需要输出那么多端口不输出时钟怎么保证电子枪移动速度符合时序VGA转HDMI 仿真电路图代码总结:VGA看野火电子教程 HDMITMDS传输原理为什么使用TMD…

Leetcode百题斩-二叉树

二叉树作为经典面试系列,那么当然要来看看。总计14道题,包含大量的简单题,说明这确实是个比较基础的专题。快速过快速过。 先构造一个二叉树数据结构。 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode…

ACM Latex模板:合并添加作者和单位

目录: 1.ACM会议论文Latex模板,逐个添加作者和单位: 1)Latex: 2)效果: 2. ACM会议论文Latex模板,合并添加作者和单位: 1)Latex: 2&#x…

将MCP(ModelContextProtocol)与Semantic Kernel集成(调用github)

文章目录 将MCP(ModelContextProtocol)与Semantic Kernel集成(调用github)一、模型上下文协议(MCP)简介1.1 简介1.2 示例 二、集成步骤2.1 安装环境依赖2.2 构建语义内核(Kernel)2.3…

游戏引擎学习第311天:支持手动排序

仓库: https://gitee.com/mrxiao_com/2d_game_7(已满) 新仓库: https://gitee.com/mrxiao_com/2d_game_8 回顾并为今天的内容定下基调 我们接下来要继续完成之前开始的工作,上周五开始的部分内容,虽然当时对最终效果还不太确定,但现在主要任…

LambdaQueryWrapper、MybatisPlus提供的基本接口方法、增删改查常用的接口方法、自定义 SQL

DAY26.2 Java核心基础 MybatisPlus提供的基本接口方法 分页查询 导入依赖springboot整合Mybatis-plus <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version&g…

深度学习---可视化

模型可视化 深度学习模型可视化是理解、调试和优化模型的关键技术&#xff0c;涉及模型结构、参数、层输出、数据流动、训练过程等多维度分析。 一、可视化的核心作用 模型理解 解析复杂模型的网络架构&#xff08;如CNN的层级连接、Transformer的注意力机制&#xff09;。揭…

Windows系统如何查看ssh公钥

很多人只是一味的为拿到ssh公钥而努力&#xff0c;往往却会忽略了ssh公钥与私钥背后的作用。 咱们在这里会花两分钟。 一分钟速通概念&#xff0c;一分钟教会你如何获取。 一分钟速通概念&#xff1a; 如何生成&#xff1a; SHH 公钥 与 私钥 是基于非对称加密算法&#xff…

【2025】嵌入式软考中级部分试题

大题: 大模型 神经网络 机器学习 深度学习的包含关系 不一定对 订阅-发布者模型 发布/订阅模式特点: ①解耦:发布者和订阅者之间没有直接联系,它们通过中间的消息代理(如消息队列或事件总线)进行通信。这种解耦使得系统更加灵活,可以独立地添加或移除发布者和订阅者…

Antd中Upload组件封装及使用:

1.Upload上传组件功能: 文件校验 : 文件格式校验/文件大小校验/上传文件总个数校验 相关功能 : 拖拽功能/上传到远程(七牛)/文件删除及下载 2.组件效果展示: 3.疑难点及解决方案: Promise.all多文件并行上传到远程(七牛云): (1)在beforeUpload钩子函数中获取token (2)循环fi…

Linux环境基础开发工具->vim

引入&#xff1a;vim是什么&#xff1f; vs叫作继承开发环境&#xff0c;我们可以在里面编辑代码&#xff0c;调式代码&#xff0c;运行代码....这种叫集成开发环境&#xff1b;而vim只用来编辑代码&#xff0c;也就是类似于在windows上打开一个记事本来写代码的操作 集成开发…

跳板问题(贪心算法+细节思考)

首先直接看题&#xff1a; 这题直接贪心其实问题不大&#xff1a; 下面先展示我的一个错误代码&#xff1a; # include<iostream> # include<vector> # include<algorithm>using namespace std;int main() {int N,M;cin>>N>>M;vector<vecto…

RuoYi前后端分离框架集成UEditorPlus富文本编辑器

一、背景 采用若依框架搭建了一个小型的电子书项目,项目前端、后端、移动端就一人,电子书的章节内容是以富文本内容进行呈现的,产品设计人员直接给了一个第三方收费的富文本编辑器截图放到开发文档中,提了一沓需求点,概况下来就是要做成下图中的样子。作为一个后端开发人…

IPD流程落地:项目任务书Charter开发

目录 简介 第一个方面&#xff0c;回答的是Why的问题。 第二点&#xff0c;要回答做什么的问题&#xff0c;也就是产品定义What的问题。 第三点就是要回答执行策略与计划的问题&#xff0c;也就是How、When、Who的问题。 第四点是对上述这些分析的总结分析&#xff0c;要为…

Vue 2 混入 (Mixins) 的详细使用指南

1.基本概念 混入 (Mixins) 是 Vue 2 中用于组件代码复用的重要特性&#xff0c;它允许你将可复用的功能分发到多个组件中。 混入是一种灵活的代码复用方式&#xff0c;可以包含任意组件选项&#xff08;data、methods、生命周期钩子等&#xff09;。当组件使用混入时&#xff…