微信小程序开发实用技巧:返回并刷新页面
author:一佰互联 2019-04-01   click:192

简介:天气这么冷,大家都多穿点衣服哦,不用只讲风度,不要温度哦!前言小程序如何返回到上一个页面,并刷新页面呢?这样的需求很常见,比如: 订单详情页面,订单状态是“已付款”,这时候发起“退款”,跳转到申请退款 ...

天气这么冷,大家都多穿点衣服哦,不用只讲风度,不要温度哦!

前言

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

微信小程序开发实用技巧:返回并刷新页面

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

在普通的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函数的问题。

公告

喜欢小编的点击关注,了解更多知识!源码地址请点击下方“了解更多”本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。