微信小程序开发中遇到的问题之自定义导航栏

自定义导航栏功能：返回上一页，回到主页，音乐播放控制，标题。

要求：导航栏与微信右上角的默认椭圆转发关闭按钮水平对齐，高度一致。

问题点：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是全局唯一的，利用他的唯一性，在该实例下挂载相应的属性也会一直存在，不管在哪个页面，都不用再自己做缓存了。