【报Bug】web-view组件使用通信时, 使用uni.postMessage小程序接收不到消息

分类：uni-app

bug反馈

产品分类： uniapp/小程序/微信

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 11 专业版 24H2

HBuilderX类型：正式

HBuilderX版本号： 4.66

第三方开发者工具版本号： 1.06.2504030

基础库版本号： 3.10.0

项目创建方式： HBuilderX

示例代码：

小程序代码

<template>  
    <view class="">  
        <view class="" v-if="message!=''">{{message}}</view>  
        <web-view v-else ref="myWebview" :src="graphVisUrl" @load="webLoad" @message="getMessage" @onPostMessage="getMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                courseId:'',  
                graphVisUrl:'',  
                message:''  
            }  
        },  
        onLoad(option) {  
            this.courseId=option.courseId  
            this.graphVisUrl=`https://zxzcs.intelveh.com/graphvis/index.html?courseId=${this.courseId}`  
            console.log(this.graphVisUrl,'this.graphVisUrl');  
        },  
        methods: {  
            webLoad(){  
                // console.log(this.$refs.myWebview,"this.$refs.myWebview");  
                // setTimeout(()=>{  
                    // this.$refs.myWebview.evalJS(`window.handleData(${JSON.stringify(this.graphVisUrl)});`);  
                // },500)  
            },  
            getMessage(e){  
                console.log(e,'getMessage');  
                this.message=JSON.stringify(e)  
            }  
        }  
    }  
</script>  

<style>  

</style>

操作步骤：

引用代码

预期结果：

可以在小程序 @message="getMessage" @onPostMessage="getMessage" 获取到H5中的消息

实际结果：

H5不报错，但是小程序页接收不到消息

bug描述：

H5代码

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" name="viewport">  
        <title>GraphVis</title>  
        <script src="js/log.js"></script>  
        <script src="js/graphvis.min.js"></script>  
        <script src="js/data.js"></script>  
        <script type="text/javascript" src="js/uniWebview.js"></script> 这里是官方https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js复制到本地了  

        <style type="text/css">  
            .page {  
                width: 100%;  
                height: 100vh;  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                padding: 0;  
                margin: 0;  
                background-color: hsla(216, 100%, 96%, 1);  
                background-image: radial-gradient(at 13% 5%, hsla(214, 100%, 37%, 0.29) 0px, transparent 50%), radial-gradient(at 100% 100%, hsla(254, 66%, 56%, 0.11) 0px, transparent 50%), radial-gradient(at 0% 100%, hsla(355, 100%, 93%, 0) 0px, transparent 50%), radial-gradient(at 61% 52%, hsla(227, 64%, 46%, 0.05) 0px, transparent 50%), radial-gradient(at 88% 12%, hsla(227, 70%, 49%, 0.1) 0px, transparent 50%), radial-gradient(at 100% 37%, hsla(254, 68%, 56%, 0) 0px, transparent 50%);  
            }  

        </style>  
    </head>  
    <body class="page">  
        <div class="left-nav">  
            <div id="dataTransmit">向小程序传递消息</div>  

        </div>  
    </body>  
    <!-- <script type="text/javascript" src="js/uniWebview.js"></script> -->  
    <!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->  
    <script type="text/javascript">  
        const textContainer = document.getElementById("dataContainer");  
        textContainer.textContent = `小程序消息`;  
        function getUrlParams() {  
            const params = {};  
            const search = window.location.search.slice(1); // 去除问号 "?"  
            if (search) {  
                search.split('&').forEach(item => {  
                    const [key, value] = item.split('=');  
                    params[key] = decodeURIComponent(value); // 解码特殊字符  
                });  
            }  
            return params;  
        }  

        // 2. 调用接口获取数据  
        async function fetchData(params) {  
            try {  
                // 示例接口地址，需替换为实际接口  
                const response = await fetch(`/api/data?${new URLSearchParams(params)}`);  
                if (!response.ok) {  
                    throw new Error('接口请求失败');  
                }  
                const data = await response.json();  
                // 存储数据供后续渲染使用（如存入全局变量或状态管理）  
                window.pageData = data;  
                console.log('数据获取成功：', data);  
            } catch (error) {  
                console.error('数据获取失败：', error);  
            }  
        }  

        // 3. 页面加载前执行（在 head 中同步执行）  
        const urlParams = getUrlParams();  
        // 确保参数存在再请求（例如必须有 id 参数）  
        // if (urlParams.id) {  
        textContainer.textContent = urlParams.courseId  
        console.log(urlParams, 'urlParams');  
        document.addEventListener('UniAppJSBridgeReady', function() {  
          // uni-app js 加载完成  
          uni.postMessage({  
              data:{  
                  event:"ready",  
                  params:null  
              }  
          })  
        });  
    </script>  
</html>

2025-10-22 16:56 负责人:无分享

1 个回复

DCloud_UNI_yuhe

用官网的示例代码试试呢? https://uniapp.dcloud.net.cn/component/web-view.html#getenv

要回复问题请先登录或注册

【报Bug】web-view组件使用通信时, 使用uni.postMessage小程序接收不到消息

操作步骤：

引用代码

预期结果：

可以在小程序 @message="getMessage" @onPostMessage="getMessage" 获取到H5中的消息

实际结果：

H5不报错，但是小程序页接收不到消息

bug描述：

1 个回复

公告

相关问题

【报Bug】web-view组件使用通信时, 使用uni.postMessage小程序接收不到消息

操作步骤： 引用代码

预期结果： 可以在小程序 @message="getMessage" @onPostMessage="getMessage" 获取到H5中的消息

实际结果： H5不报错，但是小程序页接收不到消息

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

引用代码

预期结果：

可以在小程序 @message="getMessage" @onPostMessage="getMessage" 获取到H5中的消息

实际结果：

H5不报错，但是小程序页接收不到消息