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


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 脚本将当地时间转换成其它时区
Mar 19 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
Apr 30 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
详解php的魔术方法__get()和__set()使用介绍
2012/09/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
取得父标签
2006/11/14 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JS常用字符串方法(推荐)
2021/01/15 Javascript
Angular的$http与$location
2016/12/26 Javascript
JS+HTML5 canvas绘制验证码示例
2018/12/05 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Python实现读取Properties配置文件的方法
2018/03/29 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
介绍一些UNIX常用简单命令
2014/11/11 面试题
旅游管理专业学生求职信
2013/09/28 职场文书
超市开学活动方案
2014/03/01 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS