小程序苹果手机底部出现横杠处理

iphone X 手机底部会出现横杠，会影响底部的操作，可以通过判断是否是对应机型，进行不同样式的设置

Taro.getSystemInfoSync() 获取系统信息同步接口。

官网说明：https://taro-docs.jd.com/taro/docs/apis/base/system/getSystemInfoSync

示例代码：

try {
  const res = Taro.getSystemInfoSync()
  console.log(res.model) // 设备型号
  console.log(res.pixelRatio) // 设备像素比
  console.log(res.windowWidth) // 可使用窗口宽度，单位px
  console.log(res.windowHeight) // 可使用窗口高度，单位px
  console.log(res.language) // 微信设置的语言
  console.log(res.version) // 微信版本号
  console.log(res.platform) // 客户端平台
} catch (e) {
  // Do something when catch error
}

示例实操：

// utils/index.ts
import Taro from '@tarojs/taro';

const menuButtonInfo = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;

const systemInfo: any = (() => {
  try {
    return Taro.getSystemInfoSync();
  } catch (e) {
    return undefined;
  }
})();

interface utils {
  systemEnv: string;
  isIphoneX: boolean;
  isIOS: boolean;
  navHeight: number;
  windowHeight: number;
}
const utils: utils = {
  /**
   * 系统环境
   */
  systemEnv: systemInfo && (systemInfo.environment || 'wx'),

  /**
   * 是否是 iphonex
   */
  isIphoneX:
    !!systemInfo &&
    (systemInfo.model.includes('iPhone X') ||
      systemInfo.model.includes('iPhone 11 Pro') ||
      systemInfo.model.includes('iPhone 12') ||
      systemInfo.model.includes('iPhone 12 Pro') ||
      systemInfo.model === 'unknown'),

  /**
   * 是否是IOS系统
   */
  isIOS: !!systemInfo && systemInfo.platform.toLowerCase() === 'ios',

  // /**
  //  * 是否是生产环境
  //  */
  // isProd: appConfig.env === 'production',

  /**
   * 自定义导航栏高度
   */
  navHeight: menuButtonInfo?.top ? menuButtonInfo.top + 40 : 26 + 40,
  /**
   * 可用窗口高度
   */
  windowHeight: systemInfo?.windowHeight || 0,
};

export default utils;

示例使用：

// 引入
import utils from '@/utils';
// 如果是对应机型，就在底部渲染一个间隔，使横杠不影响视觉效果
// 用isIphoneX判断 对应机型
{utils.isIphoneX && <IphoneXHome />}