IOS下的微信H5页面的底部前进后退横栏的解决方案

问题原因:在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。

方案1:经过查资料,很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {

    WeixinJSBridge.call('hideToolbar');        // 隐藏底部状态栏

    WeixinJSBridge.call('hideOptionMenu');    // 隐藏右上角的三个点的选项

    WeixinJSBridge.call('showToolbar');        // 显示底部状态栏

    WeixinJSBridge.call('showOptionMenu');    // 显示右上角的三个点的选项

})

然而我试了下发现并没有效果,这个暂时只对企业微信有效。

方案2:this.$router.replace('/path')

这种方法可以很好的解决咱们的问题,但是需要自己写一个路由历史栈,去保存历史跳转的记录,然后监听路由返回,再从历史栈中去一个一个 回退,回退一个就移除掉一个。因为replace跳转方式是不存储路由的,也就是没法返回上一个页面,所以需要自己从历史栈中拿出最后一个存储的url再replace回去。

例子history=[{url:'a'},{url:'b'}]

当你进入第一个页面的时候将当前页面的url存储至history当中,全局的。当跳转进入b页面的时候使用replace。这样当前页面就显示b页面了。当需要继续跳转至C页面的时候在跳转之前判断一下要去的页面路由堆栈中是否存在。存在就取出来跳转将堆栈中的这一条记录移除,如果不存在就将当前页面路由保存至history,再replace到下一个页面。之后每当返回的时候都从历史堆栈中最后一个replace,然后移除就可以了。

历史路由堆栈的方法可以自己写,根据自己的思路写就行。。

你可能感兴趣的:(IOS下的微信H5页面的底部前进后退横栏的解决方案)