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

简介: 本文介绍了仓颉语言中实现商城应用页面跳转与参数传递的方法。通过Router实现页面间跳转,支持传递字符串和JsonObject类型的参数,并演示了如何在页面间接收和处理这些参数,帮助开发者快速掌握仓颉语言中的页面通信技巧。

前两天分别实现了商城应用的首页和商品详情页面,今天要分享新的内容,就是这两个页面之间的相互跳转和传递参数。
首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键cangjie文件夹新建仓颉文件:
image.png

新建的文件里面没什么内容,我们给他添加上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。
image.png

传递参数
页面跳转通常伴随着传递参数,在使用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语言##仓颉##购物#

相关文章
|
1月前
|
监控 JavaScript 编译器
从“天书”到源码:HarmonyOS NEXT 崩溃堆栈解析实战指南
本文详解如何利用 hiAppEvent 监控并获取 sourcemap、debug so 等核心产物,剖析了 hstack 工具如何将混淆的 Native 与 ArkTS 堆栈还原为源码,助力开发者掌握异常分析方法,提升应用稳定性。
383 39
|
2月前
|
开发者 容器
鸿蒙应用开发从入门到实战(十四):ArkUI组件Column&Row&线性布局
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解Column和Row组件的使用以及线性布局的方法。
274 12
|
2月前
|
API 数据处理
鸿蒙应用开发从入门到实战(十三):ArkUI组件Slider&Progress
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解滑块Slider和进度条Progress组件的使用。
167 1
|
2月前
|
JavaScript 开发者 索引
鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
ArkTS拓展了TypeScript,可以结合ArkUI进行渲染控制,是的界面设计具有可编程性。本文简要描述鸿蒙应用开发中的条件渲染和循环渲染。
161 5
|
1月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
239 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
209 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
528 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
2月前
|
数据安全/隐私保护 开发者
鸿蒙应用开发从入门到实战(十一):ArkUI组件Text&TextInput
ArkUI提供了丰富的系统组件,用于制作鸿蒙原生应用APP的UI,本文主要讲解文本组件Text和TextInput的使用。
274 3
|
1月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
122 0
|
2月前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
164 1

热门文章

最新文章