之前沒有怎麼接觸過微信開發，只是對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的返回鍵就可以監聽到。然後這裡修改了返回事件，當點選返回時觸發關閉當前頁面。

我覺得這個程式碼應該是微信公眾號開發裡面比較常用的一種方式。在以前的話，也沒什麼問題，可以返回關閉頁面，比較方便。但是升級之後，微信多出來底部的返回條，而頁面高度是在之前取的值，那麼頁面的高度就是未加橫條的高度，橫條出現後自然會遮擋住頁面內容。

解決方式也很簡單，把這段程式碼 提前，提前到獲取高度之前，這樣的話先有了橫條，再有高度，則高度剛剛好是中間部分，這樣就不會有遮擋問題

到此這篇關於iOS新版微信底部返回橫條問題的解決的文章就介紹到這了,更多相關iOS 微信底部返回橫條 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！