微信浏览器的底部返回横条兼容问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

先说说要兼容啥

先说清楚本文要解决的兼容对象是谁，然后再谈如何处理。先看图

这是在ios系统下，使用微信浏览器浏览公司的公众号页时出现的bug，在ios中，当浏览一个网页的多个界面时，产生路由记录后，就会有如上图箭头所指的前进后退的功能栏，并且会随着上下滚动而出现隐藏。

这里就有两个关键点，必须有路由记录才会出现， 并且会随着上下滚动而出现隐藏。

随滚动而出现隐藏比较好处理，比较麻烦的是他出现的时机。

再看上图，是一个聊天界面，是可以通过首页进入的，这就意味着，进入到这个界面的时候，才出现它，而整个界面需要通过计算来设置中间内容区的高度，而输入框是紧随其后，并非通过fixed固定定位来设置的。

所以就导致当用户进入这个界面时，计算高度不会计算到他，最终导致界面的破版。

解决方法

经过我小心测试，最终有两个解决方案，其一是来自于网络，比较适合大多数情况。原文链接

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", "#");  
  }  
}

方法简言之就是在用户进入之后，主动插入一个路由记录，触发ios显示底部横条的部分。

但是因为项目是单页应用，所以不刷新界面的话，还是会出现不计算底部横条的情况。

方案二，结合项目逻辑来处理。

为了减少已注册用户的操作，提升用户体验，所以在进入首页时，会判断用户当前微信是否已注册，未注册就直接前往首页，已注册则静默登录之后前往首页。

所以在这时候就有一个跳转的动作，通过window.location.href跳转，即产生了路由记录，也刷新了页面，一举两得，但是还是要根据项目逻辑来处理。