小程序适配IphoneX

首先，我们需要判断手机是否是IphoneX手机：wx.getSystemInfo

//查看手机是否是IphoneX
 wx.getSystemInfo({
           success: function (res) {
             console.log(res)
            let model = res.model.substring(0, res.model.indexOf("X")) + "X"
           if (model == 'iPhone X') {
                that.globalData.isIphoneX = true
           }
      }
})

全局定义一个变量isIphoneX，通过此值是否为true，显示或是隐藏，底部的 空白区域；

  <view class="button-group {{isIphoneX ?'fix-iphonex-button':''}}"></view>

样式代码：

.fix-iphonex-button {
    bottom:68rpx!important;
    width:100vw;
}
.fix-iphonex-button::after {
    content: ' ';
    position: fixed;
    bottom: 0!important;
    height: 68rpx!important;
    width: 100%;
    background: #fff;
}

这样就可以在IphoneX手机的底部增加68rpx的空白区域。