当前位置: 首页 > Web前端 > HTML5

微信返回上一个页面后,页面不刷新

时间:2023-04-05 14:07:10 HTML5

问题描述:A页面跳转到B页面,在B页面执行相关操作后,返回A页面,A页面数据不刷新。具体例子:由于项目中使用了vue,所以使用了gulp和普通的页面跳转。Vue-router就不介绍了。所以你不能用watch来监控$router。微信公众号ios点击返回按钮时,优先读取缓存,所以不会调用vue中的生命周期。所以隐藏分享qq,空间在项目中实现。等功能不再执行。原因分析:1、安卓浏览器包括微信的开发者工具都可以,可以刷新页面,只有iOS不行。2、iOS浏览器原因:history.go(-1)返回上一页后,页面内容没有刷新。B页面修改的内容返回A页面时不会更新新内容,必须手动刷新。在Debug模式下,发现在iOS浏览器中,返回上一页后,页面的JS代码没有执行。我们猜测可能是缓存引起的,所以我们使用meta来禁用缓存,但还是没有效果。所以进一步推测可能是浏览器内部机制导致的——iOS为了提高浏览网页的效率,可能会在浏览过的网页上添加快照。当点击返回按钮时,直接将快照展示给用户,省去了执行JS这一步(纯静态文件还是缓存)。这本来是iOS的优势,在这里却变成了bug的风险。3.页面数据是通过ajax请求后台数据,通过链接跳转到下一页,然后返回。最常见的返回上一页的方法:history.go(-1)和history.back(),上一页在android中正常显示,在iOS中无法正常显示。通过打印返回的数据,发现该数据是上一页最后请求的数据。解决方法:在回滚后需要刷新的页面添加如下js:reload();}});window.addEventListener('pagehide',function(){isPageHide=true;});})在页面A的js文件中写上以上代码即可达到想要的效果。无需手动操作如下刷新即可实现作者:Shangshan_Ruoshui链接:https://www.jianshu.com/p/b5c...来源:简书简书版权归作者所有。任何形式的转载请联系作者授权并注明出处。备注:我的项目代码window.localStorage.removeItem("openIdItem");window.localStorage.removeItem("foodMatchtype");window.localStorage.removeItem("peicaned");//window.localStorage.removeItem("userInfoNeed");window.localStorage.setItem("openIdItem",JSON.stringify(getUrlParam("openId")))varopenIdItem=window.localStorage.getItem("openIdItem")window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))newVue({el:"#containerBox",data:{imageUrl:"",planInfos:[],mealInfos:[],advantageInfos:[],proEndorsement:[],userInfoNeed:{},appScope:"",//populationscopeplanName:"",//plannameisContentShow:false,//content内容默认不显示chanType:"fwh",url:location.href,openId:""},created(){},mounted:function(){this.wxConfig()this.$nextTick(function(){//显示加载showLoading();this.getInitData();})},methods:{start:function(){window.location.href="./views/condition.html"},getInitData(){/*0高血脂1糖尿病2肥胖3痛风4高血压5成人*/varparam={"type":22}ajaxRequest('/v2/foods/matching/index.do',"POST",param,(data)=>{console.log(data,"initdata");if(data.retCode=="SUCCESS"){//数据赋值this.imageUrl=data.imageUrl;this.planInfos=data.planInfos;this.mealInfos=data.mealInfos;this.advantageInfos=data.advantageInfos;this.proEndorsement=data.proEndorsement;this.planName=data.planName;document.title=data.planName;this.appScope=data.appScope[0];//console.log(this.appScope,"data",data)//基本信息配置this.userInfoNeed=data.userInfoNeed;window.localStorage.setItem("userInfoNeed",JSON.stringify(this.userInfoNeed))窗口。localStorage.setItem("openIdItem",openIdItem)window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))//隐藏加载hideLoading();this.isContentShow=true;}else{this.isContentShow=false;显示提示(data.retInfo);}})},//微信配置wxConfig(){/***获取微信公众号配置*@param{String}url*@param{String}chanType频道类型**//varfoodMatchtype=5;//varopenIdItem=getUrlParam("openIdItem");$.ajax({url:CONFIG.wx,data:JSON.stringify({"chanType":this.chanType,"url":decodeURIComponent(this.url)}),type:"post",contentType:"application/json",成功:(data)=>{if(data.retCode=="SUCCESS"){//window.localStorage.setItem("openIdItem",data.wxConfig.appId)//this.openId=data.wxConfig.appId;wx.config({debug:false,appId:data.wxConfig.appId,timestamp:data.wxConfig.timestamp,nonceStr:data.wxConfig.nonceStr,signature:data.wxConfig.signature,jsApiList:["checkJsApi","showMenuItems","hideAllNonBaseMenuItem","showMenuItems","hideMenuItems","chooseWXPay","onMenuShareTimeline","onMenuShareAppMessage","chooseImage","getNetworkType"]});//处理验证失败信息wx.error((res)=>{console.log('验证失败返回的信息:',res);});wx.ready(function(){wx.hideMenuItems({menuList:["menuItem:share:qq","menuItem:share:weiboApp","menuItem:share:facebook","menuItem:share:QQ空间","menuItem:editTag","menuItem:delete","menuItem:copyUrl","menuItem:originPage","menuItem:readMode","menuItem:openWithQQBrowser","menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand"]//需要隐藏的菜单项只能隐藏“Propagation”和“Protection”按钮,所有菜单项见附录3});wx.showMenuItems({menuList:["menuItem:分享:appMessage","menuItem:share:timeline"]})wx.onMenuShareTimeline({title:'推荐健康饮食',//分享标题desc:'一周的饮食,上万款单品选择,都在这里',//分享描述链接:CONFIG.wxUrl,//分享链接,链接的域名或路径必须与当前页面对应的公众号JS安全域名一致imgUrl:CONFIG.imgUrl,success:function(){//设置成功},fail:function(err){}})//测试:http://h5static.cs.jianzhishidai.cn/jkyy-foodmatchs/foodmatch/index.html?openIdItem=50310&foodMatchtype=2//生产:https://h5static.jianzhishidai.cn/foodmatch/index.html?openIdItem=50223332310&foodMatchtype=0wx.onMenuShareAppMessage({title:'减肥健康饮食建议',//sharetitledesc:'一周的饮食,上万款单品选择,都在这里',//分享描述链接:CONFIG.wxUrl,//分享链接,链接的域名或路径必须安全带公众号当前页面对应的JS域名相同imgUrl:CONFIG.imgUrl,success:function(){//设置成功},fail:function(err){}});});functionGetMatchingStats(id,cb){varparam={"type":"5","openId":getUrlParam("openId")};ajaxRequest('/v2/food/matching/user/status/find.do',"POST",param,function(data){if(data.retCode=="SUCCESS"){if(data.foodMatch){varfoodMatch=data.foodMatch;varfoodMatchStatus=foodMatch.foodMatchStatus;//配餐状态cb(foodMatchStatus)}}else{showTip(data.retInfo);}})}if(!window.localStorage.getItem("peicaned")&&!getUrlParam("twojoin")){GetMatchingStats("2",function(foodMatchStatus){if(foodMatchStatus==1){localStorage.setItem("peicaned",true);console.log(!window.localStorage.getItem("peicaned"),!getUrlParam("twojoin"))window.localStorage.setItem("openIdItem",openIdItem);window.localStorage.setItem("foodMatchtype",JSON.stringify("5"))//window.location.href="views/weekdiet.html";window.location.replace("views/weekdiet.html")}else{$("body").css("display","block");}})}else{$("body").css("display","block");}}else{showTip(data.tooltip);}},失败:function(err){}});},},});