微信小程序 --- 自定义导航栏

在小程序中调试中一般用的苹果调试器，但我们的大多人用的手机是安卓机，所以要是自定义头部的话需要兼容安卓机以及苹果手机，

获取小程序里面胶囊的位置

通过微信原生的API wx.getMenuButtonBoundingClientRect()获取菜单按钮（右上角胶囊按钮）的布局位置信息，坐标信息以屏幕左上角为原点

获取设备系统信息

wx.getSystemInfoSync() 或者 wx.getSystemInfo()获取设备的系统信息里面的信息栏的高度
安卓与苹果机的区别是安卓的信息栏高是28px;苹果的是20px; 注意：信息栏是单位是px; 

第一步配置app.json

       "usingComponents": {
        "header": "/components/header/header"  //可以在每个页面调用header组件
      },
      "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "我的demo",
        "navigationBarTextStyle": "black",
        "navigationStyle":"custom"
      },

在app.js中获取设备的信息

App({
  onLaunch(){
     this.getSystemInfo();
  },
  onShow(){},
  onHide(){},
  // 获取设备的信息，控制标题栏的高度
  getSystemInfo:function(){
    let systemInfo = wx.getSystemInfoSync() || wx.getSystemInfo();
    let rich = wx.getMenuButtonBoundingClientRect() ? wx.getMenuButtonBoundingClientRect() : null;
    let navBarHeight = 2 * (rich.top - systemInfo.statusBarHeight) + rich.height;
    this.globalData.navBarHeight = navBarHeight;
    this.globalData.marginTop = systemInfo.statusBarHeight;
  },

  globalData:{
    navBarHeight:44,
    marginTop:20
  }
})

第三步创建组件(header) header.wxml

    <!-- 自定义头部 -->
<view class="position" style="100%;height:{{navBarHeight+marginTop}}px;">
    <view class="nav_header" style="100%; height:{{navBarHeight}}px;line-height:{{navBarHeight}}px;margin-top:{{marginTop}}px">
    <!-- 后期可以自己放图片 -->
    <text bindtap="tapBackHandler" wx:if="{{back}}" class="back"> {{back}} </text>
    <text> {{title}}</text>
    </view>
</view>
<!-- 定位之后的空白标签的占位 -->
<view style="height:{{navBarHeight+marginTop}}px; 100%"></view>  

header.wxss

.position{
  position: fixed;
  background: #fff;
  z-index: 22;
}

.nav_header{
  background: #fff;
  color: #000;
  text-align: center;

}
.nav_header>.back{
  position: absolute;
  display: inline-block;
   80rpx;
  height: 80rpx;
  left: 20rpx;
  line-height: 80rpx;
  transform: scale(1,2)
}

header.js

var app = getApp()
Component({
  properties:{
    title:String,
    back:String
  },
  data:{
    navBarHeight: app.globalData.navBarHeight,
    marginTop: app.globalData.marginTop
  },
  methods:{
    tapBackHandler(){
      wx.navigateBack({
        delta:1
      })
    }
  }
})

header.json

//将这个文件定义为组件
{
  "usingComponents": {},
  "component":true
}

其他页面的引入

 <header title="首页"></header>