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


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 相关文章推荐
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
使用js检测浏览器的实现代码
May 14 Javascript
js采用map取到id集合组并且实现点击一行选中一行
Dec 16 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
May 20 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
npm 下载指定版本的组件方法
May 17 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php date()日期时间函数详解
2010/05/16 PHP
php实现搜索类封装示例
2016/03/31 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
用JQuery 实现AJAX加载XML并解析的脚本
2009/07/25 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
2014/05/07 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
Javascript函数的参数
2015/07/16 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
python计算时间差的方法
2015/05/20 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
实例讲解Python3中abs()函数
2019/02/19 Python
Django模板Templates使用方法详解
2019/07/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
服装厂厂长职责
2013/12/16 职场文书
煤矿班组长的职责
2013/12/25 职场文书
教师求职信范文分享
2013/12/27 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
不同意离婚代理词
2015/05/23 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
Fluentd搭建日志收集服务
2022/09/23 Servers