微信小程序自定义tabBar机型适配，不用写脚本

微信小程序可以通过在app.json文件中定义官方的tabBar，但是实际项目中往往会遇到一些业务需求官方的tabBar无法做到。比如说底部的tabBar个数是根据不同角色来显示，这个时候我们需要自定义tabBar。在自定义tabBar的时候了会遇到不同机型底部适配问题（比如iphoneX，Iphone 11Pro ,一些齐刘海机型底部安全区域问题），一开始我想到的是用脚本判断设备机型，通过是不是齐刘海来给底部tabBar预留64rpx的距离。

wx.getSystemInfo({
      success: res => {
        let { screenWidth, screenHeight } = res
        console.log("设备信息：",res)
        // iphoneX 、11、Xr、 Max等设备分辨率
        let _screen = [
          {w: 375, h: 812 },
          {w: 414, h: 896 }
        ]
        that.globalData.isIphoneX  = _screen.some(item => item.w === screenWidth && item.h === screenHeight)
        console.log("isIphoneX设备：", that.globalData.isIphoneX )
      }
    })

刚好最近一个小程序项目上线了，恰巧又碰到iphone 12新手机上市，客户那边反应iphone 12 Pro上底部tabBar显示有遮挡。不用想我就知道肯定是新产品iphone12,iphone 12 pro的设备分辨率不在对比的数据列表内，所以我就在想如果后面又有新的机型出现怎么办？所以上面的代码通用性不是很强。就在网上百度查看到可以通过css直接设置安全区域底部来解决，只需在包裹tabBar的元素（class:tabbar_wrapper）上加一行代码解决即可。

.tabbar_wrapper{
   padding-bottom:calc(100rpx + env(safe-area-inset-bottom))  
}

env(safe-area-inset-bottom) 参考链接：https://blog.csdn.net/sd19871122/article/details/80989704