uni-app web-view内嵌网页

红朝
2023-12-01

内嵌网页 应用与网页间的通信

在使用uni-app开发的app应用里内嵌非应用内的静态文件的网页,相互通信分两种情况
首先附上uni-app web-view官网链接web-view介绍

1、网页向应用传值

应用中监听 web-view 的 message 事件

<template>  
    <view>  
        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleMessage(evt) {  
                console.log('接收到的消息:' + JSON.stringify(evt.detail.data));  
            }  
        }  
    }  
</script>

从 网页 向应用发送消息

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
    });  
});

详情可参考链接 <

 类似资料: