大力的罗大力
大力的罗大力
  • 发布:2024-12-19 16:46
  • 更新:2024-12-19 17:25
  • 阅读:110

【报Bug】接收不到webview发来的消息

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: PC 开发环境操作系统: Windows PC 开发环境操作系统版本号: 10.0.16299

HBuilderX类型: 正式

HBuilderX版本号: 4.36

手机系统: 全部

手机厂商: 华为

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

Redmi K40、huawei nova 5i

示例代码:

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没有触发

bug描述:

window.addEventListener('message', (e) => {
console.log('Global catch message: ', e);
}, {capture: true});
这个是可以监听到的,@message="handleMessage"这个监听不到

2024-12-19 16:46 负责人:无 分享
已邀请:
靐齉齾麤龖龗

靐齉齾麤龖龗 - 解决不了问题,那就解决提出问题的人

app的话需要在webview的页面里面引入uni的js,然后使用uni.postMessage,参考https://uniapp.dcloud.net.cn/component/web-view.html#postmessage

要回复问题请先登录注册

  • 标题 / 粗斜体
  • 代码片段
  • 超链接 / 图片 / 视频
  • 列表 / 引用

文章内容较多时,可以用标题分段 :

## 大标题 
### 小标题

斜体 / 粗体 :

**粗体** 
*斜体*
***粗斜体***

代码片段 :

``` javascript
代码片段
```

超链接 :

[链接文字](链接地址) 例: [百度](http://www.baidu.com)

图片 :

![图片说明](图片地址) 例: ![百度logo](http://www.baidu.com/img/bdlogo.gif)

视频 :

!![视频说明](视频地址) 例: !![优酷视频](http://youku.com)

有序列表 :

1. 123
2. 123
3. 123

无序列表 :

- 123
- 123
- 123

引用 : ( 双回车后结束引用 )

> 引用内容
引用内容
引用内容