
- 发布:2024-12-19 16:46
- 更新:2024-12-19 17:25
- 阅读:110
产品分类: 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