文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-05-23 20:03

关注

之前没有怎么接触过微信开发,只是对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新版微信底部返回横条问题的解决的文章就介绍到这了,更多相关iOS 微信底部返回横条 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯