微信小程序自定义状态栏

"navigationStyle": "custom",

<view class="bgcItem" style="height:{{sumHeight}};">
    <view class="head" style="height:{{headHeight}};top:{{headTop}}">
      <image src="../../static/image/adress.png"></image>
      <view>{{appname}}</view>
    </view>
</view>

.bgcItem{
  top: 0rpx;
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 999;
}
.head{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 130rpx;
  text-align: center;
  position: fixed;
  top: 0rpx;
  left: 0;
  z-index: 999;
  background-color: #fff;
}
 
.head>image {
  width: 24rpx;
  height: 24rpx;
  margin-left: 30rpx;
}
 
.head>view {
  font-size: 28rpx;
  color: #1a1a1a;
  margin-left: 8rpx;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

wx.getSystemInfo({
    success(res) {
      // res是设备信息
      // menuButton是右边胶囊按钮的信息
      let menuButton = wx.getMenuButtonBoundingClientRect()
      let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height 
      this.setData({
      headHeight: titleBarHeight * 2 + 'rpx',
      headTop: res.statusBarHeight * 2 + 'rpx',
      sumHeight: titleBarHeight * 2 + res.statusBarHeight * 2 + 'rpx'
       })
     }
  })

// 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 onLaunch: function () {
   wx.getSystemInfo({
     success(res) {
       // res是设备信息
       // menuButton是右边胶囊按钮的信息
       let menuButton = wx.getMenuButtonBoundingClientRect()
       let titleBarHeight = (menuButton.top - res.statusBarHeight) * 2 + menuButton.height 
       + res.statusBarHeight
       this.globalData.titleBarHeight = titleBarHeight
      }
    })
  },

var App = getApp();
onLoad: function (options) {
    this.setData({
      titleBarHeight: App.globalData.titleBarHeight
    })
 },

"navigationBarTitleText": "首页",
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ff00ff"