微信小程序适配iphoneX，XR，12及以上，获取底部安全区域_小程序底部适配 苹果手机型号

iphone x及以上的异形屏top高度为44px（或以上），非异形屏为20px。

先判断是否为异形屏，如果是，获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom，把内容区域隔开。

小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域

注意小黑条区域的高度单位是px。

1. 在全局app.js里，全局存储一个数据

App({
  globalData: {
    bottomLift: 0 //苹果X及以上的底部小黑条高度
  },
 
  onLaunch: function () {
    //获取当前设备信息
    wx.getSystemInfo({
      success: res => {
        // 苹果X及以上的底部安全区域
        if (res.safeArea.top > 20) {
          this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
        }
      },
      fail:err => {
        console.log(err);
      }
    })
  },
  onShow: function () {
  },
});

2.在所需页面的js文件获取全局变量

const app = getApp()
 
Page({
  data: {
    bottomLift: app.globalData.bottomLift, //苹果X及以上机型的底部安全区域高度
  },
})

3.在所需页面的wxml里面使用

<view class="page" style="padding-bottom:{{bottomHeight}}px"></view>