uniapp默认的页面头部是有一条像浏览器的标签一样的导航栏bar。

它默认显示页面的title 信息，返回按钮等；

这在微信公众号里面，如果用了这个默认的头部，那么在浏览器和微信公众号里面，页面会有两条头部；

为了解决这个问题；

 "globalStyle": {
  "navigationBarTitleText": "站点标题",
  "navigationStyle": "custom", //设置它为custom，表示默认不显示自带的head头部bar，
  //页面的高度是从手机屏幕的0.0位置开始算起。
  //不是所有页面都需要一个head的。在有tabbar的时候，就可以不用头部head。 在子页面里面需要head，并带有返回上一页面按钮；
  "enablePullDownRefresh": false,
  "backgroundColorTop": "#F5F5F5",
  "backgroundColorBottom": "#F5F5F5"
 },

然后自定义一个页面的pageHead 组件，在需要的页面 显示头部bar；

组件的定义如下：

<template>
  <view
    :class="{ 'flex tabs-header': true, 'tabs-header-sticky': sticky }"
    :style="'top:' + (top + (excludeStatusBar ? statusBarHeight : 0) + (excludeNavBar ? navBarHeight : 0)) + 'px;' + styles"
  >
    <slot name="nav">
      <view :class="{ 'tabs-nav': true, 'nav-around': navAround }">
        <view :style="{ fontSize: size }" v-for="(item, index) in navList" :key="index" @click="change(index)" :class="{ 'nav-item': true, 'nav-item-active': index == active }">
          <text>{{ item }}</text>
        </view>
      </view>
    </slot>
    <slot name="navBottom"></slot>
  </view>
</template>

<script setup>
import { ref, onMounted, onActivated, watchEffect, provide, nextTick } from 'vue';

const props = defineProps({
  // 导航列表
  navList: {
    type: Array,
    default: []
  },
  // 当前导航
  current: {
    type: Number,
    default: 0
  },
  // 导航均分布局
  navAround: {
    type: Boolean,
    default: false
  },
  // 支持悬停
  sticky: {
    type: Boolean,
    default: false
  },
  size: {
    type: String,
    default: '16px'
  },
  // 支持悬停
  sticky: {
    type: Boolean,
    default: false
  },
  // 吸顶后距离顶部距离
  top: {
    type: Number,
    default: -2
  },
  // 排除状态栏
  excludeStatusBar: {
    type: Boolean,
    default: true
  },
  // 排除导航栏
  excludeNavBar: {
    type: Boolean,
    default: false
  },
  styles: {
    type: String
  }
});
const statusBarHeight = getApp().globalData.statusBarHeight;
const navBarHeight = getApp().globalData.navBarHeight;
const emit = defineEmits(['change', 'update:current']);
const active = ref(0);

watchEffect(() => {
  active.value = props.current;
});

// 切换导航
function change(index) {
  active.value = index;
  emit('change', index);
  emit('update:current', index);
}
</script>

<style scoped>
.tabs-header {
  padding: 10rpx;
  display: flex;
  flex-direction: column;

  &.tabs-header-sticky {
    position: sticky;
    top: -2rpx;
    z-index: 10;
    background: $uni-bg-color-grey;
  }

  .tabs-nav {
    display: flex;
    flex-wrap: wrap;

    &.nav-around {
      justify-content: space-around;
    }

    .nav-item {
      padding: 20rpx 20rpx;
      font-size: $uni-font-size-base;
      color: $uni-text-color-regular;

      &.nav-item-active .nav-item-name {
        color: $uni-color-primary;
        position: relative;
        font-weight: bold;

        &::after {
          position: absolute;
          left: 50%;
          bottom: -15rpx;
          transform: translateX(-50%);
          content: ' ';
          width: 24rpx;
          height: 6rpx;
          background: $uni-color-primary;
          border-radius: 6rpx;
        }
      }
    }
  }
}
</style>

好了，本文内容全部结束，感谢您的阅读，希望能帮助到您；