微信小程序 iPhoneX 底部安全区域适配

1.问题

• 微信小程序的tabbar会被iPhoneX 底部小黑条覆盖
  

2.解决方案

（1）获取手机型号，单独处理样式（底部小黑条大约为68rpx）
（2）实现铺满全屏效果
（3）具体代码

• app.js中统一处理

    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight ;
        // 获取视口高度
        let clientHeight = res.windowHeight;
        let clientWidth = res.windowWidth;
        let ratio = 750 / clientWidth;
        let height = clientHeight * ratio; 
        let modelmes = res.model;
        // 得到安全区域高度
        if (modelmes.search('iPhone X') != -1) //IPhoneX底部大约为68rpx
          this.globalData.screenHeight = (height+68) - (res.statusBarHeight * ratio) 
        }else{
          this.globalData.screenHeight = height - (res.statusBarHeight * ratio)
        }
      }, fail(err) {
        console.log(err);
      }
    })
  },

wxml中使用

data: {
    viewHeight: app.globalData.screenHeight,
    },
    
<view class="container" style="{{'height:' + viewHeight + 'rpx'}}"></view>

.container{
background:red;
}