uniapp 如何发送广播消息

在uniapp中如何实现发送广播消息？需要兼容多端（H5、小程序、App），有没有具体的代码示例或插件推荐？

2 回复

在 UniApp 中，可通过 uni.$emit 发送全局事件（类似广播），其他页面用 uni.$on 监听。例如：

// 发送
uni.$emit('eventName', data);
// 接收
uni.$on('eventName', (data) => {
  console.log(data);
});

注意在页面销毁时用 uni.$off 移除监听，避免内存泄漏。


在 UniApp 中，发送广播消息通常指通过 全局事件总线 或 状态管理 实现跨页面或组件通信。以下是两种常用方法：

1. 使用全局事件总线（Event Bus）

UniApp 支持 Vue 的 $on、$emit 等方法，可通过全局事件总线发送和监听广播消息。

步骤：

  • 发送广播：使用 uni.$emit(eventName, data) 发送事件。
  • 监听广播：使用 uni.$on(eventName, callback) 监听事件。
  • 移除监听：使用 uni.$off 避免内存泄漏。

示例代码：

// 在发送消息的页面或组件中
sendBroadcast() {
  uni.$emit('globalEvent', { message: '这是一条广播消息' });
}

// 在接收消息的页面或组件中（如 onLoad 或 mounted）
mounted() {
  uni.$on('globalEvent', (data) => {
    console.log('收到广播:', data.message);
  });
}

// 页面销毁时移除监听
beforeDestroy() {
  uni.$off('globalEvent');
}

2. 使用状态管理（如 Vuex）

如果消息涉及全局状态变更，可通过 Vuex 管理状态，结合 mutations 或 actions 触发更新。

示例代码：

// store/index.js
export default new Vuex.Store({
  state: {
    broadcastMessage: ''
  },
  mutations: {
    setBroadcastMessage(state, message) {
      state.broadcastMessage = message;
    }
  }
});

// 发送消息的组件
this.$store.commit('setBroadcastMessage', '广播消息内容');

// 接收消息的组件
computed: {
  message() {
    return this.$store.state.broadcastMessage;
  }
}

注意事项：

  • 事件命名唯一性：避免事件名冲突。
  • 及时清理监听：防止内存泄漏。
  • 适用场景：事件总线适合一次性通信，Vuex 适合状态持久化。

根据需求选择合适的方法即可实现广播功能。

回到顶部