微信小程序自定义导航栏

自定义导航栏的颜色 可以在app.json的 window里面添加
背景颜色navigationBarBackgroundColor属性。颜色只能为十六进制颜色码。
字体颜色navigationBarTextStyle仅支持白色和黑色

为了满足更多用户的需求，微信官方给出了一个navigationStyle属性,支持 default/custom。
custom 模式可自定义导航栏，顶部导航栏就会消失，只保留右上角胶囊状的按钮)。页面自带的返回按钮也会消失，需要用代码编写！！！！

如下实现navigationBarBackgroundColor颜色渐变案例

实现方式
在window里面加入"navigationStyle":“custom”

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fe0000",
    "navigationBarTitleText": "平台",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": false,
    "navigationStyle":"custom"
  },

Q：如何兼容适配所有机型，包括刘海屏？
A：使用 wx.getSystemInfoSync()[‘statusBarHeight’] 则能获取到顶部状态栏的高度，单位为px.

//在app.js里面
App({
    globalData: {
      statusBarHeight:wx.getSystemInfoSync()['statusBarHeight']
    }
})

<!--WXML 自定义顶部状态栏div结构-->
<view class="custom row-center" style="padding-top:{{statusBarHeight}}px">
  <text>我的</text>
</view>
<view class="empty_custom" style="padding-top:{{statusBarHeight}}px"></view>

/**app.css 全局css中设置样式**/
.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  background:linear-gradient(to right,rgba(6, 64, 225, 0.5),#6ba3ff);
  z-index: 999;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
}
.custom text{
  color: #fff;
  font-size: 38rpx;
  font-weight: 500;
  max-width: 280rpx;
}
.empty_custom{
  height: 45px;
  width: 100%;
}

//在index.js中取出statusBarHeight值
Page({
    data:{
        statusBarHeight: app.globalData.statusBarHeight
    }
})