uniapp 中window.onmessage接受的数据怎么传递到页面

在uniapp中，我通过window.onmessage监听到了跨域iframe发来的消息，但是不知道如何将这些接收到的数据传递到vue页面组件中进行处理。尝试过直接修改data里的变量，但页面没有实时更新。请问有什么方法可以正确实现这种数据传递？需要考虑到uniapp的页面生命周期和响应式机制。

2 回复

在uniapp中，使用uni.postMessage接收数据后，可通过uni.$emit发送到页面，页面用uni.$on监听即可。


在 UniApp 中，window.onmessage 主要用于接收来自 WebView 或 iframe 的消息，但 UniApp 本身是跨端框架，页面逻辑通常通过 Vue 组件管理。要将接收的数据传递到页面，可以结合全局状态管理或事件机制。以下是具体方法：

1. 使用全局事件总线（推荐）

在 main.js 中创建事件总线，在接收消息后触发事件，页面监听该事件。

步骤：

  • main.js 中设置事件总线：

    import Vue from 'vue'
export const eventBus = new Vue()
Vue.prototype.$eventBus = eventBus

  • 在接收消息的地方（如 WebView 组件）：

    // 假设在 WebView 组件内
mounted() {
  window.onmessage = (event) => {
    const data = event.data // 获取消息数据
    this.$eventBus.$emit('messageFromWebView', data) // 触发全局事件
  }
}

  • 在目标页面监听事件：

    export default {
  mounted() {
    this.$eventBus.$on('messageFromWebView', (data) => {
      console.log('接收到数据:', data)
      // 更新页面数据或状态
      this.message = data
    })
  },
  beforeDestroy() {
    this.$eventBus.$off('messageFromWebView') // 避免内存泄漏
  }
}

2. 使用 Vuex 全局状态管理

如果项目使用 Vuex，可以直接在接收消息后更新状态。

步骤：

  • store 中定义状态和 mutation：

    // store/index.js
export default new Vuex.Store({
  state: {
    messageData: null
  },
  mutations: {
    setMessageData(state, data) {
      state.messageData = data
    }
  }
})

  • 接收消息时提交 mutation：

    window.onmessage = (event) => {
  this.$store.commit('setMessageData', event.data)
}

  • 页面中通过计算属性或 mapState 获取数据：

    computed: {
  messageData() {
    return this.$store.state.messageData
  }
}

注意事项：

  • 平台兼容性： window.onmessage 在 Web 端和部分 WebView 中有效，但在小程序等非浏览器环境可能不支持，需用条件编译处理。
  • 数据安全： 验证消息来源，避免恶意数据。
  • 生命周期： 确保事件监听在组件销毁时移除。

以上方法简单高效，适用于 UniApp 多端场景。根据项目复杂度选择事件总线或 Vuex。

回到顶部