路由传参常用方式有以下几种
1. 通过url传参
// xxx.wxml标签里进行传参
<navigator url="/pages/detail/detail?productId=12345" hover-class="navigator-hover">详情</navigator>
// 或者在wx.js里用wx.navigateTo
//页面跳转传参
wx.navigateTo({
url: '/pages/detail/detail?productId=12345'
})
// 产品详情页面
//跳转后拿取跳转前传过来的参数
Page({
onLoad: function(option){
let productId = option.productId;
console.log(productId);
}
})
上面的方式的参数不能是对象,如果需要传对象,可以将对象转成json字符串,然后拼接到url后面,在接收页面再将json字符串转成对象
let info = {
a:2,
b:3
}
let infoStr = JSON.stringfy(info);
wx.navigateTo({
url: '/pages/detail/detail?infoStr='+infoStr
})
// 产品详情页面
Page({
onLoad: function(option){
let infoStr = option.infoStr;
let info = JSON.parse(infoStr);
}
})
2. 通过事件传参
1.官网例子
// 产品列表页
wx.navigateTo({
url: url: '/pages/detail/detail'
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
// 产品详情页
Page({
onLoad: function(option){
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
2 .简化例子
以上例子,在跳转的时候列表页可以向详情页传数据,详情页也可以向列表页传数据,平时我们经常都只是传数据,很少需要回传,以下是简化的例子
// 列表页
wx.navigateTo({
url: "/pages/home/detail/detail",
success: function(res) {
// 通过eventChannel向被打开页面传送数据
let data = {productId: 'sadf2323',productName:'金龙鱼花生油'};
res.eventChannel.emit("info", data);
}
});
// 详情页
onLoad: function(options) {
const eventChannel = this.getOpenerEventChannel();
// 监听info事件，获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on("info", function(data) {
console.log(data);
});
},
