微信小程序自定義導航欄組件(完美適配全部手機),可自定義實現任何你想要的功能

背景

在作小程序時，關於默認導航欄，咱們遇到了如下的問題：

• Android、IOS手機對於頁面title的展現不一致，安卓title的顯示不居中
• 頁面的title只支持純文本級別的樣式控制，不可以作更豐富的title效果
• 左上角的事件沒法監聽、定製
• 路由導航單一，只可以返回上一頁，深層級頁面的返回不夠友好

探索

小程序自定義導航欄已開放許久>>瞭解一下，相信很多小夥伴已使用過這個功能，同時很多小夥伴也會發現一些坑：

• 機型多如牛毛：自定義導航欄高度在不一樣機型始終沒法達到視覺上的統一
• 導航欄中內容怎麼都不垂直居中對齊,更別說適配全部手機
• 調皮的膠囊按鈕：導航欄元素（文字，圖標等）怎麼也對不齊那該死的膠囊按鈕
• 各類尺寸的全面屏，奇怪的劉海屏，簡直要抓狂

一探究竟

爲了搞明白原理，我先去翻了官方文檔，>>飛機，點過去是否是很驚喜，很意外，通篇大文盡然只有最下方的一張圖片與這個問題有關，而且啥也看不清，汗汗汗...

我特地找了一張圖片來

分析上圖，我獲得以下信息：

• Android跟iOS有差別，表如今頂部到膠囊按鈕之間的距離差了6pt
• 膠囊按鈕高度爲32pt， iOS和Android一致

動手分析

咱們寫一個狀態欄，經過wx.getSystemInfoSync().statusBarHeight設置高度

Android：

iOS:

能夠看出，iOS膠囊按鈕與狀態欄之間距離爲：4px， Android爲8px，是否是全部手機都是這種狀況呢？ 答案是:蘋果手機確實都是4px,安卓大部分都是7和8 也會有其餘的狀況(能夠本身打印getSystemInfo驗證)如何快速便捷算出這個高度,請接着往下看

如何計算

導航欄分爲狀態欄和標題欄,只要能算出每臺手機的導航欄高度問題就迎刃而解

• 導航欄高度 = 膠囊按鈕高度 + 狀態欄到膠囊按鈕間距 * 2 + 狀態欄高度

注：因爲膠囊按鈕是原生組件，爲表現一致，其單位在各類手機中都爲px，因此咱們自定義導航欄的單位都必需是px（切記不能用rpx），才能完美適配。

解決問題

如今咱們明白了原理，能夠利用膠囊按鈕的位置信息和statusBarHeight高度動態計算導航欄的高度，貼一個實現此功能最重要的方法

let systemInfo = wx.getSystemInfoSync();
let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //膠囊按鈕位置信息
    wx.getMenuButtonBoundingClientRect();
    let navBarHeight = (function() { //導航欄高度
            let gap = rect.top - systemInfo.statusBarHeight; //動態計算每臺手機狀態欄到膠囊按鈕間距
            return 2 * gap + rect.height;
          })();
複製代碼

gap信息就是不一樣的手機其狀態欄到膠囊按鈕間距，具體更多代碼實現和使用demo請移步下方代碼倉庫，代碼中還會有輸入框文字跳動解決辦法,安卓手機輸入框文字飛出解決辦法,左側按鈕邊框太粗解決辦法等等

吐槽

這麼重要的問題，官方盡然沒有提供解決方案...居然提供了一張看不清的圖片???

網上有不少ios設置44，android設置48，還有根據不一樣的手機型號設置不一樣高度，經過長時間的開發和嘗試，本人發現以上方案並不完美,而且bug不少

代碼庫

• Taro組件gitHub地址詳細用法請參考README
• 原生組件npm構建版本gitHub地址詳細用法請參考README
• 原生組件簡易版gitHub地址詳細用法請參考README
• 因爲本人精力有限，目前只計劃發佈維護好這2種組件，其餘組件請自行修改代碼，有問題請聯繫

備註

• 上方2種組件在最下方30多款手機測試狀況表現良好
• iPhone手機打電話和開熱點致使導航欄樣式錯亂，問題已經解決啦，請去demo裏測試，這裏特別感謝moments網友提出的問題
• 本文章並沒有任何商業性質，若有侵權請聯繫本人修改或刪除
• 文章少許部份內容是本人查詢蒐集而來
• 若有問題能夠下方留言討論，微信zhijunxh

比較

鬥魚:

虎牙:

微博:

酷狗:

知乎:

知乎是這裏邊作的最好的，可是我我的認爲有幾個能夠優化的小問題

• 打電話或者開啓熱點致使樣式錯落，這也是大部門小程序的問題
• 導航欄下邊距過小，看起來不舒服
• 搜索框距離2側按鈕組距離不對等
• 自定義返回和home按鈕中的豎線顏色重了，而且感受太粗

若是您看到了此篇文章，請趕快修改本身的代碼，並運用在實踐中吧

掃碼體驗個人小程序:

創做不易，若是對你有幫助，請移步Taro組件gitHub原生組件gitHub給個星星 star✨✨ 謝謝

測試信息

手機型號	膠囊位置信息	statusBarHeight	測試狀況
iPhoneX	80 32 281 369 48 88	44	經過
iPhone8 plus	56 32 320 408 24 88	20	經過
iphone7	56 32 281 368 24 87	20	經過
iPhone6 plus	56 32 320 408 24 88	20	經過
iPhone6	56 32 281 368 24 87	20	經過
HUAWEI SLA-AL00	64 32 254 350 32 96	24	經過
HUAWEI VTR-AL00	64 32 254 350 32 96	24	經過
HUAWEI EVA-AL00	64 32 254 350 32 96	24	經過
HUAWEI EML-AL00	68 32 254 350 36 96	29	經過
HUAWEI VOG-AL00	65 32 254 350 33 96	25	經過
HUAWEI ATU-TL10	64 32 254 350 32 96	24	經過
HUAWEI SMARTISAN OS105	64 32 326 422 32 96	24	經過
XIAOMI MI6	59 28 265 352 31 87	23	經過
XIAOMI MI4LTE	60 32 254 350 28 96	20	經過
XIAOMI MIX3	74 32 287 383 42 96	35	經過
REDMI NOTE3	64 32 254 350 32 96	24	經過
REDMI NOTE4	64 32 254 350 32 96	24	經過
REDMI NOTE3	55 28 255 351 27 96	20	經過
REDMI 5plus	67 32 287 383 35 96	28	經過
MEIZU M571C	65 32 254 350 33 96	25	經過
MEIZU M6 NOTE	62 32 254 350 30 96	22	經過
MEIZU MX4 PRO	62 32 278 374 30 96	22	經過
OPPO A33	65 32 254 350 33 96	26	經過
OPPO R11	58 32 254 350 26 96	18	經過
VIVO Y55	64 32 254 350 32 96	24	經過
HONOR BLN-AL20	64 32 254 350 32 96	24	經過
HONOR NEM-AL10	59 28 265 352 31 87	24	經過
HONOR BND-AL10	64 32 254 350 32 96	24	經過
HONOR duk-al20	64 32 254 350 32 96	24	經過
SAMSUNG SM-G9550	64 32 305 401 32 96	24	經過
360 1801-A01	64 32 254 350 32 96	24	經過