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

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

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

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"

 

 

 

參考文章連接：

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

微信小程序自定義導航欄

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