详细说明mpvue完成对苹果X安全区域的适配_vue.js
发表时间：2025-02-20 来源：本站整理相关软件相关文章人气：
iPhone是苹果公司（Apple Inc. ）发布搭载iOS操作系统的系列智能手机。截至2021年9月，苹果公司（Apple Inc. ）已发布32款手机产品，初代：iPhone，最新版本：iPhone 13 mini，iPhone 13，iPhone 13 Pro， iPhone 13 Pro Max；iPhone系列产品静音键在设备正面的左侧 [46-47] ；iPhone 5之前机型使用30Pin（即30针）接口，iPhone 5（包含）之后产品使用Lightning接口。
一、业务背景
最近在利用mpvue+ts开发小程序的过程中，由于苹果X等手机会出现底部的按钮，会遮盖掉需要操作的按钮。由于在小程序开发，微信爸爸已经做了对机型的检查，相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。
二、实现思路
- 判断机型方法
- 注入全局组件mixin
- 加入全局安全距离css
- 页面上进行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 (专业提供手机教程)
