用uni-app 写的app 打包成 h5, 嵌入到 另一个 uni-app 的 app 中，h5 向 app 发送消息

Question

用uni-app 写的app 打包成 h5, 嵌入到 另一个 uni-app 的 app 中，怎么使用 web-view ，h5 向 app 发送消息

Answer 1

让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。

如果答案让您满意，请采纳、关注，非常感谢！

在uni-app中使用web-view组件嵌入H5页面，并实现H5向App发送消息，可以通过uni-app提供的事件通信机制来实现。 首先在嵌入的H5页面中，使用uni-app提供的插件`uni.postMessage`来向App发送消息，具体示例代码如下：

uni.postMessage({
  data: 'Hello App!'
});

然后在包含web-view组件的uni-app页面中，监听web-view组件的消息事件，获取H5发送的消息，并处理。示例代码如下：

<template>
  <view>
    <web-view id="web-view" :src="url" @message="onMessage"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      url: 'http://your-h5-page-url.com'
    };
  },
  methods: {
    onMessage(e) {
      console.log('Message from H5 page: ' + e.detail);
      // Handle the message from H5 page
    }
  }
}
</script>

通过上述方法，你可以在H5页面中通过uni.postMessage方法向App发送消息，并在包含web-view组件的uni-app页面中通过监听message事件来接收并处理H5发送的消息。