微信小程序导航栏配置与适配

1. 微信客户端7.0.0新特性

"navigationStyle": "custom"
复制代码

微信客户端7.0.0版本增加了页面级别自定义导航的设置能力，这一功能在基础版本库v1.9.5（2018.01.24）时被初次加入。该版本增添了新的设置选项，允许小程序以全屏形式展示详细信息。现阶段微信小程序有两种设置途径：整体设置和独立页面的设置。开发者能够依据具体需求挑选合适的设置方法。

2. 实现官方效果导航条

要达成官方导航栏的样式，开发者必须掌握微信小程序的接口。需要留意的是，当定制导航栏时，我们能得到的尺寸度量是像素，而不是响应式像素。这是小程序开发中的一个关键差异，因为小程序原本采用的是响应式像素的度量机制。这个议题值得细致研究，将来可以就小程序的度量机制展开深入分析。

wx.getSystemInfo({
    success: (res) => {
     // iphone6.statusBarHeight = 20
     this.globalData.statusBarHeight = res.statusBarHeight; 
     let custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.custom = wx.getMenuButtonBoundingClientRect();
     this.globalData.Custom = custom;
     this.globalData.CustomBar = custom.bottom + custom.top - res.statusBarHeight;
     // 另一种计算方式
     this.globalData.CustomBar =custom.height + ( custom.top - res.statusBarHeight) * 2;
    }
})
复制代码

开发期间，最好借助微信小程序的模拟工具来检验。因为该模拟工具的导航条长度跟实际设备或许存在出入，这种出入能让创造者更清楚地区分界面适配的难题。借助模拟工具来检验，能取得各种设备上的界面显示情形，为后续的实际适配工作提供借鉴。

3. 不同机型适配方案

let custom = wx.getMenuButtonBoundingClientRect();
复制代码

适配机型向来是前端构建中的核心难题。微信小程序为处理适配难题设计了rpx方案，该方案在多数情形下可有效应对屏幕适配难题。不过，针对定制化导航栏情形，rpx方案未必能直接采用，这就给开发人员带来了新的适配困境。

需要特别留意的是，自客户端6.7.2版本起，部分设置项对组件失去作用力。这表明开发者在运用较新版本微信客户端时，必须高度关注这些制约因素，以保障功能的适配性和运行平稳。

开发建议与总结

复制代码

微信小程序非常适合零基础的新手，或者打算从事前端行业的从业者。学习小程序开发时，掌握调试技巧和问题诊断非常关键。基础能力越强，编程时遇到的难题就越容易攻克。

应当让从业者从细微处着眼，透彻掌握应用软件的不同功能。唯有钻研精深，前景才会更加开阔。定制化菜单栏的设计仅是应用软件整体架构的一部分，不过借助这个实例，从业者能够获取难得的实践经验，为后续更为繁难的任务奠定牢固根基。

let app = getApp();
Page({
    data: {

        statusBarHeight: app.globalData.statusBarHeight,
        StatusBar: app.globalData.StatusBar,
        CustomBar: app.globalData.CustomBar,
        custom: app.globalData.custom
    }
})
复制代码

.bg {
  width: 100%;
  height: 50rpx;
  background: teal;
}
.jiaonang {
  width: 100%;
  background: red;
}
复制代码