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

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

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

首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键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.xdnf.cn/news/8704.html

相关文章:

  • WORD 转 PDF 工具:排版 / 图片 / 表格批量转换提升办公效率
  • Acrobat 中 JavaScript 为 PDF 带来的交互
  • 篇章二 数据结构——前置知识(二)
  • C# 正则表达式
  • c/c++的opencv伽马噪声
  • ArrayList 与 LinkedList 区别?
  • 【c++11】智能指针 -- 摆脱内存困扰,现代编程的智能选择
  • OSCP备战-mr-robot靶机详细解法
  • conda 环境中opencv 报错
  • Maven Profile高级策略与冲突解决
  • 手眼标定:九点标定、十二点标定、OpenCV 手眼标定
  • Cursor最新问题不能使用Claude3.7问题的解决方案
  • [Linux]如何配置mailutils郵件服務?
  • 基于STM32的电容电阻测量仪Proteus仿真设计+程序设计+设计报告+讲解视频
  • MyBatis实战指南(三)MyBatis常用配置详解(XML配置,环境配置,类型别名,属性与映射器)
  • 【监控】Prometheus+Grafana 构建可视化监控
  • JVM 的垃圾回收器
  • 每日算法刷题计划Day15 5.25:leetcode不定长滑动窗口求子数组个数越短越合法3道题,用时1h
  • BUUCTF——RCE ME
  • 【数据结构】实现方式、应用场景与优缺点的系统总结
  • CAN通信收发测试(USB2CAN模块测试实验)
  • RocketMq的消息类型及代码案例
  • 复杂度讲解
  • [yolov11改进系列]使用轻量级骨干网络MobileNetV4替换backbone的python源码+训练源码+改进流程+改进原理
  • 如何进行CAN一致性测试
  • 解决:ERROR: No matching distribution found for matplotlib= =3.8.3
  • 算法学习笔记·数学·快速幂
  • M00282-P2并联混合动力电动汽车的电池充电持续能源管理系统
  • 楼宇自控成建筑领域关键技术,为实现建筑碳中和注入强劲技术动能
  • DELL EMC PowerStore BBU更换手册