uniapp中如何使用eventchannel实现页面间通信

在uniapp开发中，我想通过eventChannel实现页面间的通信，但不太清楚具体的使用方法。比如从A页面跳转到B页面时如何传递数据和事件，以及在B页面如何监听和响应这些事件。能否提供一个详细的示例代码，说明如何初始化eventChannel、发送事件和接收事件？特别想知道如何处理页面关闭时的通信和内存释放问题。

2 回复

在uniapp中，使用eventChannel实现页面间通信：

  1. 跳转页面时传入events参数：
uni.navigateTo({
  url: 'test',
  events: {
    eventName: function(data) {
      console.log(data)
    }
  }
})
  1. 目标页面通过getOpenerEventChannel获取：
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('eventName', {data: 'hello'})
  1. 也可在目标页面监听事件：
eventChannel.on('eventName', function(data) {
  console.log(data)
})

适用于页面跳转时的双向通信。


在 UniApp 中，可以使用 uni.navigateTo 方法中的 events 和 success 回调结合 EventChannel 实现页面间通信。EventChannel 允许页面之间相互发送和监听事件，适用于数据传递和交互。

实现步骤：

  1. 发送页面（A 页面）：通过 uni.navigateTo 跳转时，在 events 中定义监听事件，并在 success 回调中通过 EventChannel 发送数据或事件。
  2. 接收页面（B 页面）：在 onLoad 生命周期中通过 getOpenerEventChannel 获取 EventChannel 对象，监听或发送事件。

示例代码：

A 页面（发送页面）：

// 跳转到 B 页面，并设置事件监听
uni.navigateTo({
  url: '/pages/B/B',
  events: {
    // 监听来自 B 页面的事件
    fromB: (data) => {
      console.log('接收来自 B 页面的数据:', data);
    }
  },
  success: (res) => {
    // 通过 EventChannel 向 B 页面发送数据
    res.eventChannel.emit('fromA', { message: '来自 A 页面的数据' });
  }
});

B 页面（接收页面）：

export default {
  onLoad(options) {
    // 获取 EventChannel 对象
    const eventChannel = this.getOpenerEventChannel();
    
    // 监听来自 A 页面的事件
    eventChannel.on('fromA', (data) => {
      console.log('接收来自 A 页面的数据:', data);
    });

    // 向 A 页面发送数据
    eventChannel.emit('fromB', { message: '来自 B 页面的回复' });
  }
}

注意事项：

  • EventChannel 适用于通过 uni.navigateTo 跳转的页面，其他跳转方式（如 redirectTo）不支持。
  • 事件名需保持一致，避免拼写错误。
  • 适用于单向或双向数据传递，例如表单提交、状态更新等场景。

通过这种方式，可以方便地实现页面间的实时通信。

回到顶部