如何使用mpvue實現對蘋果X安全區域的適配

這篇文章主要介紹如何使用mpvue實現對蘋果X安全區域的適配，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、業務背景

最近在利用mpvue+ts開發小程序的過程中，由于蘋果X等手機會出現底部的按鈕，會遮蓋掉需要操作的按鈕。由于在小程序開發，微信爸爸已經做了對機型的檢查，相對與H5的處理來說方便很多了。

二、實現思路

1. 判斷機型方法

2. 注入全局組件mixin

3. 加入全局安全距離css

4. 頁面上進行class類處理

三、實現過程

1、判斷機型方法

小程序的官方文檔提供了一個方法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
      });
    }
  });
}

2、注入全局組件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)

3、加入全局安全距離css

為了我們不需要在每一個文件進行樣式的聲明，我們可以在全局樣式中寫入安全距離的類

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

4、頁面上進行class類處理

處理完以上部分我們可以對頁面上需要處理的區域，加入:class="{safeArea: isIPhoneX}"進行修改，例如：

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

以上是“如何使用mpvue實現對蘋果X安全區域的適配”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！