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

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

1、安全区域

首先先了解一下 IPhone手机的安全区域，安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home
Indicator)的影响。 市面上带安全区域的苹果设备包括以下 这几款：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;
      }
    })
  },

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

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

4、既然拿到了变量 ，已知安全区域高度为34px，此时我们就可以对页面进行改进了

  <view  style="margin-bottom:{{Modelmes?'68rpx':'0'}}">

结语：
其实后来发现还有更好用的几种方法 以下列举 但是就不一一放代码了
其他方案一：使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断
其他方案二：使用苹果官方推出适配方案css函数env()、constant()来适配(个人更推荐这种方法)