示例图
问题
问题1：纯H5版vue页面中的uni.postMessage报错未定义 - js文件引用、npm引用都不行；
问题2：H5环境下的webview无法捕捉hybrid/html文件的uni.postMessage消息 - 一点反应都没有；
解决办法
1.纯H5版vue页面中的uni.postMessage报错未定义，那就另辟蹊径，
webview中的vue页面先通过window.location.href跳到项目的hybrid/html某页面中，
再按照官方手册即可引入"uni.webview.1.5.5.js"，即可使用
uni.webView.postMessage({
data: JSON.stringify(sendData)
})
2.H5环境下的webview无法捕捉hybrid/html文件的uni.postMessage消息？
看以下完整代码
window.addEventListener("message", (event) => {
// 全量打印
console.log(event)
}, false)
完整代码
hybrid/html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
</head>
<body><div></div></body>
<!-- 主业务操作 -->
<script type="text/javascript" src="../static/js/uni.webview.1.5.5.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', () => {
uni.webView.getEnv((res) => {
console.log('webview页面：goback')
console.log('当前环境：' + JSON.stringify(res))
// pData.ready = true
})
let sendData = {
action: 'back',
data: {
url: window.location.href
}
}
console.log('webview页面：goback > 跳转命令参数')
console.log(JSON.stringify(sendData))
uni.webView.postMessage({
data: JSON.stringify(sendData)
})
console.log('webview页面：goback > uni.webView.postMessage完成')
console.log('webview页面：goback > 跳转命令发送完成')
})
</script>
</html>commonWebView.vue
<template>
<view>
<!-- 数据加载中 -->
<view class="sysCoverBoxFullAndCenter" v-if="!pData.url">
加载中
</view>
<!-- 数据已加载 -->
<view v-if="pData.url">
<web-view
:webview-styles="webviewStyles"
:src="pData.url"
@message="handleWebviewMessage"
@onPostMessage="handlePostMessage"
></web-view>
</view>
</view>
</template>
<style>
</style>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 风格
const webviewStyles = reactive({
progress: {
color: '#1379ff'
}
})
// 页面数据
const pData = reactive({
// 地址
url: 'https://baidu.rudon.cn/'
})
/**
* APP环境下的接收方法
*/
const handleWebviewMessage = (data) => {
}
// webview向外部发送消息
const handlePostMessage = (data) => {
}
// 页面启动
onLoad(()=>{
// #ifdef H5
// uniapp webview h5 通信 window.postMessage 方式
// https://blog.csdn.net/qq_42313445/article/details/127068570
window.addEventListener("message", (event) => {
// 全量打印
console.log(event)
// 只看关键消息
console.log(event.data)
// hybrid页面通过uni.webView.postMessage传递的data结构
let event_data = event.data.data.arg
console.log(event_data)
}, false)
// #endif
})
</script>
... done ...
