微信小程序返回上一页传参并刷新过程解析


Posted in Javascript onDecember 13, 2019

这篇文章主要介绍了微信小程序返回上一页传参并刷新过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

问题

微信小程序onLoad(options)方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了。

需求

现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面。

方法

一、使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页。很好理解,因为在当前页停止了,肯定是最后一个

//获取页面栈
let pages = getCurrentPages();
//获取所需页面
let currPage = pages[pages.length - 1];//当前页面
let prevPage = pages[pages.length -2];//上一页

二、在支付页把需要再次刷新的数据都放到onShow()方法中,不需要刷新的放到onLoad()方法中

思路

1、我们的目标是把优惠券的数据渲染到支付页上,所以先在优惠券页面点击优惠券的时候通过页面栈获取到上一页(也就是支付页),将本条数据动态添加到支付页的data中

//获取页面栈
let pages = getCurrentPages();
//获取所需页面
let prevPage = pages[pages.length -2];//上一页
prevPage.setData({
  yourData:yourData,//你需要传过去的数据
});

2、将需要刷新的数据放到onShow()方法中

//这里展示在onShow方法中获取当前页onLoad方法中的options
onShow:function(){
  let pages = getCurrentPages();
  let currPage = pages[pages.length - 1];
  //当前页的options,啥意思呢,就是你可能某个函数需要刷新,但是他的参数正好是传过来的参数
  console.log(currPage.options); 
}

你在优惠券页点击之后,因为你的数据已经存到支付页了,所以返回支付页后,你可以直接在data中获取到你需要的数据,进行你需要的操作。

Ok,这就完事了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
Vue分页效果与购物车功能
Dec 13 #Javascript
如何在微信小程序中存setStorage
Dec 13 #Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 #Javascript
微信小程序之左右布局的实现代码
Dec 13 #Javascript
vue实现输入一位数字转汉字功能
Dec 13 #Javascript
小程序登录之支付宝授权的实现示例
Dec 13 #Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 #Javascript
You might like
将PHP从5.3.28升级到5.3.29时Nginx出现502错误
2015/05/09 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
微信小程序 使用canvas制作K线实例详解
2017/01/12 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
[58:37]Serenity vs Fnatic 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
详解python列表生成式和列表生成式器区别
2019/03/27 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python绘制动态曲线教程
2020/02/24 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Python3 搭建Qt5 环境的方法示例
2020/07/16 Python
博士研究生自我鉴定范文
2013/12/04 职场文书
pandas:get_dummies()与pd.factorize()的用法及区别说明
2021/05/21 Python
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Go语言grpc和protobuf
2022/04/13 Golang