consumer-app/pages/webview/webview.vue

<template>
  <view class="webview-page">
    <view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
      <NavHeader title="网页" />
    </view>
    <view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
    <view class="webview-container">
      <!-- #ifdef MP-WEIXIN -->
      <web-view :src="webviewUrl"></web-view>
      <!-- #endif -->
      
      <!-- #ifndef MP-WEIXIN -->
      <view class="unsupported-tip">
        <text>当前平台不支持 WebView</text>
      </view>
      <!-- #endif -->
    </view>
    </view>
  </view>
</template>

<script>
import NavHeader from "@/components/NavHeader/NavHeader.vue";

export default {
  components: {
    NavHeader
  },
  data() {
    return {
      statusBarHeight: 0,
      webviewUrl: ''
    }
  },
  computed: {
    headerHeight() {
      return this.statusBarHeight + 44;
    },
  },
  onLoad(options) {
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
    // 从路由参数获取要加载的 URL
    if (options.url) {
      this.webviewUrl = decodeURIComponent(options.url);
    } else {
      uni.showToast({
        title: '缺少网页地址',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  }
}
</script>

<style lang="scss" scoped>
.webview-page {
  height: 100vh;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header-fixed-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
}

.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.webview-container {
  flex: 1;
  height: 0; // 配合 flex: 1 使用
  
  .unsupported-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    
    text {
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #999999;
    }
  }
}
</style>