微信小程序自定义头部状态栏

1、自定义状态中包含a、返回按钮；b、home-icon;c、定位信息；

废话不多说直接上代码：本次书写第一次使用uni-app:有错误地方感谢批评指出
2、DOM结构

<template>
  <view>
    <view class="head_nav" :style="{'height':navBarHeight+'px', 'background-color':barBgColor}">
      <view class="status-bar" :style="{'height':navBarHeight+'px','padding-top':menuTop+'px','background-color':barBgColor}">
        <view class="bar_pr">
          <image class="login_out_btn" @click="getBackPreviousPage()" v-if="isShare === '2'"  src="../static/images/fanhui.png"></image>
          <image class="back_home" @click="getBackHome()" v-if="isHomeIcon === '2'"    src="../static/images/home-icon.png"></image>
          <view class="position_box" v-if="isShowPosition === '2'">
            <image class="position_icon"   src="../static/images/position-b.png"></image>
            <text class="position_text">{{cityData}}</text>
          </view>
          <view class="bar_title">{{topBarName}}</view>
        </view>
      </view>
    </view>
    <!-- 补充底部与内容有间距 -->
    <view class="h128" :style="{'height': menuTop/2+'rpx', 'background-color':barBgColor}"></view>

  </view>
</template>

3、逻辑部分

<script>
// 地图定位
import  map  from '../../utils/map.js';

export default {
  name: '',
  data () {
    return {
      statusBarHeight:'',
      // barBgColor:'#fff',
      topMainHeight:'',
      loading: true,
      navBarHeight: 0, // 导航栏高度
      menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
      menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
      menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
      menuTop:0, //胶囊距离顶部距离
      cityData: '',
    };
  },
  props: {
    topBarName: { // 标题
      type: String,
      default: '首页'
    },
    barBgColor: { // 状态栏背景色
      type: String,
      default: '#fff'
    },
    isShare: {
      type: String,
      default: '2' // '2显示返回按钮否则不显示'
    },
    isHomeIcon: {
      type: String,
      default: '2'// '2显示homeicon否则不显示'
    },
    isShowPosition: {
      type: String,
      default: '1'// '2显示地址定位否则不显示'
    },
  },
  components: {},

  computed: {},
  created() {
    let that = this;
    // 获取经纬度
    if (that.isShowPosition !='1') {
      that.getUserLocation();
    }
    // const that = this;
    // 获取系统信息
    const systemInfo = wx.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    console.log("systemInfo:", systemInfo)
    console.log("menuButtonInfo:", menuButtonInfo)
    let navBarHeight, menuRight, menuBotton, menuHeight, menuTop;
    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
    // navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight ;
    navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
    
    menuTop = menuButtonInfo.top;
    that.navBarHeight = navBarHeight;
    that.menuTop = menuTop;
    
  },
  mounted() {},

  methods: {
    goBack() {
      // 测试多层级页面
      uni.navigateBack({
        delta: 1
      })
      /**
       * 此为突破页面层数限制，
       * 每一个需要这样写
       * wx.navigateTo({
       *  url:'',
       *  fail() {
       *    wx.redirectTo({
       *      url:'',
       *    })
       *  }
       * })
       * */ 
    },
    getBackPreviousPage() {
      // 返回事件
      let that = this;
      that.$emit('onbackpreviouspage', {'xyz':'1231'})
    },
    // getBackHome() {
    //   wx.switchTab({
    //     url: '/pages/index/index',
    //     fail(res) {
    //       console.log('res:', res);
    //     }
    //   })
    // },
    getBackHome(){
      // 返回首页
      let that = this;
      // if (that.data.isShare === '1') {
      //   // 分享进入的，需要清空数据
      //   globalInfo.userInfo = {};
      //   globalInfo.goodsBaseInfo = {};
      //   globalInfo.orderType = '';
      // } else {
      //   globalInfo.goodsBaseInfo = {};
      //   globalInfo.orderType = '';
      // }
      
      uni.switchTab({
        url: '/pages/index/index',
      })
    },
     getUserLocation() {
    // 获取用户的地理位置
    let that = this;
    uni.login({
      success(){
        uni.getSetting({
          success (setingRes){
            console.log('getSetting setingRes:', setingRes);
            
            uni.getLocation({
              type: 'wgs84',
              success(res) {
                console.log('地理位置 res', res);
                if (res && res.errMsg === 'getLocation:ok') {
                  map.getAddress(res.latitude.toFixed(6), res.longitude.toFixed(6), (successRes) => {
                    console.log('successRes:', successRes);
                    let successResData = successRes.result.ad_info;
                    that.cityData = successResData.city;
                  })
                }
                
              }
            })
          }
        })
      }
    })
  },
  }
}

</script>
<style  scoped>

4、样式

.head_nav {
  width: 100%;
  height: auto;
}

.status-bar {
  position: fixed;
  left: 0;
  width: 100%;
  height: 96rpx;
  box-sizing: border-box;
  z-index: 999;
}

.bar_pr {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.login_out_btn{
  float: left;
  width: 32rpx;
  height: 36rpx;
  padding-top:36rpx;
  padding-right: 10rpx;
  padding-bottom: 36rpx;
  padding-left: 22rpx;
  cursor: pointer;
  color:#333;
}
.back_home {
  float: left;
  width: 34rpx;
  height: 34rpx;
  margin: 38rpx 22rpx;
  cursor: pointer;
}
/* 位置 */
.position_box{
  float: left;
  width: 200rpx;
  height: 72rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  box-sizing: border-box;
  padding-left: 22rpx;
}
.position_icon{
  display: inline-block;
  width: 28rpx;
  height: 32rpx;
  margin-right: 16rpx;
}
.position_text{
  display: inline-block;
  width: 160rpx;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size:26rpx;
  font-family:PingFang SC;
  font-weight:500;
  color:rgba(102,102,102,1);
}
.bar_title {
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  font-size:32rpx;
  font-family:PingFang SC;
  font-weight:bold;
  color:rgba(0,6,15,1);
}
.h128{
  width: 100%;
  height: 128rpx;
}

5、非常简单，主要是解决：Android IOS不同屏幕顶部状态栏，高度适应，避免自定义状态栏遮挡下部内容；
有疑问欢迎加 QQ：982701105