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


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编程起步(第五课)
Feb 27 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
理解jQuery stop()方法
Nov 21 Javascript
jquery删除指定子元素代码实例
Jan 13 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
老生常谈js数据类型
Aug 03 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 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
浅析Yii2缓存的使用
2016/05/10 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
2018/09/17 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python中的__init__ 、__new__、__call__小结
2014/04/25 Python
Python global全局变量函数详解
2018/09/18 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
一套Java笔试题
2016/08/20 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
餐饮业会计岗位职责
2013/12/19 职场文书
旷课检讨书3000字
2014/02/04 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
差生评语大全
2014/05/04 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
先进班集体申报材料
2014/12/26 职场文书
党员自我评价范文2015
2015/03/03 职场文书
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
python绘制云雨图raincloud plot
2022/08/05 Python