微信小程序 - iPhoneX 刘海屏适配

微信小程序适配 iPhone X 总结

方法一 js直接调用wx.getSystemInfoSync

底部
<view class='btn' style="padding-bottom:{{isIPhoneX ? 68 : 0}}rpx;" >底部</view>
1
判断是否是iPhoneX

const app = getApp()
 
Page({
  data: {
    isIPhoneX:false,
  },
  onLoad: function () {
    this.setData({
      "isIphoneX": this.isIphoneX()
    })
  },
  isIphoneX() {
   let res = wx.getSystemInfoSync();
   if (res.screenHeight == 812 || res.screenHeight == 896) {
      return true;
    } else {
      return false;
    }
  }
})

方法二 app.js 调用wx.getSystemInfoSync，设置全局变量, onLaunch 调用checkIsIPhoneX

  isIPhoneX: false, // 当前设备是否为 iPhone X

  // 判断设备是否为 iPhone X
  checkIsIPhoneX: function () {
    var that = this
    wx.getSystemInfo({
      success: function (res) {
        // 判断设备是否为刘海屏
        if (res.screenHeight == 812 || res.screenHeight == 896) {
          that.isIPhoneX = true
        }
      }
    })
  },

js

var app = getApp();

  data: {
    isIPhoneX: app.isIPhoneX,
   }

wxml

<view class='{{isIPhoneX ? "footer-bg-IPhoneX ":"footer-bg"}}'>
</view>

wxss

.footer-bg {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
}

.footer-bg-IPhoneX {
  background: white;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  /* iPhone X 内容往上偏移 34px */
  padding-bottom: 68rpx;
}