web-view接收H5外链页面的数据

 最近在做项目的时候有需要外链另一个项目的页面，其中在web-view在接收h5外链页面的时候总是拿不到数据，最后折腾了好长一段时间终于找到解决办法了，这里我就记录下。

uni-app端代码

<template>
	<view>
        <web-view src="这里是外链的url地址"></web-view>
	</view>
</template>

<script>
export default {
		onLoad(){
            // 这里开始监听
			this.listenerLinkPageParams();
		},
		beforeDestroy() {
            // 这里结束监听
			window.removeEventListener("message", this.setLinkPageParams);
		},
		methods:{
			/** 监听接收参数外链页面的参数 */
			listenerLinkPageParams() {
				window.addEventListener("message", this.setLinkPageParams, false);
			},
			
			/** 设置外链的参数 */
			setLinkPageParams(event) {
				console.log(event.data, "这边可以接收到数据");
			},
		},
}
</script>

外链页面的代码

<template>
	<div>
        <div>测试外链的页面</div>
        <div @click="test">点击我，发送数据</div>
    </div>
</template>

<script>
export default {
		methods:{
			/** 测试点击向web-view发送消息 */
			test() {
				 // 向app端发送消息
                window.parent.postMessage("消息内容可以自定义", '*');
			},
		},
}
</script>

就这样😃！