乐趣区

关于微信小程序:小程序页面间通信EventChannel数据量多时

jiezi

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

一、实践前提

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

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

二、简略应用：单向传值

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

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

退出移动版