uniapp小程序web-view与小程序界面通信

前言

简单分享下最近的小程序需求的内容

uniapp--->H5

webUrl为域名+？拼接的信息，然后H5通过域名接收这些内容
例如 https://hao123.com.cn?token=1212

<web-view :src="webUrl" @message="onMessage" ></web-view>

//在下方创建接收message事件的信息
onMessage(event) {
    const data = event.detail.data;
	console.log('Received message from H5:',data);	
	},

H5--->uniapp

需要配置一些兼容的JS-SDK，详情看我的另外一篇文章uniapp-微信小程序与web-view中的@message接收不到信息的解决方法_uniapp webview接收不到事件-CSDN博客

mounted () {
// 可以通过 window.location.href 来获取，然后通过传过来的域名做字符串的截取，
// 举个例子
    const token =window.location.href.split('token=')[1];
    // 获取到token后就是正常web端的内容了
    
    // H5---->小程序发送的消息
    uni.webView.postMessage({  
	    data: {
		    type:'成功通信' 
		} 
	});
}