小程序页面之间的通信方式

一、wx.navigateTo

  当通过这种方式进行页面之间的路由跳转的时候，不像其他的跳转方式，这个的跳转方式不会关闭上一个页面，这样就可以通过**EventChannel(页面间通信信道)**进行页面间的数据传输。EventChannel可以创建事件，监听事件，以及关闭事件。如此路由与被路由开页面之间的通信方式就是路由页面创建事件并发送数据，被路由页面监听事件并接受数据。

  wx.navigateTo有两个属性，events：(监听事件)，success：(这个属性的回调方法返回EventChannel对象)，然后我们就可以进行如下数据的传递。

示例方法

// 路由页面

wx.navigateTo({
  url: '/gou/ri/de',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    }
  },
  success: function(res) {
    // 通过eventChannel向被路由页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: '狗日的！！！' })
  }
})

// 被路由页面
Page({
  onLoad: function(option){
    // 获取EventChannel对象 
    const eventChannel = this.getOpenerEventChannel()
    
    // 创建监听事件向被路由页面传输数据
    eventChannel.emit('acceptDataFromOpenedPage', {data: '你他娘的还真是个人才！'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

二、path?option=’’

  这种方式基本上是哪种路由都可以使用，但是传递的数据大小不能太大，因该和我们平时的url路径最大长度差不多吧（没有实际测试过最大路径长度），所以如果我们只是传递一些简单的数据，如id之类的，就可以使用这种方式，这种方式就是我们平时发送请求时候加载路径后的请求参数。

示例方法

// 路由页面

wx.navigateTo({
  url: '/gou/ri/de?id=1'
})

// 被路由页面
Page({
  onLoad: function(option){
    let id = option.id;
    console.log(id);
  }
})

三、 wx.setStorageSync(缓冲的方式)

  这个方式就比较通用简单了，在路由页面将数据存储到缓存里面，然后在被路由页面中将缓存的数据取出来就可以,要注意只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。具体可以查看微信小程序文档的api的数据缓冲部分。

示例方法

// 路由页面
Page({
    click(){
        wx.setStorageSync('data','狗日的');
        wx.navigateTo({
            url: '/gou/ri/de'
        })
    }
})

// 被路由页面
Page({
  onLoad: function(){
    const data = wx.getStorageSync('data');
    console.log(data);
  }
})