之前沒有怎么接觸過微信開發(fā)，只是對H5比較熟。最近維護一個微信公眾號的項目，遇到了iOS端返回鍵的坑。
描述一下：
從公眾號打開頁面后，底部有個返回的小橫條，恰好也擋住了頁面。這不行啊，得解決。

頁面的高度是調(diào)用 $(window).height();來獲取的，但道理來講應(yīng)該沒什么問題。
第一個反應(yīng)是，要不判斷一下設(shè)備，如果是iOS則給添加一個高度？
這個想法還沒實行呢，就發(fā)現(xiàn)了一個現(xiàn)象。第一次進來的時候是擋著的，但是刷新一下就不擋了。然后就想著要不判斷第一次進來給個刷新？

然后落實了，改代碼。的確沒有問題，進來之后會判斷是否第一次，如果是第一次則刷新頁面。刷新之后頁面高度顯示正常。

但是在頁面加載后刷新，會有很明顯的跳轉(zhuǎn)，也耗資源。不是最好的解決方式。然后繼續(xù)整改。

最后還是得從源頭出發(fā)，找到為什么會有底部的小橫條。

一般的，如果是第一個界面，是沒有底部橫條的。當(dāng)頁面發(fā)生跳轉(zhuǎn)后，會有底部小橫條。

然后我就在頁面中找跳轉(zhuǎn)，最后發(fā)現(xiàn)，有幾行代碼是給當(dāng)前添加歷史記錄的！
代碼如下：

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的返回鍵就可以監(jiān)聽到。然后這里修改了返回事件，當(dāng)點擊返回時觸發(fā)關(guān)閉當(dāng)前頁面。
我覺得這個代碼應(yīng)該是微信公眾號開發(fā)里面比較常用的一種方式。在以前的話，也沒什么問題，可以返回關(guān)閉頁面，比較方便。但是升級之后，微信多出來底部的返回條，而頁面高度是在之前取的值，那么頁面的高度就是未加橫條的高度，橫條出現(xiàn)后自然會遮擋住頁面內(nèi)容。

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

總結(jié)

以上是生活随笔為你收集整理的iOS新版微信底部返回横条问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。