微信小程序路由传参

路由传参常用方式有以下几种

1. 通过url传参

// xxx.wxml标签里进行传参
 详情

// 或者在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);
  });
},

总结: 路由传参可以用这两种方式

通过url拼接参数传输,需要传对象,需要传对象就先讲对象转成json字符串再传

通过eventChannel(事件通道)进行传输(可以传对象)