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

布局王
• 阅读 4

前两天分别实现了商城应用的首页和商品详情页面,今天要分享新的内容,就是这两个页面之间的相互跳转和传递参数。 首先我们需要两个页面。如果你的项目中还没有第二个页面,可以右键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语言##仓颉##购物#

点赞
收藏
评论区
推荐文章
布局王 布局王
9小时前
鸿蒙仓颉开发语言实战教程:实现商城应用首页
经过了几天的入门教程,我们终于进入到了仓颉开发语言的实战环节,今天分享的内容是实现商城应用的首页页面,效果图如下:首页的内容包括导航栏、轮播图、商品分类和商品列表,我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的,我们需要自己去开发。此处的导航栏也比较
布局王 布局王
9小时前
鸿蒙仓颉语言开发实战教程:实现商品分类页
今天继续为大家带来仓颉语言开发商城应用的实战教程,今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果,比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左侧的分类列表,很明显是一个List容器,样式上比较简单,
布局王 布局王
9小时前
鸿蒙仓颉语言开发实战教程:购物车页面
大家上午好,仓颉语言商城应用的开发进程已经过半,不知道大家通过这一系列的教程对仓颉开发是否有了进一步的了解。今天要分享的购物车页面:看到这个页面,我们首先要对它简单的分析一下。这个页面一共分为三部分,分别是导航栏、购物车列表和底部的结算栏。也能它们是col
布局王 布局王
9小时前
鸿蒙仓颉语言开发实战教程:商城应用个人中心页面
又到了高考的日子,幽蓝君在这里祝各位考生朋友冷静答题,超常发挥。今天要分享的内容是仓颉语言商城应用的个人中心页面,先看效果图:下面介绍下这个页面的实现过程。我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局,整个页面由导航栏、个人资料、vip横条和
布局王 布局王
9小时前
鸿蒙Next仓颉语言开发实战教程:店铺详情页
各位早上好,幽蓝君又来分享仓颉开发教程了,今天的内容是店铺详情页:这个页面的内容看似简单,其实有很多小细节需要注意,主要还是让大家熟悉List容器的使用。整个页面由导航栏和List容器两大部分组成,导航栏我们已经分享过多次,今天不再赘述。主要说一下List
布局王 布局王
9小时前
鸿蒙Next仓颉语言开发实战教程:订单详情
昨天的发布会上听到HarmonyOS5.1版本即将推送,6.0版本也快要来了,表示十分期待。今天继续分享仓颉语言开发商城应用的实战教程,今天要分享的是订单详情页:我们今天应该是第一次遇到分为上中下三部分的页面,而且中间内容可以滚动,这样的布局如何设置呢,其
布局王 布局王
9小时前
鸿蒙Next仓颉语言开发实战教程:设置页面
仓颉语言商城应用的页面开发教程接近尾声了,今天要分享的是设置页面:导航栏还是老样式,介绍过很多次了,今天不再赘述。这个页面的内容主要还是介绍List容器的使用。可以看出列表内容分为三组,所以我们要用到ListItemGroup,不过第一组是没有标题的,所以
布局王 布局王
9小时前
鸿蒙Next仓颉语言开发实战教程:消息列表
大家周末好,今天要分享的是仓颉语言开发商城应用实战教程的消息列表页面。这个页面的导航栏和之前有所不同,不过难度并没有增加,只是标题移到了左边,我们使用两端对齐方式就能实现,导航栏部分的具体代码如下:Row(8)Text('消息').fontSize(16)
布局王 布局王
9小时前
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言的商城项目基本开发结束啦,今天跟大家分享新的项目,一个银行app,说是新项目但是大家可能会有些眼熟,在ArkTS的教程中就写过这个项目。今天我们仓颉语言再写一遍,看看和ArkTS有什么不同。首先我们可以看到页面内容撑满了屏幕,所以需要设置沉浸模式,
布局王 布局王
9小时前
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
大家好,今日要分享的是使用仓颉语言开发动态广场页面,也比较像朋友圈页面:整个页面分为两部分,分别是导航栏和状态列表,导航栏比较简单,我们可以先写下导航栏的具体代码和页面的基本结构:ColumnRow(10)Text('推荐').fontColor(Colo