微信小程序路由跳转url传参长度过长导致页面接收参数报错 eventChannel 方法解决

微信小程序路由跳转url传参长度过长导致页面接收参数报错

开发小程序页面间传参是家常便饭事 , 前后台分离是大趋势 , 前台有后台支持的时候 , 前台的开发会轻松很多 , 但是难免很多时候后台并不能给到我们所有需要的数据接口 , 这个时候我们只能通过页面间传参 , 在下一个结果页面进行接收 , 处理现实我们前台的数据

问题后顾: 路由跳转url传参长度限制导致接受参数报错

wx.navigateTo 路由跳转传参url?id=2 ; 多个参数通过&链接进行参数拼接 ; 但是我们的url是有长度限制机制的存在 , 我们的参数过多 , 拼接后导致url的整体长度过长 , 传递和接收时会导致参数不完整 , 异常情况~~
例如下面可以正常传递接收参数

uni.navigateTo({
 url: './afterSale?id=' + id
})

下面数据多参数就 可能 导致无法正常传递接收参数

/**
 * 例子中 orderData 字段为订单数据信息; 类型为 Object 传递时选用 JSON.stringify 和 JSON.parse方法
 * 否则接收时会导致 orderData : "[object Object]"
 */
uni.navigateTo({ //跳转页面
 url: './afterSale?id=' + id + "&orderData=" + JSON.stringify(item)
})

/**
 * 此时数据多参数JSON.parse方法 可能 会报 JSON.parse 解析异常
 */
onLoad: function(options) { //接收页面
	console.log(JSON.parse(options.order))
}

解决方法1
eventChannel 新增页面间通信接口，用于监听被打开页面发送到当前页面的数据 ; 需要基础 2.7.3 ,低版本肯定要做兼容处理

/**
 * 例子中 eventChannel 为新增 路由events 事件 res 中可直接获取到实例 调用 emit 触发事件, 类似vue中的组件间通信 on emit 方法; 之后我们在接收页面onLoad onShow 中获取监听
 */

uni.navigateTo({ //跳转页面
	url: './afterSale',
	events: {},// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
	success: function (res) {
		res.eventChannel.emit('getData', item)  //触发事件
	}
})

/**
 * onLoad onShow 中通过 this.getOpenerEventChannel() 获取 eventChannel 实例 同时使用 on 方法进行监听接收传参数据
 */
onLoad: function(options) { //接收页面
	const eventChannel = this.getOpenerEventChannel();
	eventChannel.on("getData",data => {
	 	console.log(data)
	});
}

/**
 * 例子中 eventChannel 的只是部分能力的使用 ,  eventChannel 更多的功能可参考文档结合实际场景扩展使用
 */

解决方法 2

用法不再赘述 , 用到的方法容易理解 , 用法也简单

uni.navigateTo({ //跳转页面
	url: './afterSale?id=' + id + '&orderData=' + encodeURIComponent(JSON.stringify(item))
})

/**
 * 
 */
onLoad: function(options) { //接收页面
	const order = JSON.parse(decodeURIComponent(options.order));
	console.log(order)
}

其他方法 : 可以通过全局变量 globalData , 或者本地缓存进行解决 , 不再赘述 , 实现方法简单