小程序兼容全面屏自定義底部按鈕

如果你的小程序頁面按鈕有用fixed定位到底部的話，那你一定會遇到兼容全面屏的坑（與底部橫條重疊）。查了下文檔，發現能用的就只有一個api：

wx.getSystemInfoSync()

不過蛋疼的是這個api並沒有提供類似安全距離這樣的數據，只提供了以下可能用得到數據：

 

研究了下發現只能曲線救國了：

上代碼：

export function $checkFullSucreen () {
    Taro.getSystemInfo()
        .then((res) => {
            if (res.screenHeight - res.windowHeight - res.statusBarHeight - 46 > 70) {
　　　　　　　　　　//  處理相關邏輯
                setGlobalData('fullScreen', true)
            }
        })
}

（上面的Taro是京東小程序的框架，這邊自己封裝到一個文件中導出，如果你不知道的話）

因為微信本身是對全面屏做了適配，用開發者工具可以看到小程序底部的tab高度，全面屏明顯高於普通屏，這邊用工具測量了iphone X的下大概是80px，又測了下iphone6及其他的，發現大概50px上下，沒有超過60。

所以這邊判斷微信對應全面屏的適配tab底部高度應該是要起碼大於60，這邊考量了下取70作為判斷，你也可以取75之類的。

（46則是小程序頂部title區域測出的大概高度）

根據上面的方法判斷出全面屏后，可以給相應的頁面增加底部padding或margin就可以了