微信小程序開發中遇到的問題之自定義導航欄

自定義導航欄功能：返回上一頁，回到主頁，音樂播放控制，標題。

要求：導航欄與微信右上角的默認橢圓轉發關閉按鈕水平對齊，高度一致。

問題點：1.右上角默認的按鈕的高度是多少。

　　　　2.如何確定自定義導航欄的位置。

　　　　3.返回上一頁的控制

hack:

　　1.跟右邊的按鈕水平對齊解決方案：

　　　　1.獲取該設備的狀態欄高度，即statusBarHeight。

　　　　2.獲取膠囊的位置大小信息。　

    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;  /**狀態欄高度 */
        let custom = wx.getMenuButtonBoundingClientRect(); /**膠囊信息 */
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight; /**導航欄高度 */
      }
    })

　　　　3.設定導航欄高度，padding使左側高度與右側膠囊一致。

　　　　my-navigation.view

　　　　　　<view class='my-navigation' style='height:{{CustomBar}}px'>

　　　　　　　　<view class='operation-bar {{model}}' style='height:{{CustomBar}}px;padding-top:{{StatusBar}}px;'></view>

　　　　　　</view>

　　　　

　　　　my-navigation.js　

  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom
  }

 

　　       

　　2.返回上一頁控制

　　　　判斷當前頁面是否是tabbar頁面，如果是隱藏。

　　　　判斷當前頁面棧pages長度，大於1才顯示。

　　　　如何獲取當前頁和整個頁面棧？

　　　　　　通過getCurrentPages()即可獲取當前頁面棧，返回的是數組。

　　　　　　當前頁面棧長度getCurrentPages().length

　　　　　　當前頁即為getCurrentPages()[getCurrentPages().length - 1],

　　　　　　判斷路徑時getCurrentPages()[getCurrentPages().length - 1].route即可獲取當前頁面路徑，根據路徑判斷是否是tabbar頁面。

　　

　　　　返回上一頁跳轉：　　　　　　

           wx.navigateBack({
               delta:1
           }) 

　　音樂播放控制這里不做詳細贅述，說下大體思路，通過小程序全局背景音樂控制api：wx.getBackgroundAudioManager()實現，通過wx.getBackgroundAudioManager()創建BackgroundAudioManager實例，然后在該實例對象下加入播放的路徑，標題，時間，播放進度等，不同頁面都需要加載一次，但是BackgroundAudioManager是全局唯一的，利用他的唯一性，在該實例下掛載相應的屬性也會一直存在，不管在哪個頁面，都不用再自己做緩存了。