小程序返回上一页更新数据怎么设置，小程序刷新当前页

前言

小程序如何返回到上一个页面，并刷新页面呢？这样的需求很常见，比如： 订单详情页面，订单状态是“已付款”，这时候发起“退款”，跳转到申请退款页面，申请成功后，返回到订单详情，这时候的订单状态 是不是要变为“退款中”的状态？

微信小程序如何返回到上一个页面，并刷新页面呢？

在普通的html页面，很简单，不用操作都可以实现。因为浏览器返回会自动刷新。 但是小程序返回是不会自动刷新上一个页面的。所以需要一点点技巧。

下面还是模拟上面的场景。

申请退款页

发起申请退款后，我们用wx.navigateBack()返回到订单详情页面，小程序API有详情说明。

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。 参数说明：

微信小程序如何返回到上一个页面，并刷新页面呢？

订单详情页

重点来了，抛开上面的需求，我们就查询订单详情接口onLoad(options){ let orderId = options.orderId; // 根据orderId查询订单详情数据 wx.request({ url: ‘xxxxxx’, // 接口地址 data: { orderId: orderId }, header: { ‘content-type’: ‘application/json’ // 默认值 }, success(res) { console.log(res.data) } }) }

如果就这样，那页面返回并不执行onLoad函数，所以就不会获取新的数据，来更新状态。

我们找到了onShow函数(生命周期回调 — 用于监听页面显示)Page(Object) 构造器详细说明

返回时，onShow是会执行的，所以改造上面方法data: { orderId: ” }, onShow() { // 获取data里面存的orderId let orderId = this.data.orderId; wx.request({ url: ‘xxxxxx’, // 接口地址 data: { orderId: orderId }, header: { ‘content-type’: ‘application/json’ // 默认值 }, success(res) { console.log(res.data) } }) }, onLoad(options){ let orderId = options.orderId; // 向data里面set orderId this.setData({ orderId: orderId }) }

onLoad把参数存起来，这个参数options是订单列表，或者其他页面带入的。从申请退款页返回，是不用参数的，返回onShow 执行需要的orderId是原来已经缓存的。 然后onShow直接用这个参数，onShow是获取不到url参数的。

小提示

小程序开发中，如果用到倒计时，当退出小程序，或者，按手机home键，倒计时不会继续执行。比如，到时间是30s，你按了home键，过了10s，再进入小程序，倒计时不是是20s，依旧会从30s倒计时。 所以，也需要用到onShow，来刷新这个倒计时。 这也是小程序退出，重新进入不会执行onLoad函数的问题。

微信小程序如何实现刷新当前页面

微信小程序要实现页面刷新，简单的说就是在不同的地方重新执行 onLoad 周期函数。
需要注意在刷新时是否要初始化变量。因为小程序都是异步操作，所以很多时候，可能会造成服务器相应慢的问题，导致页面显示的时候会有延迟、造成闪烁的情况。

1.用 onLoad 周期方法重新加载，实现当前页面的刷新。

    this.onLoad()

2.用 pages 获取到当前页码数，然后执行当前页的 onLoad 函数

        const pages = getCurrentPages()     //获取页面列表
        const perpage = pages[pages.length - 1]    //当前页   
        perpage.onLoad()   

3.点击左上角的返回按钮时，返回事件不会触发 onload() ,但是会触发 onshow()，所以可以在 onshow() 中写入刷新或者是调取页面数据的代码。返回的时候会进行刷新。

    data:{
　　    show:false
    }
    //每次进入页面都会将show变为true
    onshow:{
        this.setData({
            show:true
        })
    }