目前小程序已在前端占了一席之地，最近公司项目上用的就是小程序开发，由于功能及页面不是很多，所以直接原生开发，毕竟坑可能会少点，在开发过程中，小程序自带导航栏和客户的设计稿导航栏排在一起，感觉很别扭，因此要求去掉微信的自带导航栏，微信提供了这方面的api，接下来我们就实操。
这是小程序官方文档截图，可以看到导航栏样式支持两种，默认是带导航栏，另外一种是自定义导航栏-custom，如果使用自定义导航栏，我们可以
全局配置
//app.json"window":{"navigationStyle":"custom"}
单页面配置
//page.json{"navigationStyle":"custom"}
效果对比
能明显的看出来，自定义导航栏页面内容已经顶到屏幕顶端，除了胶囊按钮，其他都是页面可控区域。每个手机的屏幕都不一样，各家系统的状态栏高度也不一样，因此，我们在开发页面时要考虑屏幕的适配，有刘海的，要留出刘海的距离，没有的，要把状态栏高度留出来。
1.获取导航栏高度及按钮位置
微信提供了获取导航栏高度的Api和胶囊按钮位置的Api
//系统信息constsystemInfo=wx.getSystemInfoSync();//胶囊按钮位置信息constmenuButtonInfo=wx.getMenuButtonBoundingClientRect();
在控制台打印出这两个Api返回结果
这里面我们只说几个我们接下来用到的参数。
statusBarHeight//状态栏高度screenWidth//胶囊的宽度top//胶囊到顶部距离height//胶囊的高度right//胶囊距离右边的距离
通过这几个参数，我们可以计算出状态栏的高度，微信胶囊所占的高度（存在padding值，可以使元素和胶囊纵向居中）
首先在app.js中定义全局data-globalData
globalData:{navBarHeight:0,//导航栏高度menuBotton:0,//胶囊距底部间距（保持底部间距一致）menuRight:0, //胶囊距右方间距（方保持左、右间距一致）menuHeight:0,//胶囊高度（自定义内容可与胶囊高度保证一致）},
新建个方法
setNavBarInfo(){//获取系统信息constsystemInfo=wx.getSystemInfoSync();//胶囊按钮位置信息constmenuButtonInfo=wx.getMenuButtonBoundingClientRect();//导航栏高度=状态栏到胶囊的间距（胶囊距上距离-状态栏高度）*2+胶囊高度+状态栏高度this.globalData.navBarHeight=(menuButtonInfo.top-systemInfo.statusBarHeight)*2+menuButtonInfo.height+systemInfo.statusBarHeight;this.globalData.menuBotton=menuButtonInfo.top-systemInfo.statusBarHeight;this.globalData.menuRight=systemInfo.screenWidth-menuButtonInfo.right;this.globalData.menuHeight=menuButtonInfo.right;}
在onLaunch中调用，因为我这个项目是所有的导航都不用微信自带的，所以在app.js
中调用及设置data。
onLaunch(){this.setNavBarInfo()},
到这里所需要用到的都已经存了起来，页面用法也比较简单，排除状态栏的高度，设置导航栏的高度和胶囊高度保持，用flex布局。
2.页面适配
首先page.js中定义变量
varapp=getApp()Page({/***页面的初始数据*/data:{navBarHeight:app.globalData.navBarHeight,//导航栏高度menuBotton:app.globalData.menuBotton,//导航栏距离顶部距离menuRight:app.globalData.menuRight,//导航栏距离右侧距离menuHeight:app.globalData.menuHeight,//导航栏高度}})
页面使用
<viewclass="nav"style="height:{{navBarHeight}}px;"><viewclass="nav-main"><!--胶囊区域--><viewclass="capsule-box"style="style="height:{{menuHeight+menuBotton*2}}px;min-height:{{menuHeight}}px;line-height:{{menuHeight}}px;bottom:0px;padding:0{{menuRight}}px;"><!--导航内容区域--><slot></slot></view></view></view>
wxss
/*公共导航*/.nav{position:fixed;top:0;left:0;box-sizing:border-box;width:100vw;z-index:1000;}.nav-main{width:100%;height:100%;box-sizing:border-box;position:relative;}.nav.capsule-box{position:absolute;box-sizing:border-box;width:100%;display:flex;align-items:center;}
最终效果
此种适配方案适应所有手机，应该说是最优的选择。
