详解mpvue实现对苹果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
      });
    }
  });
}

 Vue.prototype.$isPage = function isPage() {
  return this.$mp && this.$mp.mpType === 'page'
 }

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 './minxins'
Vue.use(MyPlugin)

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

  <div class="handle" :class="{safeArea: isIPhoneX}">
   <div class="home" @click="goHome"></div>
   <div class="submit" @click="buy">立即购买</div>
  </div>