今天做一个功能,需要兼容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
})
}
3 在 wxml文件中 进行css的逻辑判断
wxml
<view class="pt_footer {{isIphoneX?'isIPX':''}}"></view>
wxss
.isIPX{
height: 128rpx !important;
}
最终修改之后的样式如下