mpvue实现对苹果X安全区域的适配

mpvue实现对苹果X安全区域的设配

1、业务背景

最近在利用mpvue+ts开发小程序的过程当中，因为苹果X等手机会出现底部的按钮，会遮盖掉须要操做的按钮。因为在小程序开发，微信爸爸已经作了对机型的检查，相对与H5的处理来讲方便不少了。下面就稍微罗列一下解决方案。

2、实现思路

• 判断机型方法
• 注入全局组件mixin
• 加入全局安全距离css
• 页面上进行class类处理

3、实现过程

一、判断机型方法

小程序的官方文档提供了一个方法wx.getSystemInfo,咱们能够利用该方法来对小程序的对应的手机型号进行判断，是否须要加上安全距离。在工具类文件新建safe-area.js文件，编写下面代码，这里返回一个Project,方便取值。

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
            });
        }
    });
}

复制代码

二、注入全局组件mixin

由于mpvue是具备mixin这个属性的，咱们能够利用混入安全距离的处理方法。用法基本跟vue一致。新建mixins.js,注入插件，在这个过程当中须要注意一点，就是若是不进行页面类型的判断，会出现若是引用组件也会进行注入该方法。因此须要加入进行判断

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

在mounted过程当中进行处理，能够避免没必要要的注入。

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

复制代码

在main.js中注册该插件

import MyPlugin from './minxins'
Vue.use(MyPlugin)
复制代码

三、加入全局安全距离css

为了咱们不须要在每个文件进行样式的声明，咱们能够在全局样式中写入安全距离的类

.safeArea {
  padding-bottom: 34px!important;
}
复制代码

四、页面上进行class类处理

处理完以上部分咱们能够对页面上须要处理的区域，加入:class="{safeArea: isIPhoneX}"进行修改，例如：

<div class="handle" :class="{safeArea: isIPhoneX}">
      <div class="home" @click="goHome"></div>
      <div class="submit" @click="buy">当即购买</div>
    </div>
复制代码