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


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 DOM编程实例(智播客学习)
Nov 23 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
微信小程序自定义弹出层效果
May 26 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函数
2011/05/31 PHP
php利用反射实现插件机制的方法
2015/03/14 PHP
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
jQuery 白痴级入门教程
2009/11/11 Javascript
一段批量给页面上的控件赋值js
2010/06/19 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
2018/04/13 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
js实现缓动动画
2020/11/25 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[19:15]DK战队纪录片
2014/09/02 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
python实现百度语音识别api
2018/04/10 Python
PyTorch中permute的用法详解
2019/12/30 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
少先队大队委竞选口号
2015/12/25 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
使用JS实现简易计算器
2021/06/14 Javascript
Centos系统通过Docker安装并搭建MongoDB数据库
2022/04/12 MongoDB