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>
複製代碼