在uniapp和webview外部网页双向通信的两段代码，能够做到在外部的html中向app通信，但是还是无法做到app向html通信，最终的想法是，外部网页用vue文件，但我的vue文件又无法引入uniwebview方法（主要是不会，不知道这个能不能行，所以暂时用html去验证通信功能）求解一下该怎么做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>webviewApp通信测试</title>
</head>
<body>
<div class="post-message-section">
<div class="btn-list">
<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
</div>
</div>
<script type="text/javascript" src="./components/dingweirun/uniwebview.js"></script>
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function () {
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res));
});
// document.addEventListener('UniAppJSBridgeReady', function () {
// uni.postMessage({
// data: {
// action: 'postMessage'
// }
// });
// });
document.getElementById('postMessage').addEventListener('click', function() {
console.log('发送通信消息', uni)
uni.postMessage({
data: {
action: 'back',
name :'aaaa'
}
});
});
});
</script>
</body>
</html>
这个是uniapp的文件
<template>
<view>
<!-- ../../hybrid/html/map.html -->
<!-- http://127.0.0.1:5173/ -->
<!-- http://192.168.199.139:5173/tests -->
<web-view src="http://192.168.168.87:5173/src/index.html" class="aaa" @message="handleMessage"></web-view>
<!-- <view class="btntop">
<button @click="ding">app</button>
</view> -->
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleMessage(evt) {
console.log('app接收到的消息：', evt.detail.data[0].action);
uni.showModal({
content: JSON.stringify(evt.detail.data)
})
// if (evt.detail.data[0].action == 'back') {
// uni.navigateBack({
// delta: 1
// })
// }
}
}
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
.aaa {
width: 100%;
height: 89vh;
}
.btntop {
width: 50px;
height: 50px;
font-size: 5px;
text-align: center;
position: absolute;
top: 25%;
left: 15%;
z-index: 1;
}
</style>
