詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配
一、業(yè)務(wù)背景
最近在利用mpvue+ts開發(fā)小程序的過程中,由于蘋果X等手機會出現(xiàn)底部的按鈕,會遮蓋掉需要操作的按鈕。由于在小程序開發(fā),微信爸爸已經(jīng)做了對機型的檢查,相對與H5的處理來說方便很多了。下面就稍微羅列一下解決方案。
二、實現(xiàn)思路
- 判斷機型方法
- 注入全局組件mixin
- 加入全局安全距離css
- 頁面上進行class類處理
三、實現(xiàn)過程
1、判斷機型方法
小程序的官方文檔提供了一個方法wx.getSystemInfo,我們可以利用該方法來對小程序的對應(yīng)的手機型號進行判斷,是否需要加上安全距離。在工具類文件新建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
因為mpvue是具有mixin這個屬性的,我們可以利用混入安全距離的處理方法。用法基本跟vue一致。新建mixins.js,注入插件,在這個過程中需要注意一點,就是如果不進行頁面類型的判斷,會出現(xiàn)如果引用組件也會進行注入該方法。所以需要加入進行判斷
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) { // 添加全局方法或?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
為了我們不需要在每一個文件進行樣式的聲明,我們可以在全局樣式中寫入安全距離的類
.safeArea { padding-bottom: 34px!important; }
4、頁面上進行class類處理
處理完以上部分我們可以對頁面上需要處理的區(qū)域,加入:class="{safeArea: isIPhoneX}"進行修改,例如:
<div class="handle" :class="{safeArea: isIPhoneX}"> <div class="home" @click="goHome"></div> <div class="submit" @click="buy">立即購買</div> </div>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用antd中input組件去驗證輸入框輸入內(nèi)容(rules?案例)
這篇文章主要介紹了Vue使用antd中input組件去驗證輸入框輸入內(nèi)容-rules-案例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06VUE-Table上綁定Input通過render實現(xiàn)雙向綁定數(shù)據(jù)的示例
今天小編就為大家分享一篇VUE-Table上綁定Input通過render實現(xiàn)雙向綁定數(shù)據(jù)的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08Vue-Router如何動態(tài)更改當前頁url query
這篇文章主要介紹了Vue-Router如何動態(tài)更改當前頁url query問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序
vue-cli 是一個官方發(fā)布 vue.js 項目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05vue中electron框架自定義外部配置文件的配置與讀取辦法
使用Electron開發(fā)本地跨平臺的本地程序時,有時需要添加一些程序的配置文件,下面這篇文章主要給大家介紹了關(guān)于vue中electron框架自定義外部配置文件的配置與讀取的相關(guān)資料,需要的朋友可以參考下2023-12-12Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API,本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別,文中通過示例代碼介紹的非常詳細,需要的朋友們下面隨著小編來一起學習學習吧2023-06-06vue使用driver.js完成頁面引導(dǎo)功能的示例詳解
在Vue中,driver.js通常是指用于實現(xiàn)用戶引導(dǎo)和教程功能的JavaScript庫,它可以幫助開發(fā)者在應(yīng)用程序中創(chuàng)建交互式的引導(dǎo)和教程,以引導(dǎo)用戶了解應(yīng)用程序的不同功能和界面,本文就簡單的給大家介紹一下vue如何使用driver.js完成頁面引導(dǎo)功能2023-08-08