小程序对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'}}">

最终显示效果