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


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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
通过实例解析JavaScript for in及for of区别
Jun 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
php错误、异常处理机制(补充)
2012/05/07 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
浅析PHP 按位与或 (^ 、&)
2013/06/21 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
php自动加载代码实例详解
2021/02/26 PHP
JQuery 获取和设置Select选项的代码
2010/02/07 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
5款JavaScript代码压缩工具推荐
2014/07/07 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
JavaScript 变量、作用域及内存
2015/04/08 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
ajax跨域访问遇到的问题及解决方案
2019/05/23 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
python绘制地震散点图
2019/06/18 Python
Python创建数字列表的示例
2019/11/28 Python
python实现飞船大战
2020/04/24 Python
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
旅游市场营销方案
2014/03/09 职场文书
走进科学观后感
2015/06/18 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript