解决微信返回上一页之后,页面不刷新

更新日期: 2019-04-07阅读: 6.6k标签: 微信

问题描述: 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文件中
即可实现想要的效果.如下不需要手动刷新就可以实现


备注:我的项目代码

apiList: ["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) { } }); }, }, }); " title="" data-original-title="复制">

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://fly63.com/article/detial/2728

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

微信已停止访问该网页解决方法分享

由于微信限制比较严格,域名一不小心就被判定是诱导分享的。所以,公司内部决定调研一套稳定、快速、正确率高的微信域名拦截检测查询接口。开发组尝试谷歌搜索了一段时间,发现很少把源码及原理分享出来的。后来我们摸索了几天

微信开发-自定义分享卡片-node.js实现

本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。

记录一次开发微信网页分享

最近在做一个项目需求,分享领好书活动,获取用户的个人信息以及unionID,并诱导用户分享给好友或朋友圈,达到裂变拉新的目的。在做的过程中遇到了一些坑的地方,所以回过来总结一下

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!