微信小程序适配iphone X

原因：

微信小程序在iphone x下打开时，会被底部home条遮挡
尤其是当底部为button按钮的时候，很难点击按钮

解决方案：

步骤一：在app.js文件中，创建全局变量，然后获取设备型号：

globalData: {
  isIphoneX: false
},

wx.getSystemInfo({
  success: function(res) {
    //model中包含着设备信息
    console.log(res.model)
    var model = res.model
    if (model.search('iPhone X') != -1){
      app.globalData.isIphoneX = true;
    }else{
      app.globalData.isIphoneX = false;
    }
  }
})

步骤二：在需要适配的页面js文件中onLoad方法里获取全局变量

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

步骤三：在wxml文件中，加入样式判断

<view class="{{ isIphoneX ? 'isIpx' : '' }}"> </wiew>

步骤四：在wxss文件中，加入适配的样式

.isIpx {
  padding-bottom: 30rpx !important;
}