微信h5开发的坑

记一次微信h5开发的坑。。。

正常的效果以下：

自己用的cube-ui开发，上半部分是本身写的，下边用的是better-scroll,为了滑动更流畅。这个页面前边有一个登陆页面，登陆以后就会跳到这个首页。

在安卓和浏览器上，乃至微信开发者工具都是没有问题的，可是在iPhone上竟然就是这个鬼样子。神奇的是，刷新一下就行了，而后再次进来这个页面就没有问题。

下边是bug展现效果：

在能够调试的地方复现不了bug真的是很头疼的一件事，查找缘由就只能靠猜了。

（若是 大家有什么好的方法能够实现微信h5页面真机调试的方法，麻烦告知我，跪谢～！）

猜想一：

因为下边的返回白条把上边的页面挤上去了。而后开始查找晚上的资料，网上资料大概有两类：

1. 直接简单粗暴

   window.WeixinJSBridge.call('hideToolBar')复制代码

   这个方法通过个人验证，无效，正好在此辟谣一下。
2. 白条是由于有历史记录才生成的，那么就避免产生历史记录就行了：能够全部的页面跳转都用replace代替

当我用第二种方法实现了隐藏白条的功能时，兴高采烈的赶忙登陆，可是失落的是，红色按钮下垂了，可是上边还在挤上去了。

好吧，我就当学会一个隐藏白条的方法吧～

开始有点摸不着头绪。

• 再次猜想是否是由于window.clientHeight和window.scrollHeight这些高度渲染时候获取的高度不对的问题，可是alert的时候发现，俩者是相同的
• 可是开心的是发现了登陆页面和其余正常页面的告诉不同，多了一个导航的高度。
• 以后觉得是个人css写的不规范，不该该啊。把因此可能的试了，也不是这个问题。

可是经过反复看看那个页面，忽然有一次输入完密码，关闭软键盘以后发现登陆页面底部有个灰色的条，而后向下滑一下页面再次登陆，页面就没有问题了

而后就有了

猜测二：

多是被软键盘把页面挤上去了，由于以前也有遇到过软键盘的问题。

这时候去万能的百度一搜，果然有这样的问题：软键盘会把页面挤上去，而且不会本身回来，因此须要手动拉下来，因此在页面跳转以前执行

window.scroll(0,0)复制代码

怀着激动的心情，打开页面，终于实现了～！开心

终于能够下班了～！

此外还有一个问题，iPhone微信端的localStorage有没有什么清里的办法？求各位大神指教～～！