解決微信返回上一頁之後，頁面不重新整理
摘要：
問題描述: A頁面跳轉到B頁面,在B頁面進行了相關的操作之後,返回到A頁面,A頁面的資料沒有重新整理.具體例項:
由於專案中使用了vue，使用了gulp和普通的頁面跳轉。並沒有引入vue-router。所以不能使用 watch監控$router。
微信公眾號ios點選後退...
問題描述: 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) {
}
});
},
},
});