微信小程序适配iphoneX

在小程序开发中，涉及到适配iphonex的情况主要就是在页面的最下出现button的情况，对于这个的解决思路就是：

1.获取设备型号：

cont app = getApp();

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

2. 根据不同的设备，设置不同的css样式，另外在html布局的时候button放进别的容器标签中例如：

xx.wxml
    <view class='contentView' style='padding-bottom:{{btuBottom}}'>
        <button class='but'>Button </button>
    </view>

xx.wxss
.contentView{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #ffffff;
}
.btu{
  width: 100%;
  background-color: #3d97f2;
  color: #fff;
  font-size: 30rpx;
}

xx.js
  data: {
  btuBottom""
  },
//在这里只需要判断是不是iphonex，然后设置下padding-bottom:即可
  onLoad: function (options) {
    let isPhone = app.globalData.isIpx;
    if(isPhone){
      this.setData({
        btuBottom:"68rpx",
      })
    }
}

这样就完成了适配。