瞭解小程式預設導航

如上圖所示，微信導航分為兩部分，第一個部分為statusBarHeight，劉海屏手機（iPhone X，小米8等）會比其他的手機高很多，第二部分為titleBarHeight，安卓和IOS的高度不同，但是IOS高度是一樣的，IOS高度是一樣的,

所以我們要實現一個相容不同手機的導航必須要根據不同的手機實現statusBarHeight和titleBarHeight

第一步：全域性設定

把app.json中的window中的navigationStyle設定為custom，官方文件連結

設定完之後發現導航欄變成了如下圖所示，只剩下了右上角膠囊按鈕

第二步：確定導航欄兩部分的高度

（1）確定第一部分statusBarHeight的高度，這部分是手機用來展示時間，訊號和手機電量的，我們可以從wx.getSystemInfo從獲得

wx.getSystemInfo({
  success: function(res) {
    console.log(res.statusBarHeight)
  }
})

（2）第二部分titleBarHeight為小程式導航欄的高度，經過我查詢無數文件和實踐得知，在iPhone上titleBarHeight=44px，在安卓上titleBarHeight = 48px

（3）最後總結一下微信小程式的高度程式碼為

wx.getSystemInfo({
  success: 
 
function(res) {
    let titleBarHeight = 0
    if (res.model.indexOf('iPhone') !== -1) {
      titleBarHeight = 44
    } else {
      titleBarHeight = 48
    }
    that.setData({
      statusBarHeight: res.statusBarHeight,
      titleBarHeight: titleBarHeight
    });
  },
  failure() {
    that.setData({
      statusBarHeight: 
 
0,
      titleBarHeight: 0
    });
  }
})

第三步：編寫Navigation元件

（1）Navigation.js

const app = getApp();
Component({
  properties: {
    //小程式頁面的標題
    title: {
      type: String,
      default: '預設標題'
    },
    //是否展示返回和主頁按鈕
    showIcon: {
      type: Boolean,
      default: true
    }
  },

  data: {
    statusBarHeight: 0,
    titleBarHeight: 0,
  },

  ready: function () {
    // 因為每個頁面都需要用到這連個欄位，所以放到全域性物件中
    if (app.globalData && app.globalData.statusBarHeight && app.globalData.titleBarHeight) {
      this.setData({
        statusBarHeight: app.globalData.statusBarHeight,
        titleBarHeight: app.globalData.titleBarHeight
      });
    } else {
      let that = this
      wx.getSystemInfo({
        success: function(res) {
          if (!app.globalData) {
            app.globalData = {}
          }
          if (res.model.indexOf('iPhone') !== -1) {
            app.globalData.titleBarHeight = 44
          } else {
            app.globalData.titleBarHeight = 48
          }
          app.globalData.statusBarHeight = res.statusBarHeight
          that.setData({
            statusBarHeight: app.globalData.statusBarHeight,
            titleBarHeight: app.globalData.titleBarHeight
          });
        },
        failure() {
          that.setData({
            statusBarHeight: 0,
            titleBarHeight: 0
          });
        }
      })
    }
  },

  methods: {
    headerBack() {
      wx.navigateBack({
        delta: 1,
        fail(e) {
          wx.switchTab({
            url: '/pages/main/main'
          })
        }
      })
    },
    headerHome() {
      wx.switchTab({
        url: '/pages/main/main'
      })
    }
  }
})

(2) Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
  <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
    <view wx:if="{{showIcon}}" class="title-bar">
      <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
      <view class="line"></view>
      <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view>
    </view>
    <view class="header-title">{{title}}</view>
  </view>
</view>

css就不貼了，有點多，需要的朋友可以去的github上拿

第四步：展示效果

                       iPhone X展示效果                                                     iPhone 7展示效果                                                      

               小米8展示效果

用我們公司的測試機基本上都試了一遍，基本上都能正常顯示 

解決下拉重新整理的問題

 圖一為預設導航下的下拉重新整理，顯示正常，圖二為自定義導航欄下的下拉重新整理，顯示異常，中間有一大塊空白。

如果解決這個問題，我們自定義一個載入動畫，藏在導航底下

（1）把app.json中的window設定為如下，這樣載入動畫就隱藏了，因為載入動畫必須要設定window的backgroundTextStyle=black和backgroundColor=#F3F3F3才會顯示如上圖所示

window: {
  "navigationStyle": "custom",
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "ICY買手店",
  "navigationBarTextStyle": "black"
}

（2）修改Navigation.wxml

<view style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
  <view class="header" style="height:{{titleBarHeight}}px;padding-top:{{statusBarHeight}}px">
    <view wx:if="{{showIcon}}" class="title-bar">
      <view class="back" bindtap="headerBack"><image src="https://dn-testimage.qbox.me/Files/08/6b/086b8e19c7a5aa031dc4df31ca8b53ac2ed32212_644.png"></image></view>
      <view class="line"></view>
      <view class="home" bindtap="headerHome"><image src="https://dn-testimage.qbox.me/Files/fc/49/fc4958729bf1937667b68c78f495edeafe30f339_1030.png"></image></view>
    </view>
    <view class="header-title">{{title}}</view>
  </view>
  <view class="loading-wrap"><image class="loading-gif" src="https://dn-testimage.qbox.me/Files/e0/35/e03562502eae6d5944bed747b7c21a3c2cce1ff8_1250.gif"></image></view>
</view>

效果如下圖，載入動畫我可能寫的不太好看

 問題：這樣做在iPhone上是能正常展示的，但是在安卓上還有一點小問題，自定義導航欄的標題和圖示有一起滑動

注意點

（1）安卓手機下拉重新整理還是會有一點點展示問題

（2）專案所有fixed的元素都需要改，top需要加上導航欄的高度

 目前哪些小程式在用自定義導航欄

我所知道的有 “bilibili”，"票圈長視訊"，我們公司的小程式也在計劃用