下面为你整理一份 uni-app 中 WebView 页面与原生页面/父页面通信的实现方法示例（最新版示例 + Vue3 结构），包含 3 种常用通信方式，以及 完整可复制代码。
✅ uni-app 之 WebView 通信实现方法示例（超详细）
在 uni-app 中，我们可以通过 <web-view> 加载 H5 页面，而 H5 与 uni-app 通信主要有三种方式：
⭐ 方法 1：使用 postMessage（推荐）
这是 官方推荐的双向通信方式，兼容性最佳。
📌 一、父页面（uni-app）向 WebView 发送消息
父页面代码：pages/webview/webview.vue
<template>
<web-view :src="url" @message="onMessage"></web-view>
</template>
<script setup>
import { ref } from "vue";
const url = ref("https://example.com/test.html");
// 接收来自 H5 的消息
function onMessage(e) {
console.log("收到 H5 消息：", e.detail.data);
}
</script>
📌 二、H5 页面（test.html）向 uni-app 发送消息
<script>
function sendMsgToApp() {
uni.postMessage({
data: {
msg: "hello uni-app"
}
});
}
</script>
<button onclick="sendMsgToApp()">发送消息给uni-app</button>
📌 三、uni-app 主动发送消息给 H5
父页面使用：
const webview = this.$scope.$getAppWebview().children()[0];
webview.postMessage({ cmd: "changeColor", value: "red" });
H5 端监听：
window.addEventListener("message", function (event) {
console.log("来自 uni-app 的消息：", event.data);
});
⭐ 方法 2：使用事件监听（plus.webview）—— App 端专用
适用于 App 端更复杂的通信（如多页面之间消息互发）。
📌 uni-app 端监听事件
const currentWebview = this.$scope.$getAppWebview();
currentWebview.addEventListener("customEvent", e => {
console.log("收到事件：", e.detail);
});
📌 H5 向 App 派发事件
document.addEventListener("plusready", function() {
plus.webview.currentWebview().evalJS(`
uni.$emit('customEventFromH5', { msg: '来自H5的事件' });
`);
});
⭐ 方法 3：JSBridge（高级方式）
适合做 深度原生扩展 或 调用原生功能。
📌 uni-app 暴露方法给 H5 调用
写在 uni-app 页面：
window.invokeFromH5 = function (data) {
console.log("H5 调用了 APP 方法", data);
};
📌 H5 调用：
window.invokeFromH5 && window.invokeFromH5("hello");
🌟 最完整双向通信案例（可直接用）
下面是一个最常用的完整通信示例：
📌 uni-app 页面：pages/webview/index.vue
<template>
<view class="content">
<button @click="sendToH5">发消息给H5</button>
<web-view :src="url" @message="receiveFromH5"></web-view>
</view>
</template>
<script setup>
import { ref } from "vue";
const url = ref("/hybrid/h5/index.html");
// 接收 H5 消息
function receiveFromH5(e) {
console.log("收到 H5 消息：", e.detail.data);
}
// 发消息给 H5
function sendToH5() {
const webview = getCurrentPages().pop().$getAppWebview().children()[0];
webview.postMessage({
msg: "这是来自 uni-app 的消息"
});
}
</script>
📌 H5：hybrid/h5/index.html
<!DOCTYPE html>
<html>
<body>
<h3>H5 页面</h3>
<button onclick="sendToApp()">发消息给 APP</button>
<script>
// H5 -> uni-app
function sendToApp() {
uni.postMessage({
data: {
text: "来自 H5 的消息"
}
});
}
// uni-app -> H5
window.addEventListener("message", function (event) {
console.log("收到来自 uni-app 的信息：", event.data);
});
</script>
</body>
</html>
📌 三种方法对比表
| 方法 | 适用端 | 优点 | 缺点 |
|---|---|---|---|
postMessage | App、小程序、H5 | 官方推荐、双向通信、最稳定 | 不能执行 JS 代码 |
plus.webview | 仅 App | 功能强、可 evalJS | 只能 App 用 |
| JSBridge | App | 灵活可扩展 | 需自己设计协议 |