uniapp 如何接收广播消息

在uniapp中如何实现接收广播消息的功能？我需要在应用内监听系统广播或自定义广播事件，比如网络状态变化或特定事件的触发。查了官方文档没找到明确的方法，请问应该如何实现？是否需要使用原生插件或uni.$on这类事件监听？希望能提供一个具体的代码示例。

2 回复

在uniapp中接收广播消息，可以使用uni.onSocketMessage监听WebSocket消息。示例代码：

uni.onSocketMessage(res => {
  console.log("收到广播消息：" + res.data);
});

需先通过uni.connectSocket建立WebSocket连接。


在 UniApp 中，接收广播消息通常涉及使用 uni.$on 方法监听全局事件。以下是具体步骤和示例：

实现步骤：

  1. 发送广播：使用 uni.$emit 在任意页面或组件触发事件。
  2. 监听广播：使用 uni.$on 在需要接收的页面或组件中监听事件。
  3. 移除监听：在页面卸载时使用 uni.$off 避免内存泄漏。

示例代码：

发送广播（例如在 A 页面）：

// 触发名为 'messageEvent' 的全局事件，并传递数据
uni.$emit('messageEvent', { data: 'Hello from A page!' });

接收广播（例如在 B 页面）：

export default {
  onLoad() {
    // 监听 'messageEvent' 事件
    uni.$on('messageEvent', this.handleMessage);
  },
  methods: {
    handleMessage(data) {
      console.log('接收到广播消息:', data); // 输出：{ data: 'Hello from A page!' }
      // 在这里处理数据（例如更新页面状态）
    }
  },
  onUnload() {
    // 页面卸载时移除监听，避免重复触发
    uni.$off('messageEvent', this.handleMessage);
  }
}

注意事项：

  • 全局事件总线：uni.$on 和 uni.$emit 是 UniApp 提供的全局事件通信机制，适用于跨页面或组件通信。
  • 事件名唯一性：确保事件名称唯一，避免冲突。
  • 及时清理：在 onUnload 生命周期中移除监听，防止内存泄漏。

如果涉及原生功能（如 Android 的 BroadcastReceiver），需通过 UniApp 的原生插件实现，但常见场景使用上述方法即可。

回到顶部