|
導(dǎo)讀一、業(yè)務(wù)背景最近在利用mpvue+ts開發(fā)小程序的過程中，由于蘋果X等手機(jī)會出現(xiàn)底部的按鈕，會遮蓋掉需要操作的按鈕。由于在小程序開發(fā)，微信爸爸已經(jīng)做了對機(jī)型的檢查，相對與H5的處理來說方便很多了。下... 一、業(yè)務(wù)背景 最近在利用mpvue+ts開發(fā)小程序的過程中，由于蘋果X等手機(jī)會出現(xiàn)底部的按鈕，會遮蓋掉需要操作的按鈕。由于在小程序開發(fā)，微信爸爸已經(jīng)做了對機(jī)型的檢查，相對與H5的處理來說方便很多了。下面就稍微羅列一下解決方案。 二、實(shí)現(xiàn)思路
三、實(shí)現(xiàn)過程 1、判斷機(jī)型方法 小程序的官方文檔提供了一個方法wx.getSystemInfo,我們可以利用該方法來對小程序的對應(yīng)的手機(jī)型號進(jìn)行判斷，是否需要加上安全距離。在工具類文件新建safe-area.js文件，編寫下面代碼，這里返回一個Project,方便取值。
let cache = null;
export default function getSafeArea() {
return new Promise((resolve, reject) => {
if (cache != null) {
// 如果有緩存不行行調(diào)用
resolve(cache);
}
else {
// 獲取系統(tǒng)信息
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 因?yàn)閙pvue是具有mixin這個屬性的，我們可以利用混入安全距離的處理方法。用法基本跟vue一致。新建mixins.js,注入插件，在這個過程中需要注意一點(diǎn)，就是如果不進(jìn)行頁面類型的判斷，會出現(xiàn)如果引用組件也會進(jìn)行注入該方法。所以需要加入進(jìn)行判斷
Vue.prototype.$isPage = function isPage() {
return this.$mp && this.$mp.mpType === 'page'
}
在mounted過程中進(jìn)行處理，可以避免不必要的注入。
import getSafeArea from '../utils/safe-area'
let MyPlugin = {};
MyPlugin.install = function (Vue) {
// 添加全局方法或?qū)傩?
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 為了我們不需要在每一個文件進(jìn)行樣式的聲明，我們可以在全局樣式中寫入安全距離的類
.safeArea {
padding-bottom: 34px!important;
}
4、頁面上進(jìn)行class類處理 處理完以上部分我們可以對頁面上需要處理的區(qū)域，加入:class="{safeArea: isIPhoneX}"進(jìn)行修改，例如：
<div class="handle" :class="{safeArea: isIPhoneX}">
<div class="home" @click="goHome"></div>
<div class="submit" @click="buy">立即購買</div>
</div>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持本站。
您可能感興趣的文章:
|
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請?jiān)谙螺d后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
