uni-app web-view组件使用通信时 uni.postMessage不能给小程序主体发送消息

uni-app web-view组件使用通信时 uni.postMessage不能给小程序主体发送消息

开发环境 版本号 项目创建方式
Windows Windows11 HBuilderX

操作步骤：

没有

预期结果：

没有

实际结果：

无法监听

bug描述：

小程序端页面代码如下：

<template>
    <view>
        <web-view src="http://localhost:5173" @message="handleMessage"></web-view>
    </view>
</template>

<script>
export default {
    name: 'Ai-Chat',
    data() {
        return {

        }
    },
    methods: {
        handleLoad() {
            console.log('webview加载完毕')
        },
        handleMessage(event) {
            console.log('事件', event.detail.data) //从webview页面返回小程序主体，此处无法被触发。
        }
    }
}
</script>

<style lang="scss" scoped></style>

web-view中的src指向页面的代码引入了, 其中1.js就是uni.webview.1.5.6.js(我把它复制保存在本地了)

<!--官方的-->
<script type="text/javascript" src="https://gitcode.com/dcloud/uni-app/tree/dev/dist/uni.webview.1.5.6.js"></script>

<!--我的-->
<script type="text/javascript" src="/1.js"></script>

我在web-view指向的页面中写了一个测试按钮, 执行如下函数, uni已经能获取得到了. (这里没有按照官方的监听UniAppJSBridgeReady)

function handleTest() {
    console.log('点击了测试按钮uniapp', uni)
    uni.postMessage({
        data: {
            action: 'message'
        }
    });
}

更多关于uni-app web-view组件使用通信时 uni.postMessage不能给小程序主体发送消息的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

社区发帖的https://ask.dcloud.net.cn/article/40745 说的好像是冲突问题, 具体的我没核实

更多关于uni-app web-view组件使用通信时 uni.postMessage不能给小程序主体发送消息的实战教程也可以访问 https://www.itying.com/category-93-b0.html


看下是不是这个原因呢？

不是的, 用uniapp官方的就不行, wx的就可以

提供一下一个完整的可以运行的项目

已经解决， 谢谢大家

已经解决， 谢谢大家

遇到相同问题了，请教怎么解决的

将sdk里 的uni换个名字即可

在uni-app中，web-view组件与小程序主体的通信确实需要注意几个关键点：

  1. 通信方向：uni.postMessage是从H5页面向小程序发送消息，而小程序通过@message事件监听。你的代码方向是正确的。

  2. 时机问题：虽然你跳过了UniAppJSBridgeReady监听，但必须确保H5页面完全加载完成且uni对象可用后再调用postMessage。建议在页面onLoad或更晚的生命周期中执行。

  3. 数据格式：postMessage发送的数据必须位于data字段内，你的格式是正确的。

  4. 本地调试限制：使用localhost在微信开发者工具中可能被识别为不安全域名，导致通信失败。建议：

    • 配置小程序开发设置中的业务域名
    • 使用内网穿透工具将本地服务暴露为https域名
    • 或先部署到测试服务器进行验证

  5. 版本兼容性：确保使用的uni.webview.js版本与HBuilderX版本匹配。

建议在H5页面添加加载状态判断：

function handleTest() {
    if(typeof uni !== 'undefined' && uni.postMessage) {
        uni.postMessage({
            data: { action: 'message' }
        });
    } else {
        console.error('uni对象未就绪');
    }
}
回到顶部