iOS新版微信底部返回横条问题的解决_ios新版微信底部工具栏遮挡问题怎么关闭资源-CSDN文库

版权申诉

155 浏览量 2021-01-03 12:56:37 上传评论收藏 47KB PDF 举报

资源推荐

资源详情

资源评论

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

之前没有怎么接触过微信开发，只是对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的返回键就可以监听到。

然后这里修改了返回事件，当点击返回时触发关闭当前页面。

我觉得这个代码应该是微信公众号开发里面比较常用的一种方式。在以前的话，也没什么问题，可以返回关闭页面，比较方

便。但是升级之后，微信多出来底部的返回条，而页面高度是在之前取的值，那么页面的高度就是未加横条的高度，横条出现

后自然会遮挡住页面内容。

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

这样就不会有遮挡问题

您可能感兴趣的文章您可能感兴趣的文章:iOS新版微信底部工具栏遮挡问题完美解决

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

版权申诉

weixin_38696582

粉丝: 4
资源: 953

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip