本文详解 uni-app 中 web-view 组件与 H5 页面的双向通信机制。涵盖 APP 端通过 $getAppWebview 获取实例并注入 JS，以及 H5 端引入 uni SDK 调用 postMessage 发送消息的具体步骤与代码示例。
APP 端获取 Webview 实例与注入 JS
在 APP 开发中，首先需要获取 this.$scope.$getAppWebview() 以拿到当前页面的 webview 实例。拿到该实例后，可以利用 evalJS 方法向网页注入一段 JavaScript 代码，从而实现对网页中对象或函数的调用。
<template>
<view>
<web-view ref="webview" src="http://192.168.1.79:6446/demo.html" @message="handleMessage"></web-view>
</view>
</template>
<script>
var wv;
export default {
onLoad() {
var currentWebview = this.$scope.$getAppWebview(); //获取当前页面的webview对象
setTimeout(function() {
wv = currentWebview.children()[0];
}, 300); //如果是页面初始化调用时，需要延时一下
},
methods: {
// 接收网页中发送来的消息
handleMessage(evt) {
console.log('接收到的消息：' + JSON.stringify(evt));
this.evalJS()
},
evalJS() {
wv.evalJS(`
num+=1; // 网页中的变量
alertaa() // 网页中的事件
`)
}
}
}
</script>H5 端引入 Uni SDK
若要在网页中调用 uni-app 提供的方法，必须在 H5 页面中引入 uni 官方提供的 SDK 文件。
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>基于 postMessage 的消息收发机制
在网页侧，通过调用 uni-app 提供的 postMessage 方法来发送消息。APP 端则需要在 webview 的 message 事件回调中，通过 event.detail.data 属性来接收并处理这些消息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="test">onPostMessage</button>
<p id="num"></p>
<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK，必须引用。 -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
<script>
var num = 1;
document.getElementById("num").innerText = num;
document.getElementById("test").onclick=()=>{
console.log('clickHandle :>> ', );
uni.getEnv(function(res) { // 使用getEnv可以判断当前环境
console.log("当前环境：" + JSON.stringify(res));
});
uni.postMessage({ // 调用uniapp中的postMessage方法
data: {
action: 'onPostMessage'
}
});
}
function alertaa() {
alert("evalJS"+num);
}
</script>
</body>
</html>至此，uni-app 使用 web-view 与网页进行双向通信的配置与代码实现已全部介绍完毕。如需了解更多相关技术细节，建议查阅本站往期文章或继续浏览后续内容，感谢支持。