<template>

  <web-view :src="url" @message="onWebViewMessage" />

</template>

<script setup>

import { ref } from 'vue'

const url = ref('https://xxxx.com/communication-test.html')

function onWebViewMessage(e) {

  console.log('miniapp-receive-web-view-handleMessage==》', e.detail)

}

</script>

h5：

// 发送消息到小程序

        function sendMessageToMiniProgram() {

            if (!isMiniProgram) {

                addLog('通信', '非小程序环境，无法发送消息');

                return;

            }

            const message = {

                type: 'fromH5',

                data: {

                    timestamp: Date.now(),

                    message: '来自H5页面的消息',

                    userAgent: navigator.userAgent,

                    url: window.location.href

                }

            };

            addLog('发送消息', JSON.stringify(message));

            // 通过wx.miniProgram.postMessage发送消息

            wx.miniProgram.postMessage({

                data: message

            });

            addLog('通信', '消息已发送到小程序');

        }

控制台输出：

invokeAppService postMessage {type: "fromH5", data: {…}}data: {timestamp: 1751278609438, message: "来自H5页面的消息", userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac O…er  miniprogramhtmlwebview miniProgram port/63846", url: "https://xxxx.com/communication-test.html"}type: "fromH5"__proto__: Object 17