微信小程序：自定义头部（navigationStyle=custom）及手机适配

{
  "navigationStyle": "custom",
  "usingComponents": {}
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    systemInfo: {},
    menuInfo: {},
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let menuInfo = wx.getMenuButtonBoundingClientRect();
    let systemInfo = wx.getSystemInfoSync();
    console.log(systemInfo, menuInfo);
    this.setData({
      systemInfo,
      menuInfo,
    });
  }
});

.skyblue {
  background-color: skyblue;
}
.green {
  background-color: green;
}
.grey {
  background-color: grey;
}

<view class="grey"
      style="height:{{menuInfo.bottom}}px;">
  <view class="skyblue"
        style="height:{{menuInfo.top}}px;">
    <view class="green"
          style="height:{{systemInfo.statusBarHeight}}px;">
    </view>
  </view>
</view>