因为安卓和ios打开小程序的时候，头部的标题，ios在中间，安卓的是靠左

但是客户要求都居中，所以就上网搜了一下怎么弄这个自定义标题，望采纳。

本文讲述适配各种机型的自定义小程序header

需要自取

框架: wepy2.0 + vuex

关键就是如何计算这个小程序在不同机型的header的高度 【customHeaderHeight】

js代码

getDeviceParameters({ commit }) {
  // 获取当前手机配置
  const { screenHeight, screenWidth, statusBarHeight } = wx.getSystemInfoSync()
  let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null // 胶囊按钮位置信息
  
  let customHeaderHeight = (function() { // 导航栏高度
    let gap = rect.top - statusBarHeight // 动态计算每台手机状态栏到胶囊按钮间距
    return statusBarHeight + 2 * gap + rect.height
  })()


  // 是否为iphoneX系列
  const isiPhoneXSeries = screenHeight / screenWidth > 2
}

css代码

我是将这些变量都存在了vuex 的 store里，方便页面使用，如果有更方便的方法，希望可以分享一下，谢谢.