uniapp 之 页面跳转时传递数据的两种常用方式

 

一、传递单个或者多个参数

  列表页面：

// 列表页面通过传递id 跳转到相应的详情页面
getDetails(id){
	uni.navigateTo({
		url: `getDetails?id=${id}`
	});
}
//  注：如果需要传递多个参数使用&符号连接即可，示例：
getDetails(id, item){
	uni.navigateTo({
		url: `getDetails?id=${id}&item=${item}`
	});
}

 
  详情页面：

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

 
 

二、传递数组或者对象

 如果需要传递的参数有很多的时候，由于uniapp 跳转页面api 的 url 有长度的限制，那么我们需要使用以下方式进行数据的传递；

1、使用地址栏传参

  列表页面：

// item 为该列表的每一项的数据对象；encodeURIComponent 为uniapp 提供的api
getDetails(item) {
	uni.navigateTo({
		 url: `getDetails?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 来进行解析！

 另外，由于数组也是对象，因此也可以套用该方法传参，再次便不多作演示。

 

2、使用 eventChannel

  列表页面：

// item 为该列表的每一项的数据对象
getDetails(item) {
	uni.navigateTo({
		 url: `getDetails`,
		 success: (res) => {
		     // 通过eventChannel向被打开页面传送数据
		     res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
		 }
	});
}

  详情页面：

onLoad(option) {
	const eventChannel = this.getOpenerEventChannel();
	// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', (data) => {
    	console.log(data)
    	this.objData = data.data;
    })
}

这种方法规避掉了地址栏传参担心url超长的限制，只是使用方法稍微有点麻烦，建议稍微的封装一下，便于使用。

 

3、使用uni.$emit()发送事件，uni.$on()监听事件

  列表页面：

// item 为该列表的每一项的数据对象
getDetails(item) {
	uni.navigateTo({
		 url: `getDetails`,
		 success: (res) => {
	  		 uni.$emit('update', {msg: '页面更新'})
		 }
	});
}

  详情页面：

onLoad(option) {
	uni.$on('update', (data) => {
		console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
	})
}

注意的是：

• 这个监听也可以在onShow()页面生命周期中监听，也可以使用uni.$once监听一次
  具体使用哪种api 监听视需求而定；
• 如果使用uni.$on()监听事件的话，需要用uni.$off()取消事件的监听来避免重复监听；

详情查看官方文档：

• 页面通讯
• 如何使用uni.$emit()和uni.$on() 进行页面间通讯

 
 
 
  如有不足，望大家多多指点！ 谢谢！