微信小程序自定義導航欄適配指南

前言

使用自定義導航，產品能夠對導航欄進行深度定製，對與場景比較複雜的小程序來講，能夠明顯的提升用戶體驗。可是相應的，微信小程序的自定義導航欄並不完美，入坑需謹慎。。。

開啓自定義導航欄

全局配置 app.json 設置 window.navigationStyle: 'custom'

自定義導航欄高度計算

1. 經過 wx.getSystemInfo 獲取設備信息，screenHeight - windowHeight即導航欄高度。
2. 開啓自定義導航欄以後，screenHeight - windowHeight並不等於導航欄高度，因此沒法在開啓自定義導航欄的同時，動態計算導航欄高度。解決方法是，再未開啓自定義時，收集設備信息計算導航欄高度，預約義在代碼中。
3. 參考下方［附錄：小程序部分真機設備信息採集］，計劃爲三種機型作適配: iPhone: 64px、iPhone X: 88px、Android: 88px。須要注意的是，部分安卓設備可能沒有狀態欄高度statusBarHeight，要作好兼容。

膠囊寬度

目前沒法直接經過微信接口獲取到膠囊的UI參數，可是根據微信官方設計指導中關於膠囊按鈕的描述，得知膠囊寬度87pt=116px

開啓自定義導航欄後 web-view 組件存在的問題

1. 因爲小程序原生web-view組件會默認覆蓋全屏，會致使沒法在小程序內爲 webview 頁面適配自定義導航欄。
2. 微信6.7.2以後的版本，使用web-view組件的頁面，自定義導航欄失效，至關於navigationStyle: 'default'。
3. 微信6.7.2以後的版本，開啓自定義導航以後，使用web-view組件的頁面，在部分安卓機型底部會被截斷，截斷高度爲導航欄高度。
4. 目前微信JSSDK沒有能獲取當前設備信息的接口，因此只能在小程序獲取相關設備信息後，經過 url query 的方式通知H5頁面，再在H5頁面進行自定義導航欄的適配。

Tips

1. 若是自定義導航欄使用fixed佈局固定在頂部，頁面上經過fixed佈局固定在頂部的節點都會受影響。
2. 能夠利用權重來比較版本的大小，例如，版本6.7.2的權重值爲 6 * 10^4 + 7 * 10^2 + 2 = 60702。
3. 在運行時訪問一個內部變量__wxConfig，能夠訪問到全局配置。能夠爲設置自定義導航欄提供參考。

---

參考連接

• 高適應性的自定義導航欄開發思路
• 小程序web-view組件、音頻播放功能調整說明
• 安卓web-view ，頁面下移，還沒解決？

附錄：小程序部分真機設備信息採集

設備	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