前言
使用自定義導航，產品可以對導航欄進行深度定製，對與場景比較複雜的小程式來說，可以明顯的提高使用者體驗。但是相應的，微信小程式的自定義導航欄並不完美，入坑需謹慎。。。
開啟自定義導航欄
全域性配置 app.json 設定 window.navigationStyle: 'custom'
自定義導航欄高度計算
- 通過
wx.getSystemInfo獲取裝置資訊，screenHeight - windowHeight即導航欄高度。 - 開啟自定義導航欄之後，
screenHeight - windowHeight並不等於導航欄高度，所以無法在開啟自定義導航欄的同時，動態計算導航欄高度。解決方法是，再未開啟自定義時，收集裝置資訊計算導航欄高度，預定義在程式碼中。 - 參考下方［附錄：小程式部分真機裝置資訊採集］，計劃為三種機型做適配:
iPhone: 64px、iPhone X: 88px、Android: 88px。需要注意的是，部分安卓裝置可能沒有狀態列高度statusBarHeight，要做好相容。
膠囊寬度
目前無法直接通過微信介面獲取到膠囊的UI引數，但是根據微信官方設計指導中關於膠囊按鈕的描述，得知膠囊寬度87pt=116px
開啟自定義導航欄後 web-view 元件存在的問題
- 由於小程式原生
web-view元件會預設覆蓋全屏，會導致無法在小程式內為 webview 頁面適配自定義導航欄。 - 微信6.7.2之後的版本，使用
web-view元件的頁面，自定義導航欄失效，相當於navigationStyle: 'default'。 - 微信6.7.2之後的版本，開啟自定義導航之後，使用
web-view元件的頁面，在部分安卓機型底部會被截斷，截斷高度為導航欄高度。 - 目前微信JSSDK沒有能獲取當前裝置資訊的介面，所以只能在小程式獲取相關裝置資訊後，通過 url query 的方式通知H5頁面，再在H5頁面進行自定義導航欄的適配。
Tips
- 如果自定義導航欄使用
fixed佈局固定在頂部，頁面上通過fixed佈局固定在頂部的節點都會受影響。 - 可以利用權重來比較版本的大小，例如，版本6.7.2的權重值為
6 * 10^4 + 7 * 10^2 + 2 = 60702。 - 在執行時訪問一個內部變數
__wxConfig，可以訪問到全域性配置。可以為設定自定義導航欄提供參考。
參考連結
附錄：小程式部分真機裝置資訊採集
| 裝置 | statusBarHeight | screenHeight | windowHeight | screenHeight - windowHeight |
|---|---|---|---|---|
| iPhone 5s | 20 | 568 | 504 | 64 |
| iPhone 6 | 20 | 667 | 603 | 64 |
| iPhone 6 Plus | 20 | 736 | 672 | 64 |
| iPhone X | 44 | 812 | 724 | 88 |
| OPPO R11s | 18 | 672 | 606 | 66 |
| HONOR STF-AL00 | 24 | 640 | 568 | 72 |
| vivo X9i | - | 640 | 568 | 72 |
| MIX 2S | 24 | 785 | 713 | 72 |