app端：
<template>
<!-- <button @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端：
<!-- 工作台 -->
<template>
<div style="padding-top: 200px;">
工作台
<button @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>
0 个回复