uni-app中nvue页面如何监听5+创建的webview内h5发出的uni.postMessage

发布于 1周前 作者 songsunli 来自 Uni-App

问题描述

vue页面可以通过globalEvent.addEventListener监听到：

plus.globalEvent.addEventListener('plusMessage', function(msg){    
     if(msg.data.args.data.name == 'postMessage'){     
         console.log('子页面返回的数据为:'+JSON.stringify(msg.data.args.data.arg));    
    }    
});

但在nvue页面无论是上面的方法还是通过$on，都无法监听到postMessage。请问在nvue页面如何监听postMessage，最好能提供一个示例。

最小复现demo见下方安装包：demo.zip

参考文档: vue-向-nvue-通讯

版本信息

项目创建方式 基座版本
未提及 3.4.15

Harmonyos Next教程
6 回复

webview和uni-app的双向通信可以使用以下方式：
webview/h5 发送消息： plus.webview.postMessageToUniNView({
type: ‘toUniAPP’,
args: {
arg1: ‘123’
}
}, ‘__uniapp__service’); uni-app 接受消息： plus.globalEvent.addEventListener(‘plusMessage’, (message)=>{
// message打印的结果：
// {
// “data”: {
// “type”: “toUniAPP”,
// “args”: {
// “arg1”: “123”
// }
// },
// “targetId”: “__uniapp__service”,
// “originId”: “NWindow101677899611098”
// }
})


这个方法也是在vue页面可以,在nvue页面就不行了

回复 feat: 大佬，解决了吗

回复 1***@qq.com: 换vue页面了,而且addEventListener这个方式监听如果不移除监听,后续再进入页面会重复触发,但监听的plusMessage是系统内部事件,不确定移除后会有什么影响,所以目前在用 [ webview组件+5+api操控webview的大小与位置 ] 的方案

nvue页面还是监听不到这个，请问现在有办法了吗？

在uni-app中，如果你需要在nvue页面监听通过5+ API创建的webview内H5页面发出的uni.postMessage消息，你可以结合5+的plus.webview对象与addEventListener方法来实现。以下是一个示例代码，展示了如何在nvue页面中实现这一功能。

nvue页面代码示例

首先，确保你的nvue页面已经创建了一个webview，并且加载了H5页面。

<template>
  <div>
    <web-view id="my-webview" src="http://your-h5-page-url.com"></web-view>
  </div>
</template>

<script>
export default {
  onLoad() {
    // 获取webview对象
    const webview = plus.webview.getWebviewById('my-webview');

    // 监听message事件
    webview.addEventListener('message', (event) => {
      // event.message即为H5页面通过uni.postMessage发送的数据
      console.log('Received message from H5:', event.message);
      // 你可以在这里处理接收到的消息
      this.handleMessage(event.message);
    });
  },
  methods: {
    handleMessage(message) {
      // 处理接收到的消息，例如解析JSON数据
      try {
        const data = JSON.parse(message);
        // 根据data执行相应操作
        console.log('Parsed message:', data);
      } catch (error) {
        console.error('Error parsing message:', error);
      }
    }
  }
}
</script>

<style>
/* 样式根据需要调整 */
</style>

H5页面代码示例

在你的H5页面中，你可以使用uni.postMessage来发送消息到nvue页面中的webview。

// 发送消息到nvue页面
uni.postMessage({
  data: JSON.stringify({
    type: 'example',
    content: 'Hello from H5!'
  })
});

注意事项

  1. 确保5+环境：上述代码依赖于5+ API，因此请确保你的应用是在5+环境中运行，如HBuilderX打包的App。
  2. 消息格式：在发送和接收消息时，注意数据格式的一致性。本例中，H5页面发送的是JSON字符串，nvue页面接收后需要解析。
  3. 错误处理：在实际应用中，应添加更多的错误处理逻辑，以确保应用的健壮性。

通过上述代码，你可以在uni-app的nvue页面中监听通过5+创建的webview内H5页面发出的uni.postMessage消息，并根据消息内容执行相应的操作。

回到顶部