之前沒(méi)有怎么接觸過(guò)微信開發(fā)，只是對(duì)H5比較熟。最近維護(hù)一個(gè)微信公眾號(hào)的項(xiàng)目，遇到了iOS端返回鍵的坑。

描述一下：

從公眾號(hào)打開頁(yè)面后，底部有個(gè)返回的小橫條，恰好也擋住了頁(yè)面。這不行啊，得解決。

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

然后落實(shí)了，改代碼。的確沒(méi)有問(wèn)題，進(jìn)來(lái)之后會(huì)判斷是否第一次，如果是第一次則刷新頁(yè)面。刷新之后頁(yè)面高度顯示正常。

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

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

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

然后我就在頁(yè)面中找跳轉(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", "#"); 
 } 
}

分析一下代碼，這里其實(shí)就是 添加一個(gè)歷史記錄，有了歷史記錄，微信的小橫條就會(huì)出來(lái)，Android的返回鍵就可以監(jiān)聽到。然后這里修改了返回事件，當(dāng)點(diǎn)擊返回時(shí)觸發(fā)關(guān)閉當(dāng)前頁(yè)面。

我覺(jué)得這個(gè)代碼應(yīng)該是微信公眾號(hào)開發(fā)里面比較常用的一種方式。在以前的話，也沒(méi)什么問(wèn)題，可以返回關(guān)閉頁(yè)面，比較方便。但是升級(jí)之后，微信多出來(lái)底部的返回條，而頁(yè)面高度是在之前取的值，那么頁(yè)面的高度就是未加橫條的高度，橫條出現(xiàn)后自然會(huì)遮擋住頁(yè)面內(nèi)容。

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

到此這篇關(guān)于iOS新版微信底部返回橫條問(wèn)題的解決的文章就介紹到這了,更多相關(guān)iOS 微信底部返回橫條 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論