问题二 ： Iphone X后版本手机下方控制台遮挡页面问题。

问题背景

因公司业务需求，释放客服人员压力，公司于今年十月份决定让我研究并开发一套公司内部销售使用小程序。

问题发现

因为我之前一直从事web端，移动端、小程序端接触没有接触过，所以在开发初期没有预料到这些移动端适配机型适配问题，导致测试及开发过程中经常出现各种各样的适配问题。

这次的问题因为我们的测试机是Iphone 8plus 这一版本手机有home键所以下方没有控制台，导致测试过程中没有发现这一问题，是在后续开放使用过程中发现手机控制台遮挡了小程序下面的tabbar

问题修复

首先想到的解决方法是判断手机机型，如果是苹果手机就在页面下面增加padding 方法 ,

app.js

globalData : {
   isIphoneFlag : false
}

getUserModel () {
  let  _this = this
  wx.getSystemInfo({
      success: function (res) {
        let modelmes = res.model;
        let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max',]

        iphoneArr.forEach(function (item) {
          if (modelmes.search(item) != -1) {
              _this.setData({ isIphoneFlag : true })
          }
        })    
      }

   })
}

通过wx官方的api获取用户手机，然后做一个Flag存下来。

page.js

const app = getApp();

data : {
  paddingBottom : 0,
}

onLoad() {
    let { isIphoneFlag } = app.globalData
    if( isIphoneFlag ){
      this.setData({ isIphoneFlag : isIphoneFlag }) 
    }
  }

通过之前获取到的用户机型来做一个匹配

page.wxml

  //苹果下方控制台的高度是34px
  <View class="page_wrapper" style="padding-bottom:{{ isIphoneFlag ?  34px : 0 }}">
  </View>

后面查资料发现css中有两个方法专门用来解决这个问题，特别简单只需要几行css代码

page.wxss

.page_wrapper {
  width: 100%;
  height: calc(100% - 50px);//css计算方法 减去下方小程序导航栏的高度
  overflow: scroll;
  box-sizing: border-box;//关键！！
  padding-bottom: constant(safe-area-inset-bottom); //兼容IOS版本<11.2
  padding-bottom: env(safe-area-inset-bottom);//兼容IOS版本>11.2
}