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

今天在编写小程序页面时发现，在iphoneX真机预览时，底部button会被手机底部黑线盖住一部分，

对于我这种强迫症来说，简直不能忍。

首先说下手机的安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。 

我用的手机是iphone X ，显示效果如上，为了美观和易用性，我们对手机显示进行适配

第一种方案 CSS3中的constant、env函数

page {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

两句代码就能解决ios底部安全距离问题

第二种方案 动态获取手机型号，给view加margin-bottom

1.app.js中定义全部变量

globalData: { 
    Modelmes: null
 },

2.onLaunch获取手机型号等信息

onLaunch(options) {
  wx.getSystemInfo({
    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.需要适配的页面调用

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

最外层增加margin-bottom

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

最终显示效果