組件化的自定義狀態(tài)欄：
特性：自適應(yīng)狀態(tài)欄高度，不會(huì)出現(xiàn)太高或太低的情況，和微信自帶的狀態(tài)欄高度保持一致。

可以自行修改 wxml文件和 js文件添加自定義功能，如圖標(biāo)、返回按鈕等。

代碼文件如下：
navigator.js

let navHeight = 0
let statusBarHeight = 0
let initFlag = false

Component({
    lifetimes: {
        attached: function () {
            if (!initFlag) {
                let menuButtonObject = wx.getMenuButtonBoundingClientRect();
                wx.getSystemInfo({
                    success: res => {
                        navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) * 2
                        statusBarHeight = res.statusBarHeight
                        initFlag = true
                        this.setData({
                            navHeight: navHeight,
                            statusBarHeight: statusBarHeight
                        })
                    }
                })
            }
            else {
                this.setData({
                    navHeight: navHeight,
                    statusBarHeight: statusBarHeight
                })
            }
        }
    },
})

navigator.json

{
  "component": true
}

navigator.wxml

<view class='custom-navbar'>
    <view class='palce-holder-nav' style="height: {{statusBarHeight}}px;"></view>
    <view class='title' style="height: {{navHeight}}px;">
        <view class="view">居中標(biāo)題</view>
    </view>
</view>

navigator.wxss

.custom-navbar {
  width: 100%;
  background-color: #5cadff;
}

.palce-holder-nav {
  width: 100%;
  height: 20px;
}

.title {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
}

.title>.view {
  width: fit-content;
  color: white;
}

----以下內(nèi)容已過時(shí)-----
首先修改 app.json文件中的 windows字段如下：

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationStyle": "custom"
    }
}

為了避免遮擋用戶手機(jī)頂部狀態(tài)欄，還需要獲取用戶手機(jī)狀態(tài)欄的高度，并在在每個(gè)頁面中添加一個(gè)占位用的 view標(biāo)簽來防止遮擋用戶狀態(tài)欄。

在 app.js文件添加如下代碼：

App({
   onLaunch: function() {
       wx.getSystemInfo({
           success: res=> {
               this.globalData.navHeight = res.statusBarHeight;
           },
       })
   },
   globalData: {
       userInfo: null,
       navHeight: 0,
   }
})

在每個(gè)頁面中添加一個(gè)占位用的 view標(biāo)簽，背景色與自定義的狀態(tài)欄的背景色相同。

不過自定義的狀態(tài)欄背景色一般不要設(shè)置成黑色或者白色，因?yàn)榇蠖鄶?shù)手機(jī)的狀態(tài)欄字體顏色就是黑色和白色。

js文件、wxml文件和wxss文件如下：

//index.js
const app = getApp()

Page({
    data: {
        //從全局變量獲取狀態(tài)欄高度
        navHeight: app.globalData.navHeight,
    },
    onLoad: function () {
    },
    getUserInfo: function (e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
            userInfo: e.detail.userInfo,
            hasUserInfo: true
        })
    }
})

<!--index.wxml-->
<view class='palce-holder-nav' style="height: {{navHeight}}px;"></view>

/*app.wxss*/
.palce-holder-nav{
    width: 100%;
    background-color: red;
}

顯示效果如下：

圖片1

最后就可以在下面添加自定義的狀態(tài)欄，自定義狀態(tài)欄的高度一般剛好超過膠囊的下邊， 這個(gè)高度大概是系統(tǒng)狀態(tài)欄的2倍。

代碼如下：

<!--index.wxml-->
<view class='palce-holder-nav' style="height: {{navHeight}}px;"></view>
<view class='palce-holder-nav' style="height: {{2*navHeight}}px;"></view>

顯示效果如下：

圖片2

使用的時(shí)候在外面再包裹一層view標(biāo)簽：

<!--index.wxml-->
<view class='custom-navbar'>
   <view class='palce-holder-nav' style="height: {{navHeight}}px;"></view>
   <view class='title' style="height: {{2*navHeight}}px;"></view>
</view>

/*app.wxss*/
.custom-navbar{
    width: 100%;
    background-color: red;
}
.palce-holder-nav{
    width: 100%;
}

甚至還可以弄出居中標(biāo)題的效果：

//index.js
const app = getApp()

Page({
    data: {
        navHeight: app.globalData.navHeight,
        title: '這是一個(gè)居中標(biāo)題'
    },
    onLoad: function () {
    },
})

<!--index.wxml-->
<view class='custom-navbar'>
    <view class='palce-holder-nav' style="height: {{navHeight}}px;"></view>
    <view class='title' style="height: {{2*navHeight}}px;">
        <view>{{title}}</view>
    </view>
</view>

/*app.wxss*/
.custom-navbar{
    width: 100%;
    background-color: red;
}
.palce-holder-nav{
    width: 100%;
}
.title{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.title>view{
    width: fit-content;
    color: white;
}

效果圖：

圖片3