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

前言
最近在用uni-app开发app时，因为uni-app组件map的regionchange取不到经纬度的问题，只能改用H5自行开发map页面（本人采用的是高德地图）；H5可用本地Html和网络资源

一、 uni-app引入webview，linkUrl为H5的地址。

<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：
需要使用uni的api的地方要放到 document.addEventListener(‘UniAppJSBridgeReady’, function() { }）这方法里面；

三、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 )
    }
});

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！