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

2024-09-28 11:45:28

之前没有怎么接触过微信开发，只是对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 微信底部返回横条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

iOS新版微信底部工具栏遮挡问题完美解决

一.问题描述: 苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用. 二.原因分析: 造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡. 三.解决方案: 了解了该问题出现的原因,我们也就有了解决办法.首先想到的方案就是控制浏览器的历史记录.由于考虑到安全性问题,浏览器的历史
iOS新版微信底部返回横条问题的解决

之前没有怎么接触过微信开发,只是对H5比较熟.最近维护一个微信公众号的项目,遇到了iOS端返回键的坑. 描述一下: 从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面.这不行啊,得解决. 页面的高度是调用 $(window).height();来获取的,但道理来讲应该没什么问题. 第一个反应是,要不判断一下设备,如果是iOS则给添加一个高度? 这个想法还没实行呢,就发现了一个现象.第一次进来的时候是挡着的,但是刷新一下就不挡了.然后就想着要不判断第一次进来给个刷新? 然后落实了,改代码.
ios微信浏览器返回不刷新问题完美解决方法

开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid
基于IOS端微信分享失效的踩坑及解决方法

最近的一个公众号是基于vue的spa应用,在接入微信分享和微信语音的时候出现了:在Android上一切正常,但是在ios端调用wx.config的时候总是失败,去翻了官方文档也并没有找到解决方案,最后在测试中发现是因为初始化的时候传入的URL的问题.具体过程如下: 微信config接口配置,官方文档如下: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支
iOS中WKWebView仿微信加载进度条

本文实例为大家分享了WKWebView仿微信加载进度条的具体代码,供大家参考,具体内容如下 WKWebView添加了estimatedProgress属性(double类型),我们可以利用该属性来设置UIProgressView github代码仓库上存放的Demo 为页面添加UIProgressView属性 @property (nonatomic, strong) WKWebView *mywebView; @property (nonatomic, strong) UIProgressVi
IOS实现微信授权登录功能

微信是一个在开发中经常会使用到的平台,比如微信登录.授权.支付.分享.今天我们来看看如何在自己的应用里面集成微信授权. 1.微信授权的定义微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授权登录已接入微信OAuth2.0的第三方应用后,第三方可以获取到用户的接口调用凭证(access_token),通过access_token可以进行微信开放平台授权关系接口调用,从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能等. 2.微信授权的步骤第三方发
IOS 集成微信支付功能的实现方法

IOS 集成微信支付功能的实现方法第一步:集成微信的SDK https://pay.weixin.qq.com/wiki/doc/api/index.html 点击进入下载对应SDK或示例,最后可以看看示例程序第二步:在Xcode中填写微信开放平台申请的Appid Xcode>info>URL Types 中新建加入Appid 第三步:在Appdelegate.m 中注册微信支付和回调 #import "WXApi.h" 添加代理 WXApiDelegate -
微信JSSDK多图片上传并且解决IOS系统上传一直加载的问题

微信多图片上传必须挨个上传,也就是不能并行,得串行: 那么我们可以定义一个如下所示的上传函数: var serverIds = []; function uploadImages(localImagesIds) { if (localImagesIds.length === 0) { $.showPreloader('正在提交数据...'); $('form').submit(); } wx.uploadImage({ localId: localImagesIds[0], // 需要上传的图片
iOS集成微信支付开发

本文实例为大家分享了iOS集成微信支付开发代码,供大家参考,具体内容如下首先需要理清楚流程: 1.用户使用APP客户端,选择商品下单. 2.商户客户端(就是你做的APP)将用户的商品数据传给商户服务器,请求生成支付订单. 3.商户后台调用统一下单API向微信的服务器发送请求,微信服务器生成预付单,并生成一个prepay_id返回给商户后台. 4.商户后台将这个prepay_id返回给商户客户端. 5.用户点击确认支付,这时候商户客户端调用SDK打开微信客户端,进行微信支付. 6.微信客户端向微
利用iOS动画来模拟音量振动条的实现

iOS动画来模拟音量振动条,即利用CAReplicatorLayer实现,以下将详细的介绍CAReplicatorLayer和实现方法. 音量振动条效果图: 如何实现? 创建3个layer,按顺序播放y轴缩放动画利用CAReplicatorLayer实现 1.什么是CAReplicatorLayer? 一种可以复制自己子层的layer,并且复制出来的layer和原生子层有同样的属性,位置,形变,动画. 2.CAReplicatorLayer属性 instanceCount: 子层总数(包括原

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

相关推荐

随机推荐