摘要:微信公眾號點擊后退按鈕,優選讀取緩存,所以里的生命周期不會在進行調用。原因分析一瀏覽器包括微信的開發者工具都是的返回可以刷新頁面但是唯有不行二瀏覽器原因返回上一頁后,頁面內容并不會刷新。
問題描述: A頁面跳轉到B頁面,在B頁面進行了相關的操作之后,返回到A頁面,A頁面的數據沒有刷新.具體實例:
由于項目中使用了vue,使用了gulp和普通的頁面跳轉。并沒有引入vue-router。所以不能使用 watch監控$router。
微信公眾號ios點擊后退按鈕,優選讀取緩存,所以vue里的生命周期不會在進行調用。
所以項目中執行隱藏分享qq,空間。等功能不被再次執行。
原因分析:
一.android 瀏覽器 包括微信的開發者工具 都是ok的返回可以刷新頁面但是唯有iOS不行.
二.iOS 瀏覽器原因:history.go(-1)返回上一頁后,頁面內容并不會刷新。在B頁面修改的內容,返回到A時并沒有更新新的內容,必須手動刷新。
在Debug模式下,發現在iOS瀏覽器中,返回上一頁后,頁面的 JS 代碼并未執行。我們猜測可能是緩存引起的,于是使用 meta 禁止了緩存,但仍然沒有效果。于是進一步猜測可能是瀏覽器內部機制導致——iOS為了提升瀏覽網頁的效率,可能給已瀏覽過的網頁添加一個類似快照的東西,當點擊返回按鈕后,直接調用快照展示給用戶,省去了執行JS這一步驟(純靜態文件依然被緩存)。這本來是iOS的優勢,在這卻變成了bug存在的風險.
三.頁面數據是通過 ajax 請求后臺數據,通過鏈接跳到下一頁,然后返回,
最常用的返回上一頁的方法:history.go(-1)和 history.back(),
在 android 中正常顯示上一頁,但是在 iOS 中不能正常顯示,通過打印
返回的數據,發現數據是上一個頁面最后請求的數據。
解決方法:
在回退后需要刷新的頁面加以下js:
$(function () { var isPageHide = false; window.addEventListener("pageshow", function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener("pagehide", function () { isPageHide = true; }); })
將上邊的代碼寫在A頁面的js文件中
即可實現想要的效果.如下不需要手動刷新就可以實現
作者:上善_若水
鏈接: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"))) var openIdItem = window.localStorage.getItem("openIdItem") window.localStorage.setItem("foodMatchtype",JSON.stringify("5")) new Vue({ el: "#containerBox", data: { imageUrl:"", planInfos:[], mealInfos:[], advantageInfos:[], proEndorsement:[], userInfoNeed:{}, appScope:"",//人群范圍 planName:"",//方案名稱 isContentShow:false,//content內容默認不顯示 chanType: "fwh", url: location.href, openId:"" }, created(){ }, mounted:function(){ this.wxConfig() this.$nextTick(function(){ //顯示loading showLoading(); this.getInitData(); }) }, methods:{ start:function(){ window.location.href = "./views/condition.html" }, getInitData(){ /* 0 高血脂 1 糖尿病 2 肥胖 3 痛風 4 高血壓 5 成人 */ var param={"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)) window.localStorage.setItem("openIdItem",openIdItem) window.localStorage.setItem("foodMatchtype",JSON.stringify("5")) //隱藏loading hideLoading(); this.isContentShow = true; }else{ this.isContentShow = false; showTip(data.retInfo); } }) }, //微信配置 wxConfig (){ /** * 獲取微信公眾號配置 * @param {String} url * @param {String} chanType 渠道類型 * */ // var foodMatchtype = 5; // var openIdItem = getUrlParam("openIdItem"); $.ajax({ url: CONFIG.wx, data: JSON.stringify({"chanType":this.chanType,"url":decodeURIComponent(this.url)}), type: "post", contentType: "application/json", success: (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:QZone","menuItem:editTag","menuItem:delete", "menuItem:copyUrl","menuItem:originPage", "menuItem:readMode","menuItem:openWithQQBrowser","menuItem:openWithSafari","menuItem:share:email","menuItem:share:brand"] // 要隱藏的菜單項,只能隱藏“傳播類”和“保護類”按鈕,所有menu項見附錄3 }); wx.showMenuItems({ menuList: ["menuItem:share:appMessage","menuItem:share:timeline"] }) wx.onMenuShareTimeline({ title: "減約健康飲食推薦", // 分享標題 desc: "一周飲食搭配,上萬種單品選擇,都在這里", // 分享描述 link: 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=0 wx.onMenuShareAppMessage({ title: "減約健康飲食推薦", // 分享標題 desc: "一周飲食搭配,上萬種單品選擇,都在這里", // 分享描述 link: CONFIG.wxUrl, // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致 imgUrl: CONFIG.imgUrl , success: function () { // 設置成功 }, fail: function (err) { } }); }); function GetMatchingStats(id,cb){ var param={"type":"5","openId":getUrlParam("openId")}; ajaxRequest("/v2/food/matching/user/status/find.do", "POST", param, function (data) { if(data.retCode=="SUCCESS"){ if(data.foodMatch){ var foodMatch = data.foodMatch; var foodMatchStatus = 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); } }, fail: function (err) { } }); }, }, });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/103233.html
摘要:但在微信頁面中也會保存上一頁面最后執行的狀態,不會重新執行。原因微信中調整到下一頁面后并未將上一頁面修改的保持在歷史記錄中,以代碼為例,返回上一頁并未返回到,而是返回到中。 前言 這篇文章主要講解決思路,不對各種概念進行過多講解。 問題描述 開發微信H5頁面的時候,在Ios微信內置瀏覽器中點擊返回按鈕返回上一頁時,上一頁面不會被刷新。在瀏覽器緩存機制中,在返回上一頁的操作中, html...
摘要:在跳轉鏈接前記錄當前滾動條距離存入跳轉后返回讀取重新賦值在微信內執行因為兼容性問題用了好用的庫 在跳轉鏈接前 記錄當前滾動條距離st 存入sessionStorage跳轉后返回 讀取st 重新賦值 // 在微信內執行 platform.isWeixin && this.getSt(); }, methods: { getSt() { if (wi...
摘要:瀏覽器返回等于重新進入上一個頁面,會觸發刷新動作,而微信不會。也就是困擾我多時的微信返回不刷新。也就是說當時微信返回還是會觸發渲染事件的具體是什么事件也不清楚,因為當時沒有深究,但是確實是觸發了。 PC瀏覽器返回等于重新進入上一個頁面,會觸發刷新動作,而微信不會。也就是困擾我多時的微信返回不刷新。 大概再2017年初和2016末(大概也是從那個時候我開始做微信公眾號),還可以通過在se...
閱讀 2953·2021-11-23 09:51
閱讀 1006·2021-09-26 09:55
閱讀 3935·2021-09-22 14:58
閱讀 1468·2021-09-08 09:35
閱讀 1078·2021-08-26 14:16
閱讀 881·2019-08-23 18:17
閱讀 2054·2019-08-23 16:45
閱讀 700·2019-08-23 15:55