iOS新版微信底部返回橫條問題
阿新 • • 發佈:2019-02-04
之前沒有怎麼接觸過微信開發,只是對H5比較熟。最近維護一個微信公眾號的專案,遇到了iOS端返回鍵的坑。
描述一下:
從公眾號開啟頁面後,底部有個返回的小橫條,恰好也擋住了頁面。這不行啊,得解決。
頁面的高度是呼叫 $(window).height();
來獲取的,但道理來講應該沒什麼問題。
第一個反應是,要不判斷一下裝置,如果是iOS則給新增一個高度?
這個想法還沒實行呢,就發現了一個現象。第一次進來的時候是擋著的,但是重新整理一下就不擋了。然後就想著要不判斷第一次進來給個重新整理?
然後落實了,改程式碼。的確沒有問題,進來之後會判斷是否第一次,如果是第一次則重新整理頁面。重新整理之後頁面高度顯示正常。
但是在頁面載入後重新整理,會有很明顯的跳轉,也耗資源。不是最好的解決方式。然後繼續整改。
最後還是得從源頭出發,找到為什麼會有底部的小橫條。
一般的,如果是第一個介面,是沒有底部橫條的。當頁面發生跳轉後,會有底部小橫條。
然後我就在頁面中找跳轉,最後發現,有幾行程式碼是給當前新增歷史記錄的!
程式碼如下:
function(){
pushHistory();
window.addEventListener("popstate", function(e) {
WeixinJSBridge.invoke('closeWindow',{},function (res){ });
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
}
分析一下程式碼,這裡其實就是 新增一個歷史記錄,有了歷史記錄,微信的小橫條就會出來,Android的返回鍵就可以監聽到。然後這裡修改了返回事件,當點選返回時觸發關閉當前頁面。
我覺得這個程式碼應該是微信公眾號開發裡面比較常用的一種方式。在以前的話,也沒什麼問題,可以返回關閉頁面,比較方便。但是升級之後,微信多出來底部的返回條,而頁面高度是在之前取的值,那麼頁面的高度就是未加橫條的高度,橫條出現後自然會遮擋住頁面內容。
解決方式也很簡單,把這段程式碼 提前,提前到獲取高度之前,這樣的話先有了橫條,再有高度,則高度剛剛好是中間部分,這樣就不會有遮擋問題