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


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+ajax实现顶一下,踩一下效果
Jul 17 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
design vue 表格开启列排序的操作
Oct 28 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
桌面中心(三)修改数据库
2006/10/09 PHP
php日历[测试通过]
2008/03/27 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
php 反斜杠处理函数addslashes()和stripslashes()实例详解
2016/12/25 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
javascript 多级checkbox选择效果
2009/08/20 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
js实现带搜索功能的下拉框
2020/01/11 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
python中反射用法实例
2015/03/27 Python
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python中进程和线程的区别详解
2017/10/29 Python
图解Python变量与赋值
2018/04/03 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
python argparse传入布尔参数false不生效的解决
2020/04/20 Python
numba提升python运行速度的实例方法
2021/01/25 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
C语言编程练习
2012/04/02 面试题
培训协议书范本
2014/04/22 职场文书
2014年学生会工作总结
2014/11/07 职场文书
初中差生评语
2014/12/29 职场文书
会议通知
2015/04/15 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers