Vent-App/pages/index/index.vue

<template>
  <view class='app-container'>
	<web-view v-if="PageCur == 'tun2D'" src="http://192.168.10.104:8088" @message="handleMessage"></web-view>
	<Device v-if="PageCur == 'device'"/>
	<filecenter
	  :cur="PageCur"
	  v-if="PageCur == 'filecenter'"
	></filecenter>
	<warndata
	  v-if="PageCur == 'warndata'"
	  :cur="PageCur"
	></warndata>
    <u-tabbar
      :value="PageCur"
      @change="NavChange"
      :fixed="true"
	  :placeholder="true"
	  :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        text="通风系统图"
        name="tun2D"
        icon="list-dot"

      ></u-tabbar-item>
      <u-tabbar-item
        text="设备中心"
        name="device"
        icon="calendar"
      ></u-tabbar-item>
	  <u-tabbar-item
	    text="预警分析"
	    name="warndata"
	    icon="plus-circle"
	  ></u-tabbar-item>
	  <u-tabbar-item
	    text="文件共享"
	    name="filecenter"
	    icon="file-text"
	  ></u-tabbar-item>
    </u-tabbar>
	
  </view>
</template>

<script>
import Device from '../device/index.vue'
export default {
	components: {
	  Device,
	},
  data() {
    return {
      PageCur: "tun2D",
	  tun3DPage: null,
	  wv: null, // 定义(app)webview对象节点
	  webV:{}, // 定义(H5)webview对象节点
    };
  },
  
  onLoad: function () {
	this.PageCur = "tun2D";
	
		
	
  },

  mounted:function(){
	this.changeWV()
  },
  onResize(){
  	let _this = this
  	uni.getSystemInfo({  
		success: function(res) {
			if (res.windowWidth > res.windowHeight) {  
			   // 横屏
				// _this.isLandScape = true
				console.log('横屏')
				_this.changeWV(true)
				
			} else {  
			   // 竖屏
				// _this.isLandScape = false
				console.log('竖屏')
				_this.changeWV(false)
				
			}
			
		}  
  	})
  },
  methods: {
    NavChange: function (e) {
      this.PageCur = e;
	  if(e == 'tun2D'){
		this.changeWV()
	  }
    },
	handleMessage(e) {
		
	},
	// 发送消息到 HTML
	sendRequestData(res) {
		const _this = this
		let param = {type:'orientationchange'}
		// App端
		// #ifdef APP-PLUS
		// 页面栈最顶层就是当前webview
		let currentWebview = _this.$scope.$getAppWebview();
		_this.wv = currentWebview.children()[0]
		this.wv.evalJS(`requestData(${param})`);
		
		// #endif
		
		// H5端
		// #ifdef H5
		
		window.addEventListener('message',e => {
			_this.webV = e.source  // window的对象
			console.log(e.data.data.arg,'接收h5页面发来的消息'); // 接收h5页面发来的消息(11)  ====>H5端
		},false)
		
		if(this.webV.postMessage){
			this.webV.postMessage(param)
		}
		
		// #endif
		
		
	},
	changeWV(isLandScape) {
		const _this = this
		  let height = 0; // 动态高度变量
		  let width = 0; // 动态高度变量
		  let statusbar = 0; // 动态状态栏高度
		  uni.getSystemInfo({ // 获取当前设备的具体信息
			success: (sysinfo) => {
				statusbar = isLandScape ? 0 : sysinfo.statusBarHeight + 20;
				height = isLandScape ? sysinfo.windowHeight - sysinfo.statusBarHeight - 20 : sysinfo.windowHeight - sysinfo.statusBarHeight  - sysinfo.statusBarHeight - 38;
				width = isLandScape ? sysinfo.windowWidth : sysinfo.windowWidth
					
				let currentWebview = _this.$scope.$getAppWebview(); // 获取当前web-view
				if(currentWebview){
					var wv = currentWebview.children()[0]; // 获取web-view的子节点（即需要设置样式的元素）
					wv.setStyle({ // 设置web-view距离顶部的距离以及自己的高度,单位为px
						top: statusbar, // 距离顶部的高度,应该是你页面的头部
						height: height ,// webview的高度
						width: width
					});
					wv.reload()
					console.log( width, height, statusbar)
					// _this.sendRequestData([], 1)
				}
				
			}
		  });
		
	}
  },
};
</script>

<style>
.app-container{
	width: 100%;
	height: 100%;
	padding-left: 10rpx;
	padding-right: 10rpx;
}
.tun3D-box{
}
</style>