一、業務背景
最近在利用mpvue+ts開發小程序的過程中，由于蘋果X等手機會出現底部的按鈕，會遮蓋掉需要操作的按鈕。由于在小程序開發，微信爸爸已經做了對機型的檢查，相對與H5的處理來說方便很多了。下面就稍微羅列一下解決方案。
二、實現思路
三、實現過程
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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
