微信小程序自定义导航栏（适配刘海屏）

整理一下微信小程序自定义导航栏和刘海屏适配问题

1.首先在根据官方文档，我们在小程序修改 app.json 中的 window 的属性 "navigationStyle": "custom"。

{
  "pages":[
    "pages/index/index",
  ],
  "window":{
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  }
}

2.通过微信小程序API，wx.getSystemInfo获取设备状态栏高度，wx.getMenuButtonBoundingClientRect()获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点

//app.js
App({
  onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        this.globalData.statusBar = e.statusBarHeight; //状态栏高度
        let custom = wx.getMenuButtonBoundingC