微信小程序路由跳转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 , 或者本地缓存进行解决 , 不再赘述 , 实现方法简单
