uniapp项目页面之间传值

详述了uniapp中通过URL拼接和对象转换传递参数的方法,涉及encodeURIComponent和JSON.stringify/parse的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、传单个或多个参数

方法:直接在地址后面拼接

1、在将要跳转的页面上地址后面拼接要传递的参数,传递多个时用&符拼接

//任务列表页传递id  跳转到相应的任务详情页
gettaskList(id){
//传递多个参数时直接用&符拼接
	uni.navigateTo({
		url:'gettaskList?id=${id}'
	})
}

2、接收时,在页面的onload函数中接收传递过来的参数

// 任务详情页通过 onLoad 生命周期中接传递过来的参数 id
onLoad(option){
 console.log('上一个页面传递过来的参数', option)
 console.log('id', option.id)
 console.log('item', option.item)
 // 接下来就是你需要该id做些什么,比如通过id查询到该详情等
}

二、传递对象

如需要传递的参数有很多时,由uniapp 跳转页面api 的 url 有长度限制,需使用以下方式进行数据传递:

// item 为该列表的每一项的数据对象;encodeURIComponent 为uniapp 提供的api
getTaskList(item) {
	uni.navigateTo({
		 url: `getTaskList?item=${encodeURIComponent(JSON.stringify(item))}`,
	});
}

接收时

// 同样onLoad 生命周期中进行接收, decodeURIComponent 为uniapp 提供的api
onLoad(option) {
	const item = JSON.parse(decodeURIComponent(option.item));
	console.log('上一个页面传递过来的参数对象',item );
	// 接下来就是你需要该对象数据做些什么,当然这里你可以直接赋值给data绑定的数据
	this.objData = item;
}

注意:传递数据的时候必须使用 JSON.stringify 将其转为 JSON 字符串,然后接收的时候也必须使用 JSON.parse 来进行解析!
操作数组也是一样的,因为数组也是对象。

简单记录如有问题或更优解还请不要吝啬的分享出来,此结。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值