小程序对IPhone全面屏手机底部黑线的安全区域处理

前几天在对自己写的小程序项目进行优化时发现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'}}">

方法二：

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*/**