3***@qq.com
3***@qq.com
  • 发布:2024-09-17 16:49
  • 更新:2024-10-23 17:34
  • 阅读:142

快手小程序webview无法接收到H5中postMessage发送的消息

分类:uni-app

使用的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>
2024-09-17 16:49 负责人:无 分享
已邀请:
DCloud_uni-ad_HDX
  • 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

x***@163.com

x***@163.com

遇到同样问题,怎么解?

要回复问题请先登录注册