uniapp自定义小程序导航栏

这几天在弄一个小程序，其中一个需求是取消原生导航栏，仅保留状态栏，并且要求有一个返回按钮跟微信分享胶囊在同一水平线上。 需求图如下：

首先来看一下正常导航栏所包含的区域，导航栏是包含了分享胶囊和标题部分，所以第一步取消原生导航栏(自定义导航栏性能不如原生)，在pages.json文件中将需要修改页面的style中navigationStyle改为custom，默认为default。

"navigationStyle":"custom"

改完之后可以看到现在页面变成全屏可编辑，效果如下：

此时需要将状态栏显示出来,微信小程序提供了获取状态栏的API：wx.getSystemInfo，其中可以用属性statusBarHeight获取状态栏高度

    wx.getSystemInfo({
        success: (e) => {
            console.log('导航栏高度',e.statusBarHeight)
        },
    });
}
// 导航栏高度 20

此时给可编辑区域设置一个margin-top属性，高度为e.statusBarHeight所得到的高度(或者设置一个同等高度的空box)，效果如下

此时就可以自定义导航栏了，接下来设置一下跟微信分享胶囊相对应的home部分

1. 获取分享胶囊距离状态栏的高度，微信提供了wx.getMenuButtonBoundingClientRect来获取相关信息

let capsule = wx.getMenuButtonBoundingClientRect();
console.log('capsule',capsule)
    
// 得到的是以分享胶囊左上角为中心距离页面顶部的相关数据
// capsule bottom: 56 height: 32 left: 281 right: 368 top: 24 width: 87

2.接下来让需要的元素上边框和微信分享胶囊上边框处于同一水平线上，给需要的元素设置一个mar-top属性，值为capsule.top，效果如下

剩下的效果就自行实现

第一次写文章，感觉还是有点费脑，可能表达的也不是很准确，如果有不懂的小伙伴可以评论提出来，如果有大佬看到有写的不对的地方，还请你指点一二