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

最終顯示效果