微信小程序自定義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