webview默认占用全屏，建议使用uniapp原生导航栏，不然还要自己画，全局关闭的，可以单独页面开启，新增时设置top和bottom
uniapp页面
<template>
<view class="selectPipeline">
<view class="btn">
<button @click="changeBtn" type="default">确认</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 状态栏高度+原生导航高度
topHeight: '',
ifrSrc: '/hybrid/html/selectPipeline.html',
}
},
onl oad() {
this.gpsPosition()
},
methods:{
// 获取经纬度
gpsPosition(){
uni.getLocation({
type: 'gcj02',
success: (res) => {
console.log('当前位置：' , res);
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
this.ifrSrc = this.ifrSrc + '?lng=' + res.longitude + '&lat=' + res.latitude;
this.getSystemInfo()
}
});
},
// 渲染webview页面
init(){
// #ifdef APP-PLUS
// 空出导航栏高度和按钮高度
var wv = plus.webview.create(this.ifrSrc,'',{top:this.topHeight,bottom:'55px'})
var currentWebview = this.$scope.$getAppWebview();
currentWebview.append(wv);
//重点: 监听子页面uni.postMessage返回的值
plus.globalEvent.addEventListener('plusMessage', function(msg){
if(msg.data.args.data.name == 'postMessage'){
console.log('子页面返回的数据为:'+JSON.stringify(msg.data.args.data.arg));
}
});
// #endif
},
// 获取系统信息
getSystemInfo(){
let _this = this
uni.getSystemInfo({
success: function (res) {
console.log('res:',res)
_this.topHeight = (res.statusBarHeight+44) + 'px'
_this.init()
}
})
},
changeBtn(){
console.log("确认选择")
}
}
}
</script>
<style lang="less" scoped>
.btn{
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 5px 10px;
button{
height: 45px;
background-color: #0081ff;
color: #fff;
}
}
</style>
html，需要引入uni.webview.1.5.2.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<title>Document</title>
<style>
body {
background-color:greenyellow;
}
#btn{
margin: 200px auto;
width: 300px;
height: 200px;
font-size: 140px;
}
</style>
</head>
<body>
<button id="btn">按钮</button>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script>
var a=1;
console.log(getQuery('lng'),getQuery('lat')); //获取 uni-app 传来的值
//取url中的参数值
function getQuery(name) {
// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = window.location.search.substr(1).match(reg);
console.log(r);
if(r != null) {
// 对参数值进行解码
return decodeURIComponent(r[2]);
}
return null;
}
document.addEventListener('UniAppJSBridgeReady', function() {
//向uniapp传值
document.querySelector("#btn").addEventListener("click", function () {
uni.postMessage({
data: {
action: ++a,
},
});
});
});
</script>
</body>
</html>