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

举报
yd_271872561 发表于 2025/06/25 15:43:04 2025/06/25
【摘要】 前两天分别实现了商城应用的首页和商品详情页面,今天要分享新的内容,就是这两个页面之间的相互跳转和传递参数。首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键cangjie文件夹新建仓颉文件:新建的文件里面没什么内容,我们给他添加上4个基础的引用,再简单添加个按钮:package ohos_app_cangjie_entry.pageimport ohos.base.*import...
前两天分别实现了商城应用的首页和商品详情页面,今天要分享新的内容,就是这两个页面之间的相互跳转和传递参数。
首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键cangjie文件夹新建仓颉文件:

2982626480.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。

599423746.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语言##仓颉##购物#
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。