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

前几天在对自己写的小程序项目进行优化时发现IPhone全面屏手机拥有底部黑线时候 在app.js内定义的tabbar不会受到影响 但是在部分页面内自己手写的底部tabbar会被黑线挡住内容 立马去查了下API。发现了其中几种解决方式 话不多说 贴代码 如果还有其他更优的方法 欢迎留言或者私信

---

方法一：

1. 首先，我们现在app.js的onLaunch生命周期中获取用户机型

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
	  }
    })
  },

1. 在我们需要对底部安全区域进行适配的页面的onLoad生命周期内获取全局变量 ‘Modelmes’ 并写入该页面内的局部变量

    var app = getApp();
    let { Modelmes } = app.globalData;
    this.setData({ Modelmes });

1. 既然拿到了变量 ，已知安全区域高度为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*/**