自建博客文章链接：http://www.heblogs.cn/articleDetails/60f829a8fcae932a86eeaf33
前几天在对自己写的小程序项目进行优化时发现IPhone全面屏手机拥有底部黑线时候 在app.js内定义的tabbar不会受到影响
但是在部分页面内自己手写的底部tabbar会被黑线挡住内容 立马去查了下API。发现了其中几种解决方式 话不多说 贴代码
如果还有其他更优的方法 欢迎留言或者私信
1、安全区域
首先先了解一下 IPhone手机的安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Homendicator)的影响。 市面上带安全区域的苹果设备包括以下 这几款：iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max
2、首先，我们现在app.js的onLaunch生命周期中获取用户机型
#原代码（代码有误 感谢网友指出错误）
globalData: {
//定义全局变量Modelmes为null
Modelmes: null，
},
onLaunch(options) {
wx.getSystemInfo({
//当小程序初始化完成时 获取用户的手机机型 并写出适配ipnone手机安全区域的的适配方案
success: (res) => {
wx.setStorageSync('Modelmes', res.model)//将机型存入到本地缓存 以免后期其他业务逻辑需要使用
if (res.model === 'iPhone X' || 'iPhone XR' || 'iPhone XS Max' || 'iPhone 11' || 'iPhone 11 Pro' || 'iPhone 11 Pro Max');
this.globalData.Modelmes = true;
else
this.globalData.Modelmes = false;
}
})
},
#2020/01/19更正代码（感谢网友指出错误 判断字符串不能像以上一样判断）
globalData: {
//定义全局变量Modelmes为null,model为市面安全区域苹果机型
Modelmes: null，
model:{
'iPhone X', 'iPhone XR', 'iPhone XS Max', 'iPhone 11', 'iPhone 11 Pro', 'iPhone 11 Pro Max', 'iPhone 12', 'iPhone 12 Pro', 'iPhone 12 Pro Max'}
},
onLaunch(options) {
const {
model } = this.globalData
wx.getSystemInfo({
//当小程序初始化完成时 获取用户的手机机型
success: (res) => {
const hasMa = model.find(item => item === res.model )
this.globalData.Modelmes = hasMa && hasMa.length > 0
}
})
},
3、在我们需要对底部安全区域进行适配的页面的onLoad生命周期内获取全局变量 ‘Modelmes’ 并写入该页面内的局部变量
var app = getApp();
let {
Modelmes } = app.globalData;
this.setData({
Modelmes });
4、既然拿到了变量 ，已知安全区域高度为34px，此时我们就可以对页面进行改进了
<view style="margin-bottom:{
{Modelmes?'68rpx':'0'}}">
2020/1/19更新
方法二：
screenHeight 为屏幕高度
bottom是以屏幕左上角为原点开始计算的，所以也是屏幕高度
对比screenHeight和safeArea.bottom，如果相等则说明不需要适配，不相等则需要适配
wx.getSystemInfo({
success: (res) => {
console.log('当前用户机型及配置',res)
const screenHeight = wx.getSystemInfoSync().screenHeight
const bottom = wx.getSystemInfoSync().safeArea.bottom
if(screenHeight === bottom){
this.globalData.isIphone=false
}else{
this.globalData.isIphone=true
}
}
方法三：
使用苹果官方推出适配方案css函数env()、constant()来适配
若全局需要适配的话，可以直接在app.wxss里给相应的部分添加以下代码：
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/**