Vent-App/pages/index/index.vue

<template>
  <view class="app-container">
    <web-view
      v-if="PageCur == 'tun2D'"
      src="http://192.168.183.216: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>