场景:页面 A 跳转 B,须要带一些参数过来,体积小的参数能够通过query带过来,数据量较多时,query不是一个好的抉择。这时候应采纳小程序的 EventChannel

一、实践前提

如果一个页面由另一个页面通过 wx.navigateTo 关上,这两个页面间将建设一条数据通道:

  • 被关上的页面能够通过 this.getOpenerEventChannel() 办法来取得一个 EventChannel 对象;
  • wx.navigateTo 的 success 回调中也蕴含一个 EventChannel 对象。
  • 这两个 EventChannel 对象间能够应用 emiton 办法互相发送、监听事件。

二、简略应用:单向传值

A页面:

<button bindtap="navigateToB">跳转B页面</button>
navigateToB () {  wx.navigateTo({    url: '/pages/logs/logs',    success: (res) => {      // 跳转胜利后,触发事件'delivery', 并可携带数据(即第一个参数是事件名,第二个参数是数据包)      res.eventChannel.emit('delivery', {          data: '123'        })      }  })}

B页面:

onLoad() {  // 建设数据通道  const eventChannel = this.getOpenerEventChannel()  // 监听'delivery'事件,并获取数据包  eventChannel.on('delivery', data => {    console.log('on - delivery', data)  })}

通过打印后果看到,数据曾经接管

三、双向通信

跳转到B页面后,如果你还须要 回传一些数据给到A页面

  • 在B页面中依然以 emit 触发事件,并发送数据包;多个事件平铺
  • A页面 wx.navigateTo 中的 events 参数:是页面间通信接口,用于监听被关上页面发送到以后页面的数据

A页面:

navigateToB () {  wx.navigateTo({    url: '/pages/logs/logs',    // events 用于监听下一个页面的事件 及 回传的数据包    events: {      reverseData: (data) => {        console.log('reverseData', data)      },      backData: (data) => {        console.log('backData', data)      }    },    success: (res) => {      // 跳转胜利后,触发事件'delivery', 并可携带数据(即第一个参数是事件名,第二个参数是数据包)      res.eventChannel.emit('delivery', {          data: '123'        })      }  })}

B页面:

onLoad() {  // 建设数据通道  const eventChannel = this.getOpenerEventChannel()  // 监听'delivery'事件,并获取数据包  eventChannel.on('delivery', data => {    console.log('on - delivery', data)  })    // 通过emit向上一个页面回传数据,多个事件平铺  eventChannel.emit('reverseData', {    data: '321'  })  eventChannel.emit('backData', {    data: 'abc'  })}

而后就能够欢快地传大的数据包了hhhh

欢送留言,一起摸索更多~