- 发布：2024-12-19 16:46
- 更新：2024-12-19 17:25
- 阅读：24
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： PC 开发环境操作系统： Windows PC 开发环境操作系统版本号： 10.0.16299
HBuilderX类型： 正式
HBuilderX版本号： 4.36
手机系统： 全部
手机厂商： 华为
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
uniapp代码：
<template>
<view>
<web-view v-if="showWebview" :webview-styles="webviewStyles" @message="handleMessage" src="http://localhost/#/pages/login222"></web-view>
</view>
</template>
<script setup>
import {ref} from "vue";
const showWebview = ref(true)
const detail = ref('')
const webviewStyles = {
progress: {
color: '#FF3333'
}
}
const handleMessage = (e) => {
console.log('e.detail', e.detail)
detail.value = e.detail
}
</script>
webview代码：
<template>
<view class="login">
<button @click="handleXXX" class="login_btn">xxx</button>
</view>
</template>
<script setup>
const handleXXX = () => {
console.log('handleXXX is called.');
window.parent.postMessage(JSON.stringify({data: '测试11'}), "*");
}
</script>
manifest.json代码：
"h5" : {
"title" : "ccc",
"Webview": {
"DomainList": ["http://localhost","http://192.168.0.108"]
}
},
uni-app 的版本：4.36，浏览器：版本 131.0.6778.86（正式版本） （64 位）
console.log('handleXXX is called.');打印了
问题是：console.log('e.detail', e.detail)没有打印
没有任何报错
uniapp代码：
<template>
<view>
<web-view v-if="showWebview" :webview-styles="webviewStyles" @message="handleMessage" src="http://localhost/#/pages/login222"></web-view>
</view>
</template>
<script setup>
import {ref} from "vue";
const showWebview = ref(true)
const detail = ref('')
const webviewStyles = {
progress: {
color: '#FF3333'
}
}
const handleMessage = (e) => {
console.log('e.detail', e.detail)
detail.value = e.detail
}
</script>
webview代码：
<template>
<view class="login">
<button @click="handleXXX" class="login_btn">xxx</button>
</view>
</template>
<script setup>
const handleXXX = () => {
console.log('handleXXX is called.');
window.parent.postMessage(JSON.stringify({data: '测试11'}), "*");
}
</script>
manifest.json代码：
"h5" : {
"title" : "ccc",
"Webview": {
"DomainList": ["http://localhost","http://192.168.0.108"]
}
},
uni-app 的版本：4.36，浏览器：版本 131.0.6778.86（正式版本） （64 位）
console.log('handleXXX is called.');打印了
问题是：console.log('e.detail', e.detail)没有打印
没有任何报错
操作步骤：
如上代码
如上代码
预期结果：
handleMessage会触发
handleMessage会触发
实际结果：
handleMessage没有触发
handleMessage没有触发
bug描述：
window.addEventListener('message', (e) => {
console.log('Global catch message: ', e);
}, {capture: true});
这个是可以监听到的，@message="handleMessage"这个监听不到
1 个回复
靐齉齾麤龖龗 - 解决不了问题，那就解决提出问题的人
app的话需要在webview的页面里面引入uni的js，然后使用uni.postMessage，参考https://uniapp.dcloud.net.cn/component/web-view.html#postmessage