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


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 相关文章推荐
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
js onclick事件传参讲解
Nov 06 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
Mar 24 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
webpack学习教程之前端性能优化总结
Dec 05 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
Vue常用的全选/反选的示例代码
Feb 19 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
PHP 高手之路(二)
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
js+css实现打字效果
2020/06/24 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
python3实现弹弹球小游戏
2019/11/25 Python
python打印异常信息的两种实现方式
2019/12/24 Python
执行Python程序时模块报错问题
2020/03/26 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
python 实现任务管理清单案例
2020/04/25 Python
详解Django配置JWT认证方式
2020/05/09 Python
西式结婚主持词
2014/03/14 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
2019年思想汇报
2019/06/20 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
python装饰器代码解析
2022/03/23 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang
JavaScript实现简单的音乐播放器
2022/08/14 Javascript