web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
各小程序平台,web-view 加载的 url 需要在后台配置域名白名单,包括内部再次 iframe 内嵌的其他 url 。
一、uniapp webview指定宽高(方式1,没有效果)。
<template>
<view class="maininit">
<view class="web-view">
<view class="top-view"></view>
<web-view :src="url"></web-view>
<view class="bottom-box"></view>
</view>
</view>
</template>
<script>
export default {
data () {
return {
wv: null,
url: "https://www.jianshu.com/u/88de89f5cc2c",
}
},
onLoad () {
},
onReady () {
// #ifdef APP-PLUS
let currentWebview = this.$scope.$getAppWebview();
let boxHeight = 0
uni.getSystemInfo({
success: res => boxHeight = res.windowHeight // 屏幕可用高度
})
setTimeout(() => {
this.wv = currentWebview.children()[0];
this.wv.setStyle({ top: 90, height: boxHeight - 90 })
}, 100)
// #endif
},
methods: {
}
}
</script>
<style>
</style>
以上方式效果没有,有复制了另一个代码片段替换onReady ()方法尝试仍无济于事
onReady() {
var currentWebview = this.$scope.$getAppWebview().children()[0];
//监听注入的js
currentWebview.addEventListener("loaded", function() {
currentWebview.evalJS(
"$('#burlcl .liveHeader').hide();"
);
});
//设置高度样式
currentWebview.setStyle({
top: 50,
height:50,
scalable:true //webview的页面是否可以缩放,双指放大缩小
})
},