【uniapp】APP内嵌webview消息传递

本文章是记录用来处理app和web页面的消息互相传递

uniapp代码（.vue页面）

<template> <!--vue-webview验证-->
	<view>
		<button @tap="sendMsgToWebview()">按钮1</button>
		<web-view style="width:0; height:0;" src="http://写你自己的网页地址" @message="onMessage" ref="webview"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
			onMessage(arg) {
				console.log('------app收到-----',arg)
			},
			sendMsgToWebview() {
				const
					_funName = 'msgFromUniapp',
					_data = 4444;
				const currentWebview = this.$scope.$getAppWebview().children()[0];
				currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);
			},
		}
	}
</script>
<style>
</style>

web (未使用uni)

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
		<script type="text/javascript" src="./js/uni.webview.js"></script>//这个文件的下载地址我放下面
    </head>
    <body>
        <script>
            // 等待sdk加载
            document.addEventListener('UniAppJSBridgeReady', function() {
                // 向应用发送消息
                uni.postMessage({
                    data: {
                        order: 'playRecord'
                    }
                });
            });
			
			window.msgFromUniapp = function(arg) { //消息接收
				console.log('-----web接收-----',JSON.stringify(arg));
				if(JSON.stringify(arg) == 4444){  //模拟接收信息后立刻回复一条
					console.log('dawiluydgawkljdgwakjdgaw')
					uni.postMessage({
					    data: {
					        order: '回复回复回复'
					    }
					});
				}
			}
        </script>
    </body>
</html>

uni.webview.js 下载地址没了就去uni官网下

【uniapp】APP内嵌webview消息传递

本文章是记录用来处理app和web页面的消息互相传递

uniapp代码（.vue页面）

web (未使用uni)

悦读