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


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 onload、ready概念介绍及使用方法
Apr 27 Javascript
父页面显示遮罩层弹出半透明状态的dialog
Mar 04 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
详解ES6中的三种异步解决方案
Jun 28 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 Javascript
vue 组件简介
Jul 31 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
WAR3重制版DOTA 5V5初体验
2020/04/09 DOTA
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
一步步教你利用Canvas对图片进行处理
2017/09/19 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
Vue入门之数据绑定(小结)
2018/01/08 Javascript
layui实现三级导航菜单
2019/07/26 Javascript
js实现一个简易计算器
2020/03/30 Javascript
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
opencv+python实现均值滤波
2020/02/19 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
pytorch __init__、forward与__call__的用法小结
2021/02/27 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
简易离婚协议书范本2014
2014/10/15 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
2015年六年级班主任工作总结
2015/10/15 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
聊聊golang中多个defer的执行顺序
2021/05/08 Golang
pytorch Dropout过拟合的操作
2021/05/27 Python
详解PHP Swoole与TCP三次握手
2021/05/27 PHP
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python