uni-byte-sailing-mobile/pages/index/index.vue

<template>
	<view class="content">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<web-view :src="url" :fullscreen='false'></web-view>
	</view>

</template>

<script>
	var wv
	export default {
		data() {
			return {
				title: 'ByteSailing',
				url: 'http://139.9.102.170:20009/#/',
				// url: 'http://139.159.251.109:82/#/',
				//url: 'http://36.134.91.96:10008/#/',
				//url: 'http://36.134.91.96:10007/#/',
				//ehsd测试
				//url:'http://139.9.102.170:10009/#/',
				//ehsd正式
				//url:'http://139.9.102.170:10010/#/',
				//本地调试
				//url:'http://192.168.1.18:8088/',
				src: "",
				canBack: false,
			}
		},
		onBackPress() {
			if (wv && this.canBack) {
				wv.back();
				return true;
			}
			return false;
		},
		onReady() {
			// #ifdef APP-PLUS
			var self = this;
			var currentWebview = this.$scope.$getAppWebview(); 
			//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
			setTimeout(function() {
				wv = currentWebview.children()[0];
				wv.addEventListener(
					"progressChanged",
					function(e) {
						wv.canBack(function(e) {
							self.canBack = e.canBack;
						});
					},
					false
				);
			}, 500); //如果是页面初始化调用时，需要延时一下

			// #endif
		},
		onLoad() {
			var height = 0; //定义动态的高度变量，如高度为定值，可以直接写
			
			uni.getSystemInfo({
				//成功获取的回调函数，返回值为系统信息
				success: (sysinfo) => {
					height = sysinfo.windowHeight; //自行修改，自己需要的高度 此处如底部有其他内容，可以直接---(-50)这种
				},
				complete: () => {}
			});
			let info = uni.getSystemInfoSync();
			let top = info.statusBarHeight;
			var currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
			setTimeout(function() {
				var wv = currentWebview.children()[0];
				wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
					top: top, //此处是距离顶部的高度，应该是你页面的头部
					// bottom:0,//防止输入框被软键盘遮挡
					height: height - top, //webview的高度
					scalable: false, //webview的页面是否可以缩放，双指放大缩小
				})
				// wx.setTitleNViewButtonStyle({
				// 	index:0,
				// 	styles:{
				// 		type:'back'
				// 	}
				// }) 
			}, 1000);
			methods: {

			}
		}
	}
</script>

<style>
	.content {}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>sss