uniapp纯h5的vue页面和上级webview通信 - window.postMessage方式 - 纯H5版vue页面中的webview无法捕捉html文件的uni.postMessage消息

Rudon滨海渔村 2024-06-21 11:33:04 阅读 62

示例图

问题

问题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/127068570window.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 ...

上一篇： Vue学习笔记(黑马前端)

下一篇： DSBridge 和 WebViewJavascriptBridge，王者笔记

本文标签

uniapp纯h5的vue页面和上级webview通信 - window.postMessage方式 - 纯H5版vue页面中的webview无法捕捉html文件的uni.postMessage消息

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。