微信小程序 iPhone刘海屏系列机型适配

按钮被底部横条遮挡

第一步 判断是否是刘海屏

首先我们打印一下机型信息

wx.getSystemInfo({
  success: function (res) {
    console.log(res)
  }
})

可以看到，模拟器下，普通屏幕statusBarHeight为20，而刘海屏statusBarHeight为44。

模拟器 非刘海机型 iOS10 statusBar为20 模拟器 刘海机型 iOS10 statusBar为44
真机下，model和模拟器有些出入，但都带iPhone字样。刘海屏statusBarHeight在iOS14和iOS13及以下系统不一样，为47。（因为状态栏多了隐私灯）
真机 刘海机型 iOS14 statusBar为47

所以判断是iPhone刘海屏机型的条件就可以是：model带iPhone字样 && statusBarHeight > 20
我们在app.js里写好全局变量：

isIPhoneXSeries: false, // 当前设备是否为刘海屏系列手机

wx.getSystemInfo({
  success: function (res) {
    console.log(res)
    // 判断设备是否为刘海屏
    if (res.model.indexOf("iPhone") >= 0 && (res.statusBarHeight > 20)) {
       _this.globalData.isIPhoneXSeries = true
    }
  }
})

第二步：控件适配刘海屏

方法一：写两个样式
js：

var app = getApp();
data: {
  isIPhoneXSeries: app.isIPhoneXSeries,
}

wxml：

<view class="isIPhoneXSeries ? bottomSafeHeight : bottomHeight">
  <view class="ok">确定</view>
  <view class="cancel">取消</view>
</view>

wxss：

.bottomSafeHeight {  /*刘海屏底部高度*/
  height: 124rpx;
}
.bottomHeight {  /*普通屏幕底部高度*/
  height: 90rpx;
}

方法二：控件高度设为变量，在js中计算这个变量的值
js：

let bottomHeight = getApp().globalData.isIPhoneXSeries ? 124 : 90
this.setData({
  bottomHeight: bottomHeight
})

wxml：

<view style="height:{{bottomHeight}}rpx">
  <view class="ok">确定</view>
  <view class="cancel">取消</view>
</view>

适配完毕