微信小程序适配iphoneX，XR，12的底部安全区域（底部小黑条）

 问题描述：
在项目页面开发过程中，有些页面的按钮是需要固定在页面底部的（比如电商项目的确认订单页）；如果直接设置bottom:0，那么在iphonex，xr，12等机型，就会出现下面左图的问题，按钮区域距离底部太近了，用户体验就会很差，按钮也不好点击。

解决思路：

为了适配所有的手机机型，我们需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）

 解决方法：

1.首先，我们需要在app.js里面，获取到底部小黑条区域的高度（小黑条区域高度=屏幕高度-安全区域的bottom值，安全区域指的是内容可见区域）：

app.js

App({
  globalData: {
    bottomLift: 0
  },
  onLaunch() {
    //获取当前设备信息
    wx.getSystemInfo({
      success: res => {
        this.globalData.bottomLift = res.screenHeight - res.safeArea.bottom;
      },
      fail(err) {
        console.log(err);
      }
    })
  }
})

2.在确认订单页面进行设置：

order-confirm.wxml

<view class="fixed-bottom" style="padding-bottom:{{bottomLift}}px">
    //代码内容已省略
</view>

order-confirm.js

const app = getApp()
Page({
  data: {
     bottomLift: app.globalData.bottomLift
  }
})

order-confirm.wxss

.fixed-bottom{
  display: flex;
  align-items: center;
  font-size: 30rpx;
  color: #666;
  padding: 20rpx;
  border-top: 2rpx solid #ddd;
  background-color: #fff;
  width: 710rpx;
  position: fixed;
  left: 0;
  bottom: 0;
}

这样子就可以解决上面的问题啦~