关于uni-app中使用webview和H5通讯及传参问题

前言

最近在用uni-app开发app时，因为uni-app组件map的regionchange取不到经纬度的问题，只能改用H5自行开发map页面（本人采用的是高德地图）；H5可用本地Html和网络资源，随你心意，话不多说，直接贴代码~

---

一、 uni-app引入webview

<web-view :src="linkUrl" @message="getMessage"></web-view>

二、webview嵌入H5页面

需要先引入uni 的 SDK

<!-- uni 的 SDK，必须引用。 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

H5页面使用uni 的SDK：

1. 先引入uni 的SDK，一定要引用！！
2. 需要使用uni的api的地方要放到 document.addEventListener(‘UniAppJSBridgeReady’, function() { }）这方法里面；
3. 具体可参考这篇文章 戳这里

三、H5页面返回uni-app

document.addEventListener('UniAppJSBridgeReady', function() {
     document.getElementById("cotrol-btn").addEventListener('click',function(){
			//返回上级页面
			uni.navigateBack();
			//跳转到指定页面 
			uni.redirectTo({  
				url: `/pages/login/login`  
			}); 
			//返回上级页面并传递参数 local,根据个人业务
			uni.navigateBack();
			uni.postMessage({
				data: {
					local: _location
				}
			})
		})
	})

H5 在不同的环境有不同的操作，需个人自行判断

	uni.getEnv(function(res) {  
        if (res.plus) {  
            console.log('当前环境为【5+App】');  
        } else if (res.miniprogram) {  
            console.log('当前环境为【微信小程序】');  
        }  
    });  

四、在需要的页面接收参数

	//重点: 监听子页面uni.postMessage返回的值  
	plus.globalEvent.addEventListener('plusMessage', function(msg){  
		 if(msg.data.args.data.name == 'postMessage'){  
			let rlocal = JSON.stringify(msg.data.args.data.arg);
		    console.log(rlocal )
		 }  
	});

---

总结

提示：在使用时要仔细看文档，不要漏掉细节！