微信小程序丨三步搞定iPhoneX全面屏顶部适配

在小程序开发中，会涉及到机型的适配，目前小程序没有对iPhone X等异形屏有特殊的接口或字段。小程序本身的底部tab栏对iPhone X的适配也只是简单的加了一个白色底栏，提高了原有tab栏的位置。因此，我们只能通过wx.getSystemInfo接口取获取设备信息来进行适配。

一、在app.js的globalData中添加字段isIPX: false，然后在onLaunch函数里面进行设置。

App({
  onLaunch: function() {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res);
        if (res.statusBarHeight > 20) {
          console.log("Device is iPhoneX!!!");
          that.globalData.isIPX = true;
        }
      }
    })
  },
  globalData: {
    isIPX: false,
  }
})

二、在你需要适配的页面的js文件中，添加字段isIPX并赋值。

const app = getApp();  // 获取当前app

Page({

  /**
   * 页面的初始数据
   */
  data: {
    isIPX: app.globalData.isIPX,  // 将全局参数值赋予当前页面
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
  }
})

三、在对应的wxml文件中，作如下判断：

<view class="navigationBar" style="background:red;width:100%;height:{{isIPX?'88px':'64px'}};"></view>

这样就可以实现了，请根据自身项目实际情况做调整吧。