這個需求要不是UI和我講有其他小程式實現了，我都還以為小程式還不能做到自定義導航。還好是在設計階段給出的需求，不然。。。

先看看效果吧

微信小程式自定義導航欄

開始接介紹用法：

1：配置app.json

掃碼都別管，先檢視文件window配置
然後在app.json設定navigationStyle為custom（自定義導航欄）

注意!: 如果這裡設定為自定義導航，那麼所有頁面都會變成自定義導航；想在其他頁面的.json檔案配置自定義導航是沒用的，所以後面需要用到template模板或者component元件

2：瞭解下原導航在各個手機型號的高度（適配）

導航欄高度

wx.getSystemInfo 和 wx.getSystemInfoSync 獲取機器資訊
screenHeight - windowHeight 計算標題欄高度
標題欄高度：
‘iPhone’: 64,
‘iPhone X’: 88,
‘android’: 68

小程式部分真機裝置資訊採集

3：編寫component或者template

這裡app.json配置影響的全域性配置，所以其他頁面都成了自定義導航，只有寫一個公共元件或者模板套用了（隨你挑選一個），這裡我選擇component構造器。

Component構造器可用於定義元件，呼叫Component構造器時可以指定元件的屬性、資料、方法等。

JSON

一開始就貼出JSON，是為了提醒某些忘記配置json得人（為啥沒效果！什麼鬼東西！垃圾元件！cao）：
建立component，先在json配置好component
使用component，先在json配置component的名稱和引用路徑

{
  "component": true,
  "usingComponents": {}
}

wxml

 <view class='status-bar'>
    <view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;"  hidden='{{show_bol}}'>			/*返回按鈕*/
      <image src='/images/back.png'></image>
    </view>
    <view class="tabar {{my_class ? '
 
tabar2':''}}" style="padding-top:{{bar_Height}}px;">
      <text class="red">{{title}}</text>		/*標題*/
    </view>
  </view>

1. hidden='{{show_bol}}'
   這裡的show_bol就是用來控制是否顯示返回標籤（說白了就是是內頁還是首頁，該不該有返回功能）這裡的show_bol就是用來控制是否顯示返回標籤（說白了就是是內頁還是首頁，該不該有返回功能）
2. padding-top:{{bar_Height}}px
   bar_Height為獲取到的手機狀態列的高度；

js

Component({
  /* 元件的屬性列表 */
  properties: {
    title: {			// 設定標題
      type: String,
      value: ''	
    },
    show_bol: {			// 控制返回箭頭是否顯示
      type: Boolean,
      value: false
    },
    my_class: {			// 控制樣式
      type: Boolean,
      value: false
    }
  },
  /* 元件的初始資料 */
  data: {
    type: "元件",
    bar_Height: wx.getSystemInfoSync().statusBarHeight		// 獲取手機狀態列高度
  },
  /* 元件的方法列表 */
  methods: {
    goBack: function () {					// 返回事件
      console.log("退後")
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

wxss

/* 頂部導航 */
.status-bar {
  width: 100%;
  z-index: 99999;
  position: fixed;
  top: 0;
}
.goBack{
  position: absolute;
  top: 15rpx;
  font-size:12pt;
}
.goBack image{
  width: 21rpx;
  height: 40rpx;
  padding: 12rpx 20px 0 30rpx;
}
.tabar {
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.tabar2{
  background: transparent !important;
}
.tabar2 text{
  color: #fff !important;
  font-weight: lighter !important;
}
.tabar text {
  padding: 20rpx 30rpx;
  color: #353535;
  font-size: 12pt;
  font-weight: bold;
}
.tabar .active {
  color: #fff;
}

4：使用元件（一般都在內頁才用到）

json

{
  "usingComponents": {
    "component": "/component/component"    //component自定義名稱 後面為元件路徑
  }
}

wxml

<component title='我是tabbar的頁面' show_bol='{{false}}'></component>   //show_bol為false  就是沒有返回箭頭

<component title='我是帶返回的頁面' show_bol='{{true}}'></component>   //show_bol為false  就是沒有返回箭頭

問題：
這裡導航是出來了，但是會有個問題，導航嘛肯定是要固定定位的，所以他就脫離了文件流，元件放進去後，會懸浮在上面，遮擋了下面的內容，這時候就需要給父元素加個padding-top了

// e:1
<view class='box-detail' style="padding-top:{{bar_Height  + 45}}px;">
  <component title='EatUp趣味食光' show_bol='{{false}}'></component>
  ...
  ..
  .
</view>
// e:2
<view class='box-detail' style="padding-top:{{widnowH <=568 ?bar_Height + 40:bar_Height + 45}}px;">			
  <component title='EatUp趣味食光' show_bol='{{false}}'></component>
  ...
  ..
  .
</view>

bar_Height: wx.getSystemInfoSync().statusBarHeight 　　(狀態列的高度)
widnowH : wx.getSystemInfoSync().screenHeight　　 　 　 (螢幕高度)

這裡的padding-top的距離，就是狀態列的高度+ 導航欄的高度了，然後就可以很愉快的使用了，不過不同的機型還需要不同的適配，如果有更好的辦法，可以給我講解下，感謝大佬！

5：最終效果