如何解決iOS新版微信底部返回橫條的問題

這篇文章主要為大家展示了“如何解決iOS新版微信底部返回橫條的問題”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何解決iOS新版微信底部返回橫條的問題”這篇文章吧。

成都創(chuàng)新互聯(lián)公司服務項目包括高安網站建設、高安網站制作、高安網頁制作以及高安網絡營銷策劃等。多年來，我們專注于互聯(lián)網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網行業(yè)的解決方案，高安網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到高安省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

之前沒有怎么接觸過微信開發(fā)，只是對H5比較熟。最近維護一個微信公眾號的項目，遇到了iOS端返回鍵的坑。

描述一下：

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

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

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

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

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

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

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

代碼如下：

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)聽到。然后這里修改了返回事件，當點擊返回時觸發(fā)關閉當前頁面。

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

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

以上是“如何解決iOS新版微信底部返回橫條的問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網頁題目：如何解決iOS新版微信底部返回橫條的問題
鏈接地址：http://muchs.cn/article8/pgooip.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供建站公司、域名注冊、關鍵詞優(yōu)化、網站營銷、網站設計、靜態(tài)網站

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)