微信小程序吸底区域适配iPhone X

微信小程序适配iPhone X主要针对fix定位到底部的区域，好比详情页或购物车底部的按钮栏，会与iPhone X的Home Indicator横条重叠，这样在点击下方按钮时很容易误触发手势操做，以下图：

mpvue中适配方法：

1.获取设备信息

/** * 获取设备信息 * @returns {Promise<any>} */
export function wechatGetSystemInfo () {
  return new Promise((resolve, reject) => {
    wx.getSystemInfo({
      success: (res) => {
        resolve(res)
      }, fail: (err) => {
        reject(err)
      }
    })
  })
}

2.设置css样式

.view-fix-iphonex {
  bottom: ~'60rpx' !important;
}

.view-fix-iphonex::after {
  content: ' ';
  position: fixed;
  bottom: 0 !important;
  height: ~'60rpx' !important;
  width: 100%;
  background: #fff;
}

3.设置一个标识符isIpx存在vuex中，在小程序初始化完成时判断

在 App.vue 中处理

<script>
  import wx from 'wx'
  import { mapGetters, mapActions } from 'vuex'
  import { wechatGetSystemInfo } from './utils/weappUtils'

  export default {
    onLaunch () {
      this.isIphoneX()
    },
    computed: {
      ...mapGetters(['isIpx'])
    },
    methods: {
      //判断设备是不是iphoneX
      isIphoneX() {
        wechatGetSystemInfo().then(res => {
          const deviceModel = 'iPhone X'
          let isIpx = false
          if (res.model.indexOf(deviceModel) > -1) {
            isIpx = true
          }
          if (this.isIpx !== isIpx) {
            this.setIsIpx(isIpx)
          }
        }).catch(err => {})
      },
      ...mapActions(['setIsIpx'])
    }
  }
</script>

4.在须要适配的页面中设置

如在 demo.vue 中处理

<template>
     <div class="fix-view"
         :class="isIpx?'view-fix-iphonex':''"
    >
     吸附在底部的区域
    </div>
</template>


<script>
  import wx from 'wx'
  import {mapGetters} from 'vuex'

  export default {
    computed: {
      ...mapGetters(['isIpx'])
    },
  }
</script>

<style lang="less">
    .fix-view {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: ~'100rpx';
      line-height: ~'100rpx';
      box-sizing: border-box;
      text-align: right;
      display: flex;
      justify-content: end;
      background: #fff;
    }
</style>