处理微信返回上一页以后,页面不革新

题目形貌: 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) {
                }
            });        
        },
    },    
});


    原文作者:吕鹏
    原文地址: https://segmentfault.com/a/1190000018768189
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞