示例图
问题
问题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 ...
