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


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 相关文章推荐
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
JavaScript 继承详解 第一篇
Aug 30 Javascript
JQuery 选择器 xpath 语法应用
May 13 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
js库Modernizr的介绍和使用
May 07 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
php代码架构的八点注意事项
2016/01/25 PHP
php实现生成验证码实例分享
2016/04/10 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
原生js实现水平方向无缝滚动
2017/01/10 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python单线程实现多个定时器示例
2014/03/30 Python
在Django的模板中使用认证数据的方法
2015/07/23 Python
python实现二叉树的遍历
2017/12/11 Python
django解决跨域请求的问题详解
2019/01/20 Python
Python的高阶函数用法实例分析
2019/04/11 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
波兰最大的儿童服装连锁店之一:5.10.15.
2018/02/11 全球购物
Linux中如何用命令创建目录
2016/12/02 面试题
千元咖啡店的创业计划书范文
2013/12/29 职场文书
安全生产演讲稿
2014/05/09 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
贪污检举信范文
2015/03/02 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis