uniapp中webview和H5网页之间互相传参

uniapp中webview和H5网页之间互相传参

1. uni-app 如何发送数据到 H5？

 1.在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：

<template>
	<div>
		<web-view :src="webViewUrl" @message="getMessage"></web-view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				url: '',
			}
		},
		created() {
			this.webViewUrl =
				`http://30.30.127.22:5500/pdf.html?url=${encodeURIComponent(this.url)}` //pdf地址添加参数
		},
		methods: {
			getMessage(e) {
				console.log(e.detail.data)
			},
		},
	}
</script>

2.那么在 H5 中是接收url参数

console.log(getQuery('data'));  //获取 uni-app 传来的值//取url中的参数值
function getQuery(name) {
    // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
    let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    let r = window.location.search.substr(1).match(reg);
    if(r != null) {
        // 对参数值进行解码
        return decodeURIComponent(r[2]);
    }
    return null;
}

2. webview向uniapp传值

1.通过触发UniAppJSBridgeReady监听，使用uni.postMessage传值

<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        //向uniapp传值
        uni.postMessage({
            data: {
                action: 'h5传递的参数'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
    });
</script>  

2.uniapp接收参数

//message接受方法
<template>
    <view>
        <web-view :src="url" @message="getMessage"></web-view>
    </view>
</template>
<script>
	export default {
		methods: {
			getMessage(e) {
				//微信小程序
				// #ifdef MP-WEIXIN
				console.log(e.target.data) //多次postMessage的参数数组
				// #endif
				// #ifndef  MP-WEIXIN
				console.log(e.detail.data)
				// #endif
			},
		},
	}
</script>

*网页向小程序 postMessage 时，不是实时发送的，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html