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


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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 Javascript
Openlayers实现测量功能
Sep 25 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php csv操作类代码
2009/12/14 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
Laravel日志用法详解
2016/10/09 PHP
YII框架常用技巧总结
2019/04/27 PHP
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
2019/05/22 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python OS模块实例详解
2019/04/15 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
出生公证书样本
2014/04/04 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
学习十八大的感悟
2015/08/11 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL