5***@qq.com
5***@qq.com
  • 发布:2022-05-26 10:32
  • 更新:2025-10-15 14:55
  • 阅读:7331

App中web-view @onPostMessage接收不到消息

分类:uni-app

测试代码就是web-view里面的页面向外面应用发送消息,外面应用打印发送的消息
外面的页面代码:

<template>  
    <view>  
        <view class="status_bar"></view>  
        <web-view :src="releaseUrl" @onPostMessage="handlePostMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                releaseUrl: '/hybrid/html/a.html'  
            }  
        },  
        methods: {  
            // webview向外部发送消息  
            handlePostMessage: function(data) {  
                console.log("接收到消息:" + JSON.stringify(data.detail));  
            }  
        }  
    }  
</script>

web-view里面的页面:

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>测试</title>  
    </head>  
    <body>  
        <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.2/index.js"></script>  
        <script>  
            function sendMessage() {  
                try {  
                    uni.postMessage({  
                        data: {  
                            action: 'message'  
                        }  
                    });  
                }catch(e){  
                    alert(e)  
                }  
            }  
        </script>  
        <button onclick="sendMessage()" style="margin-top: 50px;">按钮</button>  
    </body>  
</html>

不知道为什么外面接收不到消息

2022-05-26 10:32 负责人:无 分享
已邀请:

最佳回复

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

此贴存在时间太久,如果有类似问题请参考下面方案解决。

完全不能通信

如果你测试 app 和 webview 通信异常,如果完全不能通信,可参考 HBuilderX 内置的 hellouniapp 模板,参考 webview 的具体操作步骤,看三方页面如何使用 jssdk。

参考文档 https://uniapp.dcloud.net.cn/component/web-view.html

安卓正常,鸿蒙不正常

如果是安卓和 ios 正常,鸿蒙不正常,参考 hellouniap 里三方页面的 jssdk 的版本是否小于 1.x,特别老的版本 0.x 版本不支持鸿蒙,推荐使用 1.5.6 的版本
https://uniapp.dcloud.net.cn/component/web-view.html

小程序 元服务不正常

如果是小程序平台、鸿蒙元服务平台,这里平台限制不允许实时通信,只能再特定的节点一次性返回通信结果,比如路由切换

向小程序发送消息,会在以下特定时机触发组件的message事件:小程序后退、组件销毁、分享、复制链接

参考 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

1***@qq.com

1***@qq.com

你好我也是在uniapp中使用vue的,@message收不到消息,但是我的控制台可以正确打印,invokeAppService postMessage {action: "123456"} 148

  • 小菜啊

    你是微信小程序么

    2023-10-20 15:22

  • 2***@qq.com

    我也是,我怀疑这些人文档都不认真写

    2023-10-23 10:50

  • 5***@qq.com

    微信小程序同样的为,请问解决了吗

    2023-11-03 09:00

  • 2***@qq.com

    回复 5***@qq.com: 你好,请问你的解决了吗,我小程序端也遇到这个问题了

    2024-09-03 16:35

  • 2***@qq.com

    回复 小菜啊: 你好,请问你的解决了吗,我小程序端也遇到这个问题了

    2024-09-03 16:35

  • x***@163.com

    回复 2***@qq.com: 哥们,您这web-view 的问题解决了没 ? 我用onPostMessage 方法触发不了 用Message 发现只有当小程序的路由变了之后才可以…

    2024-09-26 10:36

5***@qq.com

5***@qq.com (作者)

哦,我看了下文档,我用的是app-vue,所以不能使用@onPostMessage,应该用@message

FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

x***@163.com

x***@163.com

哥们,您这web-view 的问题解决了没 ? 我用onPostMessage 方法触发不了 用Message 发现只有当小程序的路由变了之后才可以…

  • BoredApe

    网页向小程序 postMessage 时,只会在以下特定时机触发并收到消息:小程序后退、组件销毁、分享、复制链接

    2024-09-26 10:38

  • x***@163.com

    回复 BoredApe: 好的,那麻烦问您下 怎么才能实时啊

    2024-09-26 10:42

  • x***@163.com

    api写的 @onPostMessage EventHandler 网页向应用实时 postMessage 我用这个也不行… 哎难受啊

    2024-09-26 10:43

  • BoredApe

    回复 x***@163.com: 小程序无法实时,可以借助uniCloud,websocket中转一下

    2024-09-26 10:51

8***@qq.com

8***@qq.com

webView 和小程序的通讯,不能实时通讯是微信小程序侧的限制,可以参考微信官方文档;
因此uni-app 文档中 @onPostMessage,应该指的是仅支持 APP 侧。

要回复问题请先登录注册