H5页面与uni小程序页面相互通信

H5页面与uni小程序页面之间的通信可以通过uni-app提供的uni.postMessage和window.addEventListener方法实现。

在H5页面中，使用uni.postMessage方法向uni小程序发送消息：

uni.postMessage({
  data: 'message from H5 page'
});

在uni小程序页面中，使用window.addEventListener方法监听message事件：

window.addEventListener('message', function(event) {
  console.log('message from H5 page:', event.data);
});

通过这种方式，H5页面和uni小程序页面就可以相互通信了。注意，需要在uni小程序页面的pages.json文件中配置H5页面的路径，同时H5页面需要运行在同一域名下。

相关问题

nvue 与webview的h5通信

nvue 是uni-app框架中的一种渲染方式，它可以将 Vue 组件渲染成小程序原生组件。而 WebView 是在应用程序中嵌入网页的一种组件。

如果需要在 nvue 中与 WebView 进行 H5 通信，可以使用 uni-app 中提供的 WebView 组件的 `bindmessage` 事件和 `postMessage` 方法。

具体步骤如下：

1. 在 WebView 中监听 `message` 事件，可以使用如下代码：

   window.addEventListener('message', function(event) {
     // 处理收到的消息
   });

2. 在 nvue 中使用 WebView 组件进行渲染，并在该组件上绑定 `message` 事件，可以使用如下代码：

   <web-view src="https://example.com" @message="handleMessage"></web-view>

3. 在 nvue 中使用 `postMessage` 方法向 WebView 发送消息，可以使用如下代码：

   this.$refs.webView.postMessage({
     // 发送的消息内容
   });

注意事项：

- 在 WebView 中发送消息时需要使用 `window.parent.postMessage` 方法。
- 在 nvue 中发送消息时需要通过 `this.$refs.webView.postMessage` 方法获取 WebView 组件实例，并调用其 `postMessage` 方法。
- 发送的消息内容需要符合 JSON 格式，可以是任意数据类型的 JSON 序列化结果。