uni-app app使用web-view嵌入h5 无法向h5通信 一直报错

uni-app app使用web-view嵌入h5 无法向h5通信 一直报错

产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：15.2

HBuilderX类型：正式

HBuilderX版本号：4.76

手机系统：iOS

手机系统版本号：iOS 18

手机厂商：苹果

手机机型：iphone13

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

app端：

<template>
  <!-- <button [@click](/user/click)="sendMessageToWeb"></button> -->
  <view>
    <web-view ref="webView"  @message="onMessageFromWeb" @error="handleWebViewError" src="http://172.16.9.163:3001/work/index?transition=1"></web-view>
  </view>
</template> 
<script setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue'
const webView = ref(null)
const state = reactive({ })

// 接收网页发送过来的消息
const onMessageFromWeb = (e) => {
console.log(e.detail.data[0], "onMessageFromWeb")
const type = e.detail.data[0].action
sendMessageToWeb()
}

// 处理 WebView 加载错误（如 H5 地址不可访问）
const handleWebViewError = (e)=> {
console.error('WebView 加载错误', e);
uni.showToast({ title: '页面加载失败，请重试', icon: 'none' });
}

// 向 WebView 发送消息
const sendMessageToWeb = () => {
if (!webView.value) return;
// 调用 H5 全局函数（H5 需提前定义 window.handleAppReply）
const replyScript = ` if (window.handleAppMessage) { window.handleAppMessage(${JSON.stringify({ a: 10 })}); } `;
// 通过 evalJS 执行 H5 函数，传递回复数据
webView.value.evalJS(replyScript);
}
onBeforeMount(() => {})
onMounted(() => {})
</script>
<style lang='scss' scoped></style>

h5端：
```vue
<!-- 工作台 -->
<template>
<div style="padding-top: 200px;">
工作台
<button [@click](/user/click)="handleSend">发送消息</button>
<Tabbar :activeTab="1"></Tabbar>
</div>
</template> 

<script setup>
defineOptions({
name: 'workIndex'
})
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue'
const state = reactive({ })

const handleSend = () => {
webViewJs.postMessage({ data: { action: 'xxx' } })
}

onBeforeMount(() => {})
onMounted(() => { 
window.handleAppMessage = (data) => {  
    console.log('收到 App 回复', data);  
    alert('收到 App 回复' + JSON.stringify(data));  
}; 
})
</script>
<style lang='scss' scoped></style>