1、webview必须在vue页面,否则拿不到 this.getAppWebview
2、关键代码为onReady中的代码
3、嵌套的H5页面必须是支持缩放的,Meta标签中user-scable为yes
<template>
<view class="page_wrapper">
<view class="title" :style="{'padding-top':statusHeight+'px'}">
<text class="jnIconFont title_icon" @tap.stop="goBack"></text>
<text class="title_text">{{name}}</text>
</view>
<web-view ref='webview' :src="protocolUrl" class="webview" :webview-styles="webviewStyles"
:style="{'top': mapTop+'px','height': mapHeight+'px'}"></web-view>
</view>
</template>
<script>
var wv;
export default {
data() {
return {
name:'',
//状态栏高度
statusHeight: 0,
//地图顶部距离屏幕顶部的距离
mapTop: 0,
mapHeight: 0,
//地址
protocolUrl: '',
//webview样式
webviewStyles: {
progress: {
color: '#2F69F8'
}
}
}
},
onLoad(option){
let param = '';
try {
// 解码并解析URL参数
param = JSON.parse(decodeURIComponent(option.detail));
} catch (error) {
// 若解析失败,则直接解析原始参数
param = JSON.parse(option.detail);
}
this.name = param.name;
this.protocolUrl = param.webUrl;// 设置组件的protocolUrl属性为参数中的webUrl字段
},
methods: {
/**
* 返回上一页
*/
goBack() {
// 调用uni.navigateBack方法返回上一页
uni.navigateBack({});
}
},
onReady() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview() //获取当前页面的webview对象
setTimeout(()=> {
wv = currentWebview.children()[0]
wv.setStyle({scalable:true,top:this.mapTop+'px'})
}, 1000); //如果是页面初始化调用时,需要延时一下
// #endif
},
created() {
let _that = this;
uni.getSystemInfo({
success: (res) => {
// 存储状态栏高度
_that.statusHeight = res.statusBarHeight;
// 设置地图顶部距离屏幕顶部的距离
_that.mapTop = res.statusBarHeight + uni.upx2px(88);
// 设置地图高度,屏幕高度减去状态栏高度和88upx后,再减去地图顶部距离屏幕顶部的距离
_that.mapHeight = res.screenHeight - res.statusBarHeight - uni.upx2px(88);
}
});
},
}
</script>
<style lang="scss">
.page_wrapper {
background-color: #FFFFFF;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: column;
align-items: center;
justify-content: flex-start;
.title {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: flex-start;
width: 750rpx;
&_icon {
margin-left: 10rpx;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
text-align: center;
color: #333333;
font-size: 44rpx;
}
&_text {
font-size: 32rpx;
font-weight: 500;
text-align: center;
color: #333333;
line-height: 88rpx;
height: 88rpx;
text-align: center;
width: 550rpx;
margin-left: 2rpx;
}
}
.webview {
//margin-top:150rpx;
position: fixed;
width: 750rpx;
left: 0rpx;
right: 0rpx;
bottom: 0rpx;
}
}
</style>