實現小程序插件自定義導航欄

最近有用戶提出騰訊位置服務路線規划插件在小程序自定義導航欄之后，導致路線規划插件的導航欄消失問題，發現小程序自定義導航欄會影響插件導航欄。

決定使用插件自定義導航欄來解決這一問題。下面是對於插件自定義導航欄的開發心得。

1. 了解小程序導航欄

小程序導航欄的總體划分為下面幾個區域：

 

2. 小程序自定義導航欄

小程序可以提供可以自己自定義導航欄接口，接下來我們來學習下怎么進行自定義導航欄：

知己知彼，方百戰百勝。首先我們要了解默認導航欄是怎么計算的：

1. 默認導航欄

1. wx.getSystemInfo可以獲取屏幕的位置信息；

2. screenHeight - windowHeight = 屏幕的導航欄高度（totalBarHeight)；

3. 狀態欄高度可根據systemInfo中statusBarHeight值獲取；

4. 標題的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

上述的默認導航欄的計算可以直接根據小程序的wx.getSystemInfo接口來計算，看着是不是很輕松能搞定。現在我們來看看自定義導航欄。

（2）自定義導航欄

小程序提供了可以定義導航欄接口：

app.json的window項中配置以下代碼：

 

"navigationStyle": "custom"

 

配置自定義導航欄之后的效果圖：

自定義導航欄中wx.getSystemInfo的 screenHeight和windowHeight的值是一致的。此時，我們沒辦法計算導航欄高度了。但是經過簡單的線下數據采集，得到了大部分熱門的手機導航欄高度數據（totalBarHeight)。

 

1. 大部分手機的導航欄高度（totalBarHeight)

 

iPhone： 64px;
iPhone： 88px;
android： 68px;
samsung： 72px;

 

2. 狀態欄高度可根據systemInfo中statusBarHeight值獲取；

3. 標題的高度(titleBarHeight) = totalBarHeight - statusBarHeight；

 

自定義導航欄實現后效果圖:

3. 小程序插件可以自定義導航欄嗎？

上述的都是小程序的自定義導航欄用法，有同學提問了小程序插件中能否自定義導航欄呢？

答案是當然是可以的。插件中自定義導航欄沒辦法像小程序里統一設置，但是可以在每個頁面的json文件中單獨配置，其他的步驟和小程序的自定義導航欄一致：

 

 

"navigationStyle": "custom"

 

 

 

參考文章鏈接：

高適應性的自定義導航欄開發思路

微信小程序自定義導航欄

騰訊位置服務路線規划插件