小程序 使用navigateBack返回携带参数
Posted 大西瓜3721
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序 使用navigateBack返回携带参数相关的知识,希望对你有一定的参考价值。
在写业务的时候,我们有时候会遇到这样的场景:从a页面跳转到b页面,然后需要再从b页面返回到a页面;并携带一些数据回来。
这个时候通常我们会使用到
wx.navigateBack
但是由于navigateBack无法直接携带参数;传参就需要另想办法了
当然实现的方法有很多;这里要说的是通过setData的方式实现
b页面代码
// 选定当前店铺 changeShopfn: function (e) console.log(e) let shopinfo = e.currentTarget.dataset.item; console.log(shopinfo) let pages = getCurrentPages();//获取页面栈 let prevPage = pages[pages.length - 2]; //上一个页面 //直接调用上一个页面的setData()方法,把数据存到上一个页面中去 prevPage.setData( mydata:shopinfo ) wx.navigateBack( delta: 1, ) ,
a页面代码
onShow: function () let pages = getCurrentPages(); let currPage = pages[pages.length - 1]; //当前页面 console.log(currPage.data.mydata) let shopList=currPage.data.mydata; if(shopList) this.setData( shopList ) ,复制
通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,获取到上一级页面的完整Page对象,从而使直接调用Page对象的属性和方法成为可能。 如下所示:
方法一
testBack()
const pages = getCurrentPages();
const currPage = pages[pages.length - 1];//当前页面
const prePage = pages[pages.length - 2];//上一个页面
/**
* 直接调用上一个页面的setData()方法,把数据存到上一个页面中去
* 不需要页面更新
*/
prePage.setData(
title: \'新的标题\'
)
wx.navigateBack(
delta: 1
)
方法二(直接调用方法名来更新数据)
页面A
Page(
data:
name: \'\'
,
...
,
//更新name
changeData: function(name)
this.setData(
name: name
)
)
页面B,假设有一个文本框用于输入姓名,点击返回按钮后更新页面A的name
Page(
//此方法用于文本框输入回调
inputTyping: function (e)
//获取页面栈
var pages = getCurrentPages();
if(pages.length > 1)
//上一个页面实例对象
var prePage = pages[pages.length - 2];
//关键在这里
prePage.changeData(e.detail.value)
)
微信小程序之wx.navigateback往回携带参数
在微信小程序开发的过程当中 经常碰到一些带逻辑的一些事情 就比如 新增地址 修改地址 筛选用户条件等页面的时候 我们也可以用wx.navigateTo来跳转实现 但其中有很多问题
1.微信的十层跳转 当你用navigateTo跳转的时候跳转十次的时候就跳不动了
2.参数的传递 我们在用navigateTo跳转的时候通常带着参数来跳 试想一下 如果我们一种这么跳 那么携带的参数越来越多 这不是开发的一个好事情
所以在以上的问题上我们可以用navigateback来实现 既仅携带本次跳转用的参数即可 并且速度会很快 因为不需要再次加载onLoad函数 写起来也会方便很多 话不多说 上代码
一、假如我们此时在筛选用户条件的页面上 经过我们一系列实现后准备跳回上一个页面的时候
以上是关于小程序 使用navigateBack返回携带参数的主要内容,如果未能解决你的问题,请参考以下文章