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


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 26 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JS生成随机字符串的多种方法
Jun 10 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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变量的作用范围实例讲解
2020/12/22 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
python映射列表实例分析
2015/01/26 Python
selenium+python自动化测试之页面元素定位
2019/01/23 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
销售文员岗位职责
2013/11/29 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
工资收入证明
2014/10/07 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS
vue实现拖拽交换位置
2022/04/07 Vue.js
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers