微信小程序适配iphonex iphone11底部tabbar

需求：由于iphonex及之后的机型底部有一根横线，导致tabbar比原来提升了一段高度。根据底部tabbar提升的高度，计算出页面需要在底部给整个tabbar留出的位置高度。
PS：微信开发者工具iphonex与实际真机测试效果不同，底部并没有底部提升。

iphone11截图
app.js调用 wx.getSystemInfo接口获取页面信息，判断底部提升高度。
官网文档：获取系统信息

如图所示

底部提升的高度 = screenHeight - safeArea.bottom
tabbar为固定高度57px
app.js

  globalData: {
    bottomLift: 0,
  },
  onLaunch: function(options) {
    this.getDeviceSize().then(res => {
      const {bottomLift} = res
      this.globalData.bottomLift = bottomLift
    })
  },
  // 获取设备信息
  getDeviceSize: function() {
    return new Promise((resolve, reject) => {
      wx.getSystemInfo({
        success: function(res) {
          // console.log(res)
          const {screenHeight, safeArea} = res
          const {bottom} = safeArea
          const bottomLift = screenHeight - bottom
          resolve({bottomLift})
        }
      })
    })
  },

使用tabbar的页面

//js
Page({
  data: {
    bottomLift: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let {bottomLift} = app.globalData
    if(bottomLift>=0){
      app.getDeviceSize().then(res => {
        const {bottomLift} = res
        this.setData({
          bottomLift
        })
      })
    }else{
      this.setData({
        bottomLift
      })
    }
  }
})
//wxss
.wrap{ 
  min-height: calc(100vh - 57px); 
  box-sizing: border-box;
}
//wxml
<view class='wrap' style="padding-bottom: {{57 + bottomLift}}px">
  //页面底部留出高度 = tabbar高度 + 提升高度
  ...
</view>

转载于：https://www.jianshu.com/p/469fc45c9157