跨页面路由传参

参数拼接

jsx

wx.navigateTo({
  url: `/package-distribution/pages/store/mission/agreement/index?data=${JSON.stringify(
    data
  )}`
});

缺点

当 Data 数据量很大，JSON 文本化后结果会很长，用这种方式传参可能会导致部分数据被截取（触发 url 最大字数）。导致在目标页面 JSON 解析异常。而且该方法数据方向是单向的。

EventChannel

A Page

jsx

wx.navigateTo({
  url: 'B?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

B Page

jsx

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

优点

此时页面数据传递变成双向的了，同时也没有了传输数据量的限制。可以说是最佳实践了。