微信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有没有什么清里的办法？求各位大神指教～～！

转载于:https://juejin.im/post/5c9ddd2f6fb9a05e5a2e334d