亲宝软件园·资讯

展开

iOS 微信底部返回横条 iOS新版微信底部返回横条问题的解决

技术熊 人气:0

之前没有怎么接触过微信开发,只是对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的返回键就可以监听到。然后这里修改了返回事件,当点击返回时触发关闭当前页面。

我觉得这个代码应该是微信公众号开发里面比较常用的一种方式。在以前的话,也没什么问题,可以返回关闭页面,比较方便。但是升级之后,微信多出来底部的返回条,而页面高度是在之前取的值,那么页面的高度就是未加横条的高度,横条出现后自然会遮挡住页面内容。

解决方式也很简单,把这段代码 提前,提前到获取高度之前,这样的话先有了横条,再有高度,则高度刚刚好是中间部分,这样就不会有遮挡问题

加载全部内容

相关教程
猜你喜欢
用户评论