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

摘要:
问题微信小程序onLoad方法在整个生命周期中只加载一次,也就是你进入下个页面,再返回时,是不会再次触发的,所以你返回是url传参是行不通了。需求现在有这么一个需求:一个商品支付页面,点击优惠卷进入优惠券列表页,选中优惠券后带着数据再返回到支付页面。方法一、使用到的方法是小程序的页面栈,感兴趣可以打印一下pages的内容,就是你页面跳转的轨迹数组,最后一项就是当前页面,倒数第二个就是上一页。Ok,这就完事了。

问题

微信小程序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,这就完事了。

免责声明:文章转载自《微信小程序返回上一页传参并刷新》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇mqttnet3.0用法基于Docker的主从复制搭建下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vant-weapp 组件样式自定义的方法

最近处理了一个外包小程序前端开发的任务,刚开始以为是和以往做的小程序一样对样式要求不高,就在小程序里面使用了大量的ui框架组件,后来发现客户要求小程序对设计稿的还原程度非常高,没办法,只能一点点改,刚开始很吃力,因为第三方的组件封装程度高,一个组件经过了层层嵌套,想要改变一个组件的高度,很可能就是写了一堆样式类将组件原有的样式覆盖,改着改着,想起了在学校里...

小程序中的数值传参方法

小程序中有五种数值传参方法,其中有三种是比较常用的。 记录一下每一种方法: 1. 通过data-*属性传递值 (常用)  console.log(e.currentTarget.dataset); 案例如图:     2. 通过id传递  console.log(e.currentTarget.id); 案例如图:   3. 通过 globalData传...

wxparse使用(富文本插件)

优点:目前已知唯一可以转化HTML到小程序识别的插件 缺点:转换一个HTML标签可能需要大量的微信小程序标签还有样式 配置:第一步,下载 https://github.com/icindy/wxParse 第二步,放入项目中,我选择pages目录下 第三步,配置 wxml加入: <import src="http://t.zoukankan.com/...

uni-app中nvue (weex) 注意事项

前言 uni-app 是 DCloud 出品的新一代跨端框架,可以说是目前跨端数最多的框架之一了,目前支持发布到:App(Android/iOS)、H5、小程序(微信小程序/支付宝小程序/百度小程序/字节跳动小程序),目前市面上类似的框架还有:Taro(京东出品)、Megalo(网易出品)。 uni-app 的 nvue 说白了就是 weex 的那一套东西...

微笑小程序的几种跳转方式

微信小程序页面跳转 的几种方式 最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一、wx.navigateTo(OBJECT)    这是最普遍的一种跳转方式,其官方解释为:“保留当前页面,跳转到应用内的某个页面” 类似于html中的 window.location.href="http://t.zoukankan.com/ "eg:...

微信小程序-wxml模板页面逻辑运算

通常在utils中创建一个.wxs后缀的文件(例如:fn.wxs) function addition(a,b){ return Number(a)+Number(b); } module.exports = { addition:addition, } 需要逻辑运算的wxml页面 <wxs src="http://t.zoukankan.co...