我爱模板网 > 建站教程 > 前端框架 >  关于uni-app中使用webview和H5通讯及传参问题正文

关于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 )
    }
});



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:Vue3自定义组件slots设置默认值 下一篇:Invalid Host header服务器域名访问出现的问题
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢