ios微信公众号返回上一级页面的时候页面数据没有刷新

zz/2024/6/24 18:49:14

vue项目,运行在微信公众号,测试ios设备的时候发现从数据总览页点击一个新的页面,执行部分操作后,总览页面的数据应该被修改的,但是点击返回只会,总览页面还是旧数据,手动点击刷新之后数据才被修正。

这是部分浏览器的特性,back-forware-cache,部分浏览器前往另一个页面之前会缓存本页面的锚点和页面数据和js执行状态,从另一个页面返回的时候只是从缓存中加载上一个页面的数据。不会触发页面加载的事件。

网络上有监听pageshow和pagehide的方案。但是测试之后发现,pageshow的确会触发,但是pagehide并没有触发,也就不能实现效果,于是想到了以前监听的pushstate和popstate。知道是返回事件后,判断当前是不是ios设备,是不是需要刷新的页面。

import { MessageBox, Toast } from 'mint-ui';class CommonUtils{install(Vue){Vue.prototype.CommonUtils = thisthis.pageEventOk = falsethis.handleBackForwardCache()}getDeviceType(){var u = navigator.userAgent, app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isAndroid) {return "android";}if (isIOS) {return "ios";}}handleBackForwardCache(){if(this.pageEventOk){return}this.pageEventOk = true// console.log("add event listener, popstate")window.addEventListener('popstate', ()=>{// Toast("popstate:" + window.location.pathname)// Toast("popstate:" + document.referrer)// 检查是不是需要显示最新数据的页面if(window.location.pathname.endsWith("/shop/database")){// 检查是不是ios设备if(this.getDeviceType() == "ios"){// ios页面返回的时候,可能显示的是缓存页面// 刷新window.location = document.referrer}}})}
}export default new CommonUtils

用单例模式防止方法被重复调用,加个变量pageEventOk方式事件被重复监听。

不是所有页面都需要做这种操作,所以最好还是判断试下当前页面。

还有一种做法是从关键页面跳转的时候不用go、pushstate,不用$router.psh,这样浏览器点击返回的时候就不会返回关键页面。自己做一个返回按钮,点击按钮的时候不用 $router.go(-1),直接用$router.push或者$router.replace。这样就可以欺骗浏览器。


http://www.ngui.cc/zz/2390064.html

相关文章

uniapp接入微信分享iOS总是跳转两次

配置了N遍,依旧跳转两次,最终倒在了打包签名的方式上面。 先打越狱包,然后再进行签名,这样的包iOS可以微信分享,但是每次都是两次。直接打包正式包或基座包,iOS微信分享正常 uniapp配置文件 /* ios打包配置…

IOS实现微信授权登录

IOS实现微信授权登录 微信是一个在开发中经常会使用到的平台,比如微信登录、授权、支付、分享。今天我们来看看如何在自己的应用里面集成微信授权。 1、微信授权的定义 微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站,在微信用户授…

xcode 配置wechat_iOS 13 Xcode 11.3 微信SDK版本 1.8.6 关于微信登录和微信支付的回调...

创建项目时使用的Xcode 版本是 11.3 , AppDelegate 已拆分开来 ,存在ScaneDelegate 窗口代理 , 微信SDK也更新到最新版本, 1.8.6, 如果Xcode 的版本低于11, 在AppDelegate 没有被拆分的时候创建的项目 . 使用微信登录或支付在 iOS 系统版本 13 以上都是OK 的 , 需要讲的是高版本…

iOS微信授权登录中Universal Link(通用链接)的配置 ,解决ios13,ios14微信支付不走回调问题

这里写自定义目录标题 简介Unuversal Links介绍配置Unuversal Links 1.苹果开发者账号打开配置2.XCode工程配置3.配置JSON文件4.后台服务器配置5.微信开放平台配置6.初始化代码简介 随着iOS和微信SDK版本的更新,有变化。 新版本,需要配置Unuversal Lin…

微信公众号,IOS获取当前页面URL

公众号支付页面时,点击支付,微信报‘当前页面URL未注册’。 当前页面,与支付商户平台配置的 支付授权目录 不符。自己或者后台人员去商户平台中配置一下即可。一定要到‘/’一级标题点击公众号底部菜单栏进入,A页面(…

iOS微信分享不触发回调函数onResp()解决方法

此问题最近困扰了我三天,检查项目代码与网上方法对照,并没有发现不对的地方,跟断点调试,只发现微信分享后微信端并没有给应用反馈,onResp()没有触发。 问题描述: 线上iOS用户在第三方应用点击微信分享&…

ios 微信分享重新编码链接_IOS微信分享标题变为默认图片不显示描述变为链接...

initShare(pageData) {let that this// 获取签名that.$http.get(that.signature, {params: {url: that.signatureUrl},headers: {xfrom: 7},}).then(res > {if (res.data.success) {that.shareData res.data.dataconsole.log(获取签名结果);wx.config({debug: false, // 开…

iOS微信分享及Universal Links

iOS 分享小程序及配置Universal Links1.集成openSDK2.配置Universal Links1.服务器那边注册域名2.打开Capabilities → Associated Domains开关,将Universal Links域名加到配置上:3. 验证你的Universal Links3.在微信开放平台注册APP4.分享小程序1.向微信…

IOS微信浏览器返回事件监听问题

业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页 采取方法:采用onpopstate事件监听url改变,从而跳转到主页 遇到的问题:安卓上测试没问题;苹果手机微信里进入A页…

ios微信支付失败 php,iOS 微信支付疑难杂症。

哈喽,大家好,感谢您来阅读我的文章,作为iOS开发者,集成各类支付是家常便饭之事,今天我来给大家推荐几个不常见的微信支付问题。最近,在项目的反馈版块中,收到了这么一位APP用户的反馈&#xff0…