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


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 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript排序算法之希尔排序的2个实例
2014/04/04 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
AngularJS入门教程中SQL实例详解
2016/07/27 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
对python中return与yield的区别详解
2020/03/12 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
C语言笔试题回忆
2015/04/02 面试题
投资意向书范本
2014/04/01 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python