- 发布：2022-11-29 17:00
- 更新：2022-12-12 01:27
- 阅读：360
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macOS Monterey 12.5
HBuilderX类型： Alpha
HBuilderX版本号： 3.6.10
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
index.nvue代码
<template>
<web-view style="flex: 1;" src="https://apps.e-forward.cn/webview/test.html" ref="webview" class="webview" @onPostMessage="handlePostMessage" @message="handleMessage"></web-view>
<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
</template>
<script>
export default {
methods: {
// webview向外部发送消息
handlePostMessage: function(data) {
console.log("接收到消息 handlePostMessage：" + JSON.stringify(data.detail));
},
// webview向外部发送消息
handleMessage: function(data) {
console.log("接收到消息 handleMessage：" + JSON.stringify(data.detail));
},
// 调用 webview 内部逻辑
evalJs: function() {
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
}
}
}
</script>
test.html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<h1>测试</h1>
<script>
window.onerror = function () {
// msg,url,line,col,error
alert('err => ' + JSON.stringify(arguments))
}
</script>
<script src="uni.webview.1.5.4.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
alert('UniAppJSBridgeReady')
uni.postMessage({
data: {
action: 'ready',
msg: 'ok'
}
});
});
window.postMessage('helo', '*');
</script>
</body>
</html>
index.nvue代码
<template>
<web-view style="flex: 1;" src="https://apps.e-forward.cn/webview/test.html" ref="webview" class="webview" @onPostMessage="handlePostMessage" @message="handleMessage"></web-view>
<button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>
</template>
<script>
export default {
methods: {
// webview向外部发送消息
handlePostMessage: function(data) {
console.log("接收到消息 handlePostMessage：" + JSON.stringify(data.detail));
},
// webview向外部发送消息
handleMessage: function(data) {
console.log("接收到消息 handleMessage：" + JSON.stringify(data.detail));
},
// 调用 webview 内部逻辑
evalJs: function() {
this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");
}
}
}
</script>
test.html代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<h1>测试</h1>
<script>
window.onerror = function () {
// msg,url,line,col,error
alert('err => ' + JSON.stringify(arguments))
}
</script>
<script src="uni.webview.1.5.4.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
alert('UniAppJSBridgeReady')
uni.postMessage({
data: {
action: 'ready',
msg: 'ok'
}
});
});
window.postMessage('helo', '*');
</script>
</body>
</html>操作步骤：
参考管理员可见附件中的demo文件压缩包
参考管理员可见附件中的demo文件压缩包
预期结果：
能够收到消息
能够收到消息
实际结果：
收不到消息
收不到消息
bug描述：
经过测试vue2（纯nvue模式）、vu3（nvue页面）安卓和ios均有此问题
无法收到网页内的@onPostMessage和@message都收不到
网页内window.postMessage和uni.postMessage 也都试过 也都不行
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
我是mac hbx 3.6.10
alert 线程会暂停，我测试了，关闭alert后，可以接收
有需要更强大的原生插件可以看
WebView与原生双向通信交互，支持plus、vue、nvue里的WebView：https://ext.dcloud.net.cn/plugin?id=9832
