微信小程序中适配iphoneX或适配 iPhone 11/Pro及以上的机型的兼容性

今天做一个功能，需要兼容iphoneX系列以及11.12以上的设备的兼容性，由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图：

于是乎就翻了翻小程序的API文档，果不其然在小程序基础接口里面有提供接口
wx.getSystemInfo(Object object)

那么接下来我们讲解下在小程序的开发中我们怎么使用？

1、在全局的app.js文件中globalData我们创建全局变量，然后获取设备型号

 globalData: {
        isIphoneX: false,//判断机型 
    }

onShow(e){
        var that = this
        // 获取设备机型
        wx.getSystemInfo({
            success:  res=>{
              console.log('手机信息res'+res.model)
              let model = res.model;
                if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)){
                    that.globalData.isIphoneX = true;
                }else{
                    that.globalData.isIphoneX = false;
                }
            }
        })
       
    },
    

运行代码拿到如下图所示结果

2、 在需要引用的页面js文件中onload方法里获取全局变量
js

onLoad(){
  //获取当前设备机型
        let isIphoneX = app.globalData.isIphoneX;
        this.setData({
            isIphoneX: isIphoneX
        })
        wx.getSystemInfo({
            success (ress) {
                query.select('.pt_footer').boundingClientRect(function (res){
                    _this.setData({
                        windowHeight: ress.windowHeight - res.height - 4
                    });
                }).exec();
              }
        });
    }
        

3 在 wxml文件中 进行css的逻辑判断
wxml

<view class="pt_footer {{isIphoneX?'isIPX':''}}"></view>

wxss

.isIPX{
  height: 128rpx !important;
}

最终修改之后的样式如下