小程序最開始只能全局定義頭部標題欄，也就是說一旦你想某個頁面自定義頭部標題欄，那么所有的頁面都需要重新定義（也就是所有頁面都需要重寫頭部標題欄）；
但現在新版本的微信已經開放了可以單頁面自定義頭部標題欄（很舒服）
只需在你想自定義的頁面的.json下更改一下配置就可（我的是index.json頁面）
然后需要在app.js中動態獲取標題欄的高度（是為了解決iPhone X這種劉海屏的影響）
// 頭部的自定義的高度
statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
然后就可以在需要的頁面（我的是index.wxml頁面）進行代碼書寫了
<!-- 自定義的導航欄 -->
<view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
<image class='nav_logo' src='{{staticImg}}index/nav_logo.png'></image>
<view class='navInput'>
<image src='{{staticImg}}index/nav_search.png'></image>
<input placeholder='搜索你想要的內容' placeholder-class='none' placeholder-style='color:#b3b3b3;font-size:22rpx;'></input>
</view>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>
再在當前頁面.wxss頁面寫出你需要自定義的樣式即可（我的是index.wxss）
/* 自定義導航欄開始 */
.custom{
position: fixed;
width: 100%;
top: 0;
left: 0;
height: 45px;
/* background: #c00; */
z-index: 999;
background: #fff;
}
.nav_logo{
float: left;
margin-left: 22rpx;
margin-top: 22rpx;
margin-right: 15rpx;
display: block;
width:61rpx;
height:47rpx;
}
.navInput{
float: left;
margin-top: 16rpx;
width: 440rpx;
height: 58rpx;
overflow: hidden;
box-sizing: border-box;
padding-left: 60rpx;
background: #eeeeee;
border-radius: 40rpx;
position: relative;
}
.navInput image{
position: absolute;
left: 12rpx;
top: 13rpx;
width:40rpx;
height:40rpx;
}
.navInput input{
width: 100%;
height: 58rpx;
background: #eeeeee;
font-size: 22rpx;
}
.custom text{
display: inline-block;
color: #fff;
font-size: 34rpx;
font-weight: 500;
max-width: 280rpx;
}
.empty_custom{
height: 45px;
width: 100%;
}
/* 自定義導航欄結束 */
custom和empty_custom的高度是px的單位，因為app.js中動態獲取的標題欄高度單位是px,（最后不要動這個高度單位，其他自己寫的樣式可以統一寫為rpx即可）
所以你后面自己所書寫的樣式可以自己定義（1px=2rpx）
當然。你在app.js獲取的高度需要傳回給自定義頁面的js(我的index.js)
const app = getApp()
Page({
data: {
// 頭部導航欄的高度
statusBarHeight: app.globalData.statusBarHeight,
}
})
下面是我的自定義的頁面標題欄（對其他的頁面沒有任何影響）
好了，結束！！！