之前没有怎么接触过微信开发,只是对h5比较熟。最近维护一个微信公众号的项目,遇到了ios端返回键的坑。
描述一下:
从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面。这不行啊,得解决。
页面的高度是调用 $(window).height();来获取的,但道理来讲应该没什么问题。
第一个反应是,要不判断一下设备,如果是ios则给添加一个高度?
这个想法还没实行呢,就发现了一个现象。第一次进来的时候是挡着的,但是刷新一下就不挡了。然后就想着要不判断第一次进来给个刷新?
然后落实了,改代码。的确没有问题,进来之后会判断是否第一次,如果是第一次则刷新页面。刷新之后页面高度显示正常。
但是在页面加载后刷新,会有很明显的跳转,也耗资源。不是最好的解决方式。然后继续整改。
最后还是得从源头出发,找到为什么会有底部的小横条。
一般的,如果是第一个界面,是没有底部横条的。当页面发生跳转后,会有底部小横条。
然后我就在页面中找跳转,最后发现,有几行代码是给当前添加历史记录的!
代码如下:
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的返回键就可以监听到。然后这里修改了返回事件,当点击返回时触发关闭当前页面。
我觉得这个代码应该是微信公众号开发里面比较常用的一种方式。在以前的话,也没什么问题,可以返回关闭页面,比较方便。但是升级之后,微信多出来底部的返回条,而页面高度是在之前取的值,那么页面的高度就是未加横条的高度,横条出现后自然会遮挡住页面内容。
解决方式也很简单,把这段代码 提前,提前到获取高度之前,这样的话先有了横条,再有高度,则高度刚刚好是中间部分,这样就不会有遮挡问题