uni-app 使用plus.webview.create创建的webview调用uni.postMessage无效

uni-app 使用plus.webview.create创建的webview调用uni.postMessage无效

开发环境 版本号 项目创建方式
Mac 11.4 HBuilderX
iOS

示例代码：

<!-- h5部分代码 -->
payment() {
const { formData } = this
const uni = window.uni
if (window.UniAppJSBridge) {
uni.postMessage({
data: {
action: 'postMessage'
}
})
} else {
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
message: '我是子页面发出的数据'
}
})
})
}
}

<!-- uni-app 部分代码 -->
onLoad (params) {
// #ifdef APP-PLUS
const sys = uni.getSystemInfoSync()
wv = plus.webview.create("", "custom-webview", {
'uni-app': 'none',
height: '90%',
top: sys.statusBarHeight + 44,
popGesture: 'close',
scrollIndicator: 'none'
})
wv.loadURL('/hybrid/html/index.html')
var currentWebview = this.$scope.$getAppWebview()
currentWebview.append(wv)
uni.setNavigationBarTitle({
title: config.MEMBERSHIP_PAYMENT.title
})
plus.globalEvent.addEventListener('plusMessage', function(msg){
console.log(msg.data.args.data.name)
if(msg.data.args.data.name == 'postMessage'){
console.log(msg.data.args.data.arg);
}
})
// #endif
}

操作步骤：

在h5点击按钮触发点击事件，在点击事件里面进行postMessage，在uni-app里面接受数据

预期结果：

能够接收到数据

实际结果：

没有接收到postMessage事件的数据，并且console.log(msg.data.args.data.name)打印出来都是undefined

bug描述：

使用plus.create.webviewAPI创建的webview，在H5页面（使用的vue框架）调用postMessage发送数据在app使用plus.globalEvent.addEventListener(‘plusMessage’)接受的时候发现没有postMessage事件的数据，而且console.log(msg.data.args.data.name)打印出来都是undefined

Image

Image


更多关于uni-app 使用plus.webview.create创建的webview调用uni.postMessage无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

发现问题所在了，原因是引入的sdk版本太低导致的，更新成<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> 即可

更多关于uni-app 使用plus.webview.create创建的webview调用uni.postMessage无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬你是的是不是nvue页面。我的nvue页面plus.globalEvent.addEventListener(‘plusMessage’)不走

nvue 确实有这个问题见 https://ask.dcloud.net.cn/question/133070

回复 青阳_1900: 感谢大佬发的这个帖子。

问下这个监听上了怎么移除，我现在移除就报错

在uni-app中，通过plus.webview.create创建的Webview与普通Webview通信时，uni.postMessage和plus.globalEvent的监听方式需要正确匹配。从您的代码看，问题可能出在以下几个方面：

  1. H5页面中的uni对象未正确识别：在创建的Webview中，H5页面可能无法直接访问window.uni或UniAppJSBridge对象。建议在H5页面中通过window.parent或plus.webview.currentWebview()来获取通信桥梁。

  2. 事件监听参数解析错误：在plus.globalEvent监听器中，msg.data.args.data.name的路径可能不正确。根据官方文档，plusMessage事件的数据结构通常是msg.data直接包含传递的参数。尝试改为：

    plus.globalEvent.addEventListener('plusMessage', function(msg){
  console.log('Received data:', msg.data);
  if (msg.data.action === 'postMessage') {
    console.log('Data received:', msg.data);
  }
});

  3. H5页面发送数据格式不匹配：确保H5页面发送的数据格式与APP端监听器解析方式一致。可以简化H5代码，直接使用：

    payment() {
  if (window.uni && window.uni.postMessage) {
    uni.postMessage({
      action: 'postMessage',
      message: '我是子页面发出的数据'
    });
  }
}
回到顶部