使用的uniapp+vite+vue3运行的快手小程序,使用了webview嵌入H5页面,但是无法收到H5发送的消息:
<web-view :src="url" ref="webview" @message="handleMessage" />
const handleMessage = (event: any) => {
console.log(event, "event");
uni.showModal({
title: "消息",
content: JSON.stringify(event.detail),
});
};
H5中引入了uniapp的sdk,官网没有快手小程序的sdk,H5代码
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function () {
// navigateTo到快手小程序页面
const navToMINI = function () {
uni.postMessage({
data: {
message: 'msg'
}
})
uni.navigateTo({
url: "/pages/home/notice",
success(res) {
console.log("navi-success", JSON.stringify(res));
document.getElementById("text1").innerHTML = JSON.stringify(res);
},
fail(res) {
console.log("navi-fail", JSON.stringify(res));
document.getElementById("text2").innerHTML = JSON.stringify(res);
},
complete(res) {
console.log("navi-complete", JSON.stringify(res));
document.getElementById("text3").innerHTML = JSON.stringify(res);
},
});
};
// navigateBack到快手小程序页面
const back = function () {
uni.postMessage({ data: "webview通信-后退" });
setTimeout(() => {
uni.navigateBack({
success(res) {
console.log("back-success", JSON.stringify(res));
document.getElementById("text4").innerHTML = JSON.stringify(res);
},
fail(res) {
console.log("back-fail", JSON.stringify(res));
document.getElementById("text5").innerHTML = JSON.stringify(res);
},
complete(res) {
console.log("back-complete", JSON.stringify(res));
document.getElementById("text6").innerHTML = JSON.stringify(res);
},
});
}, 3000);
};
// redirectTo到快手小程序
const redirect = function () {
uni.postMessage({ data: "webview通信" });
setTimeout(() => {
uni.redirectTo({
url: "/pages/home/notice",
success(res) {
console.log("navi-success", JSON.stringify(res));
document.getElementById("text7").innerHTML = JSON.stringify(res);
},
fail(res) {
console.log("navi-fail", JSON.stringify(res));
document.getElementById("text8").innerHTML = JSON.stringify(res);
},
complete(res) {
console.log("navi-complete", JSON.stringify(res));
document.getElementById("text9").innerHTML = JSON.stringify(res);
},
});
}, 3000);
};
document.getElementById("navigateTo").onclick = navToMINI;
document.getElementById("navigateBack").onclick = back;
document.getElementById("redirectTo").onclick = redirect;
});
</script>
3***@qq.com (作者)
更新为uni.webview.1.5.6.js还是没有用呢,在H5中引入了uni.webview的sdk后,使用uni.navigateBack或者navigateTo等都不跳转和返回的,只能使用ks.navigateBack才能跳转,在控制台打印了uni,是有对象的,但是跳转都没反应,发送消息尝试过ks.postMessage和uni.ks.postMessage,但是在uniapp打包的快手小程序运行到快手开发者工具,都接收不到消息,打印不出来
2024-09-19 16:29
代代_123
vue3 微信小程序接收不到H5中postMessage发送的消息
2024-09-23 17:50