一、隐藏原生的navigationBar

window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。

"window": { "navigationStyle": "custom" }

二、准备工作

1.获取胶囊按钮的布局位置信息我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点：

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

2.获取系统信息用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();

三、计算公式

自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子：

app.js

App({
    onLaunch: function(options) {
        const that = this;
        // 获取系统信息
        const systemInfo = wx.getSystemInfoSync();
        // 胶囊按钮位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 导航栏高度 = 状态栏高度 + 44
        that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuTop = menuButtonInfo.top;
        that.globalData.menuHeight = menuButtonInfo.height;
    },
    // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
    globalData: {
        navBarHeight: 0, // 导航栏高度
        menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
        menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
        menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
    }
})

app.json

    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationStyle": "custom"
    },
    "sitemapLocation": "sitemap.json"
}

下面为组件代码： /components/navigation-bar/navigation-bar.wxml

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
    <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input>
</view>

<!-- 
    内容区域：
    自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>

/components/navigation-bar/navigation-bar.json

  "component": true
}

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
    properties: {
        // defaultData（父页面传递的数据-就是引用组件的页面）
        defaultData: {
            type: Object,
            value: {
                title: "我是默认标题"
            },
            observer: function(newVal, oldVal) {}
        }
    },
    data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuTop: app.globalData.menuTop,
        menuHeight: app.globalData.menuHeight,
    },
    attached: function() {},
    methods: {}
})

/components/navigation-bar/navigation-bar.wxss

.nav-bar{
position: fixed; 
width: 100%; top: 0;
color: #fff; 
background: #000;
}
.nav-bar .search{ 
width: 60%; 
color: #333;
font-size: 14px;
background: #fff;
position: absolute;
border-radius: 50px; 
background: #ddd; 
padding-left: 14px;
}

以下是调用页面的代码，也就是引用组件的页面： /pages/index/index.wxml

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    }
}

/pages/index/index.json

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    }
}

/pages/index/index.js

const app = getApp();
Page({
    data: {
        // 组件参数设置，传递到组件
        defaultData: {
            title: "我的主页", // 导航栏标题
        }
    },
    onLoad() {
        console.log(this.data.height)
    }
})

微信小程序自定义头部