微信小程序----返回上一页刷新或当前页刷新

摘要:
1.Reload()方法刷新当前页面;2.replace()方法刷新当前页面;3.页面自动刷新当前页面;实现js刷新当前页面的三种方法使用微信小程序--返回上一页刷新或当前页面刷新1.在实现效果之前,您需要了解微信小应用程序的页面生命周期。如果你不太清楚,你可以看到微信小程序——页面生命周期;2.我们可以知道微信小程序页面由五个循环组成:onLoad、onReady、onShow、onHide和onUnload;3.了解页面的生命周期,如何实现返回刷新和当前页面刷新?

声明

bug: 在onShow中执行this.onLoad(),会导致页面第一次加载的时候数组加载两次!
造成原因:页面加载先执行onLoad,再执行的onShow,就会出现在onLoad加载一次数据,在onShow中执行this.onLoad()在加载一次数据。
解决办法:将不需要刷新的数据放在onLoad中执行,将需要刷新的数据放在onShow中执行!
感谢:感谢editplusx的指正!

HTML实现当前页面刷新

首先我们都知道在HTML页面我们要实现当前页面刷新一般会怎么解决呢?
1,reload()方法刷新当前页面;
2,replace() 方法刷新当前页面;
3,页面自动刷新当前页面;
三种实现js 刷新当前页面的方法用法

微信小程序—-返回上一页刷新或当前页刷新

1,在实现效果之前,需要知道微信小程序的页面生命周期,不是很清楚的可以看微信小程序—-页面生命周期
2,可以知道微信小程序的页面是由onLoad(页面加载)、onReady(页面初次渲染完成)、onShow(页面显示)、onHide(页面隐藏)、onUnload(页面卸载)五个周期构成;
3,知道了页面的生命周期,如何实现返回刷新和当前页刷新呢?又在什么场景需要页面刷新效果呢?

当前页面刷新

场景:

在这个电商充斥着生活各个角落的时代,都知道在购物过程会给用户生成订单,如果用户不满意或者收货等就需要去修改订单状态,在开发过程中,当用户修改订单成功后,后台一般会返回提示是否修改成功,而不会返回这个订单的详细情况。那么我们如何使前端页面更新这个订单的状态呢?一般有两种方法实现:1,人为的修改前端的数据;2,再次请求数据(也就是页面刷新)。
为实现取消订单刷新效果:
这里写图片描述
实现取消订单刷新效果:
这里写图片描述
在这里实现需要实现的就是当前页面刷新,在讲场景的时候都说了,实现的方式是再次请求数据进行更新,如何再次请求数据?就是周期函数的onLoad,将页面重新加载,但是需要注意的是必须对相关data变量进行初始化。

更新订单状态函数的代码:

//更新订单状态函数
updateOrder(orderID, orderState, title){
    //获取用户保存在本地的个人信息
    let account = wx.getStorageSync('accountInfo'); 
    //请求服务器接口更新订单状态
    app.globalMethod.REQUEST({
      url: urlList.updateOrderStateUrl,
      data: {
        accountID: account.accountID,
        passWord: account.passWord,
        orderID: orderID,
        orderState: orderState,
        token: ''
      },
      success: res => {
        // console.log(res)
        //如果更新成功
        if(res.data.state == '1'){
            //提示用户订单状态修改成功
          wx.showToast({title: '您已' + title,success: res => {
            //在提示的成功函数中初始化当前加载订单页为第一页,清空订单列表数据
            this.setData({ currentPage: 1,orderList: []});
            //用onLoad周期方法重新加载,实现当前页面的刷新
            this.onLoad()
          }})
        }
      }
    })
  }

返回上一页刷新

场景:

电商购买物品时填写地址,然后返回购买页面,更新填写的新地址。
为实现返回刷新效果:
这里写图片描述
实现返回刷新效果:
这里写图片描述
1,通过页面的生命周期,可以知道在微信小程序中,实现返回上一页的时候其实是直接将隐藏的页面再显示出来,所以不存在页面的再次加载,但是如果业务需求再次加载,在么实现?
2, 通过上边的逻辑可以看出过程是: A页面 —》 B页面(改变A页面的数据)(在A跳转B的过场实现是A页面隐藏B页面渲染) —》返回A页面(更新A页面数据)(返回过程是隐藏B页面显示A页面
3,通过上边的流程,可以看出是在A页面的显示函数中执行加载函数(onShow(){this.onLoad()})

更新收货地址的代码:

onShow() { //返回显示页面状态函数
    //错误处理
    //this.onLoad()//再次加载,实现返回上一页页面刷新
    //正确方法
    //只执行获取地址的方法,来进行局部刷新
}

总结

微信小程序要实现页面刷新,简单的说就是在不同的地方执行onLoad周期函数。不过需要注意在刷新时是否需要初始化变量,这个必须注意。

下载

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

免责声明:文章转载自《微信小程序----返回上一页刷新或当前页刷新》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇k8s集群上删除pod及service华为交换机堆叠配置下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

90%的前端都会踩的坑

【建议收藏】90%的前端都会踩的坑,你中了吗? 写在前面 移动开发时代,前端同学刚刚送别了让人头秃的IE浏览器,却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛,始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑,都习惯性地记录了下来。昨日一瞥竟积少成多...

微信小程序--后台交互/wx.request({})方法/渲染页面方法 解析

小程序的后台获取数据方式get/post具体函数格式如下:wx.request({}) data: { logs:[] }, onLoad:function(){ this.getdata(); } getdata:function(){//定义函数名称 var that=this; // 这个地方非常重要,重置data{}里数据时候se...

微信小程序高级基础

微信小程序高级基础 微信小程序的注册和服务器配置: 小程序是什么呢?小程序是一种不需要下载安装就可以使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下就可以打开应用,也体现了龙哥"用完即走"的理念,用户不用关心是否安装太多应用的问题,应用将无处不在,随时可用,而且又不用安装卸载。 微信小程序其实是微信提高了自身对于HTML5特性支持的能力,...

在Web应用中接入微信支付的流程之极简清晰版

背景: 在Web应用中接入微信支付,我以为只是调用几个API稍作调试即可。 没想到微信的API和官方文档里隐坑无数,致我抱着怀疑人生的心情悲愤踩遍了丫们布下的所有坑。 简要介绍几个主要大坑: 坑一:关于WeixinJSBridge这个对象 查阅网页端调起支付API的开发文档,此对象即旁若无人的映入眼帘。 然后我们就理所应当的在代码里调用了丫的。 可是,to...

vue中通过WeixinJSBridge关闭微信公众号当前页面,返回微信公众号首页

之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 setTimeout(function() { //这个可以关闭安卓系统的手机 document.addEventListener( "Wei...

四维的王坚和三维的阿里互联网汽车

任何一个和未来有点关系的工作者,都可能是一个哲学家。不管你是一个高深的天体物理研究者,还是一个穿着很low的高级码农。他们对未知的敬畏让现世有意思起来。 1 7月6日,阿里和上汽合作的互联网汽车正式发布。搭载YunOS智能操作系统的全球首款可量产互联网汽车(OS’Car)荣威RX5亮相。售价区间为9.98~18.68万元。 拥挤热烈的现场,阿里巴巴首席...