記一次微信h5開發的坑。。。

正常的效果如下：

本身用的cube-ui開發，上半部分是自己寫的，下邊用的是better-scroll,為了滑動更流暢。這個頁面前邊有一個登錄頁面，登錄之后就會跳到這個首頁。

在安卓和瀏覽器上，乃至微信開發者工具都是沒有問題的，但是在iPhone上居然就是這個鬼樣子。神奇的是，刷新一下就好了，然后再次進來這個頁面就沒有問題。

下邊是bug展示效果：

在可以調試的地方復現不了bug真的是很頭疼的一件事，查找原因就只能靠猜了。

（如果 你們有什么好的方法可以實現微信h5頁面真機調試的方法，麻煩告知我，跪謝～！）

猜測一：

由于下邊的返回白條把上邊的頁面擠上去了。然后開始查找晚上的資料，網上資料大概有兩類：

直接簡單粗暴

window.WeixinJSBridge.call('hideToolBar')復制代碼

這個方法經過我的驗證，無效，正好在此辟謠一下。

白條是因為有歷史記錄才生成的，那么就避免產生歷史記錄就好了：可以所有的頁面跳轉都用replace代替

當我用第二種方法實現了隱藏白條的功能時，興高采烈的趕緊登錄，但是失落的是，紅色按鈕下垂了，但是上邊還在擠上去了。

好吧，我就當學會一個隱藏白條的方法吧～

開始有點摸不著頭緒。

• 再次猜測是不是因為window.clientHeight和window.scrollHeight這些高度渲染時候獲取的高度不對的問題，但是alert的時候發現，倆者是相同的
• 但是開心的是發現了登錄頁面和其他正常頁面的告訴不一樣，多了一個導航的高度。
• 之后以為是我的css寫的不規范，不應該啊。把所以可能的試了，也不是這個問題。

但是通過反復看看那個頁面，突然有一次輸入完密碼，關閉軟鍵盤之后發現登錄頁面底部有個灰色的條，然后向下滑一下頁面再次登錄，頁面就沒有問題了

然后就有了

猜想二：

可能是被軟鍵盤把頁面擠上去了，因為之前也有遇到過軟鍵盤的問題。

這時候去萬能的百度一搜，果真有這樣的問題：軟鍵盤會把頁面擠上去，并且不會自己回來，所以需要手動拉下來，所以在頁面跳轉之前執行

window.scroll(0,0)復制代碼

懷著激動的心情，打開頁面，終于實現了～！開心

終于可以下班了～！

此外還有一個問題，iPhone微信端的localStorage有沒有什么清里的辦法？求各位大神指教～～！

轉載于:https://juejin.im/post/5c9ddd2f6fb9a05e5a2e334d

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的微信h5开发的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。