mpvue适配iphone x

let cache = null
export default function getSafeArea() {
  return new Promise((resolve, reject) => {
    if (cache != null) {
      // 如果有缓存不行行调用
      resolve(cache)
    } else {
      // 获取系统信息
      wx.getSystemInfo({
        success: ({ model, screenHeight, statusBarHeight }) => {
          const iphoneX = /iphone x/i.test(model)
          const iphoneNew = /iPhone11/i.test(model) && screenHeight === 812
          cache = {
            isIPhoneX: iphoneX || iphoneNew,
            statusBarHeight,
          }
          resolve(cache)
        },
        fail: reject,
      })
    }
  })
}

import getSafeArea from './utils/safe-area'
let MyPlugin = {}
MyPlugin.install = function(Vue) {
  // 添加全局方法或属性
  Vue.prototype.$isPage = function isPage() {
    return this.$mp && this.$mp.mpType === 'page'
  }
  // 注入组件
  Vue.mixin({
    data() {
      return {
        isIPhoneX: this.isIPhoneX,
      }
    },
    mounted() {
      if (this.$isPage()) {
        getSafeArea().then(({ isIPhoneX, statusBarHeight }) => {
          this.isIPhoneX = isIPhoneX
        })
      }
    },
  })
}
export default MyPlugin

import MyPlugin from './mixins'
Vue.use(MyPlugin)

.btn-iphonex {
  padding-bottom: 34px!important;
}

//吸底按钮
.submit-info {
  width: 100%;
  position: fixed;
  bottom: 0;
  &.safe {
    bottom: 34px;
  }
}

<i-button
  bind:click="submit"
  class="submit-info"
  :class="{safe:isIPhoneX}"
  type="primary"
  size="small"
>确定</i-button>