小程序：底部安全区域适配

1.调用wx.getSystemInfo获取系统信息，并存储为全局变量。

// app.js
App({
  onLaunch() {
    // 调用wx.getSystemInfo,获取手机型号(res.model),并存储为全局变量
    let _self = this
    wx.getSystemInfo({
      success: (res) => {
        // 获取手机型号
        let modelmes = res.model;
        if(modelmes.search("iPhone X")!= -1){
          _self.globalData.isIphoneX = true
        }
      },
    })
  },
  globalData: {
    userInfo: null
  }
})

2.把存储在全局变量的数据引用到需要页面的JS上。（这里设置为ihoneX）

onLoad: function(options){
      let isIphoneX = app.globalData.isIphoneX;
      this.setData({
          isIphoneX: isIphoneX
      })
  }

 3.给页面添加一个最底部的盒子，或者给整个页面套一个最外层的盒子

<view class="detail" style="height: {{isIphoneX ? 'calc(100% - 68rpx)' : '100%'}}">
     内容。。。
</view>

4.App.wxss 的Page高度需要设置，同时detail页面的也需要设置溢出滚动，这样才能保证页面正常滚动

page{
  height: 100%;
}
.detail{
  overflow: scroll;
}