項目代碼：https://github.com/Shay0921/header-navbar.git

在小程序中，從轉發出來的小程序消息卡片進入，因為頁面棧中只有一個，所以不會出現返回按鈕，對于一些電商平臺來說，當商品被轉發后會很影響客戶查看其它產品和首頁，這時候就需要使用自定義導航欄自己寫一個“膠囊按鈕”。如下圖所示：

從別的頁面點到商品頁時會有返回和首頁按鈕；

當從分享頁進入到商品頁時，因為頁面棧只有一個，所以只有首頁按鈕；

首先我們需要如何開啟自定義導航欄，查看手冊后會發現一個頁面配置項： navigationStyle

之前的版本此配置項只能在app.js中配置，是全局的屬性，而現在可以在單獨的頁面json中配置，實現單獨頁面自定義導航欄。

整體思路

當使用了 navigationStyle:custom 后，之前的頂部標題欄會被刪除，右側的膠囊按鈕則會固定在右上角。然后在當前頁面添加了三個view(狀態欄、標題欄、主體內容)，可以看出三塊的布局，我直接寫死的高度：狀態欄20px，標題欄44px。這個是自定義導航欄的關鍵，需要去計算這兩塊的高度，還有返回|首頁膠囊按鈕的位置。基礎庫 2.1.0開始可以使用 wx.getMenuButtonBoundingClientRect() 來獲得 右側膠囊按鈕的位置信息 ，而有了這個信息，就能相對的算出我們想要在左側添加的膠囊按鈕的位置。通過 wx.getSystemInfoSync()中的statusBarHeight找到狀態欄的高度 。

目錄結構

├── components     組件│ ├── headerNavbar    頂部自定義導航欄│ │ └── headerNavbar.js│ │ └── headerNavbar.json│ │ └── headerNavbar.wxml│ │ └── headerNavbar.wxss├── pages      頁面│ ├── index     首頁│ │ └── index.js│ │ └── index.json│ │ └── index.wxml│ │ └── index.wxss│ ├── navigationStyle   引入自定義導航欄的頁面(單獨配置了navigationStyle)│ │ └── navigationStyle.js│ │ └── navigationStyle.json│ │ └── navigationStyle.wxml│ │ └── navigationStyle.wxss│ │ └── testPage.js   路由測試頁面(后面用來測試跳轉顯示不同膠囊按鈕)│ │ └── testPage.json│ │ └── testPage.wxml│ │ └── testPage.wxss

全局變量

app.js

在app.js中要先獲得狀態欄高度和右側膠囊位置信息

App({ onLaunch: function (options) {  // 這里省略掉了登錄和獲取用戶信息等函數  // 因為我在別的頁面也需要使用此信息，所以沒有單獨獲得 statusBarHeight  wx.getSystemInfo({ // 獲取設備信息  success: (res) => {   this.globalData.systeminfo = res  },  })  // 獲得膠囊按鈕位置信息  this.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect() }, globalData: {  systeminfo: {}, // 系統信息  headerBtnPosi: {} // 膠囊按鈕位置信息 }})