5***@qq.com
5***@qq.com
  • 发布:2025-11-18 18:18
  • 更新:2025-11-18 19:28
  • 阅读:20

【报Bug】小程序webview接收不到另一个uniapp h5的postMessage消息

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 10 专业版

HBuilderX类型: 正式

HBuilderX版本号: 4.85

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

基础库版本号: 未设置

项目创建方式: HBuilderX

示例代码:

"// 方式1: 使用 @message 事件 (推荐)
const handleMessage = (e) => {
console.log('小程序接收到web-view消息:', e);

// 小程序中消息数据在 e.detail.data 中  
if (e.detail && e.detail.data) {  
    const messageData = e.detail.data[0]; // 取第一个消息  
    console.log('解析后的消息数据:', messageData);  
    processMessage(messageData);  
}  

}

// 方式2: 使用 @onPostMessage 事件 (兼容性)
const handlePostMessage = (e) => {
console.log('通过onPostMessage接收:', e);

if (e.detail && e.detail.data) {  
    const messageData = e.detail.data[0];  
    processMessage(messageData);  
}  

}

// 统一处理消息
const processMessage = (messageData) => {
if (!messageData) return;

switch (messageData.type) {  
    case 'switchCamera':  
        console.log('切换摄像头:', messageData.cameraFlag);  
        // 在这里处理摄像头切换逻辑  
        uni.showToast({  
            title: `切换到${messageData.cameraFlag ? '机场视角' : '无人机视角'}`,  
            icon: 'none'  
        });  
        break;  
    case 'init':  
        console.log('H5页面初始化完成:', messageData.message);  
        break;  
    default:  
        console.log('未知消息类型:', messageData);  
}  

}"

操作步骤:

"<button @click="handlePost">{{ cameraFlag?'机场视角':'无人机视角' }}</button>
try {
// 小程序 web-view 要求的数据格式
uni.postMessage({
data: [messageData] // 必须是数组格式
});
alert('H5页面加载完成');
console.log('通过 uni.postMessage 发送成功');
return true;
} catch (error) {
console.error('uni.postMessage 发送失败:', error);
}"

预期结果:

期望handleMessage能接受到消息信息

实际结果:

没有接收到消息

bug描述:

h5的添加了uni-web-view.js,发送了消息但是小程序无法接受到消息

2025-11-18 18:18 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

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

小程序平台的信息传递不是实时的,是特定时机统一返回。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

要回复问题请先登录注册