天天看点

!!!!解决小程序wx.navigateBack,wx.switchTab不能传参问题!!!!及小程序路由跳转

解决小程序wx.navigateBack,wx.switchTab传参问题!!!

今天在小程序项目开发中,涉及到路由跳转传参,搞得我是一头雾水,查了查官方文档原来wx.navigateBack,wx.switchTab 不能传参,

呵呵,规矩是死的,人是活的,我就是喜欢游走在法则的边缘,所以搜集了各种资料总结如下

首先先介绍一下官方文档中小程序的路由跳转方法以及规定的传参方式

//第一种:需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。
wx.switchTab({
  url: '/pages/home/home'
})

//第二种:关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
  url: '/pages/home/home?id=1'//拼接参数,随便跳转包括tabBar,可能是有点太随意了,把自己后路断了,没有历史回退的功能,如果拼接多个参数用&符号隔开
})

//第三种:关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.redirectTo({
  url: '/pages/home/home?id=1'//拼接参数,页面重定向,和上面的wx.reLaunch一样没有历史回退功能,如果拼接多个参数用&符号隔开
})

//第四种:保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateTo({
  url: '/pages/home/home?id=1'//页面的路径?拼接参数,如果拼接多个参数用&符号隔开
})

//第五种:关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
// 此处是index页面
wx.navigateTo({
  url: '/pages/home/home?id=1'
})

// 此处是home页面
wx.navigateTo({
  url: '/index/index/index?id=1'
})

// 在C页面内 navigateBack,将返回index页面
wx.navigateBack({
  delta: 2
})


           

接下来说重点wx.navigateBack,wx.switchTab传参问题!!!

wx.navigateBack,wx.switchTab不能像其他导航一样通过url传参

但是有三种方法可以解决

1、将数据存到app.globalData中,然后返回上一页面从全局数据中获取

2、将数据存到本地缓存中get.localStorage,然后从缓存中获取

3使用getCurrentPages()方法解决wx.navigateBack传参

var pages = getCurrentPages(); //函数用于获取当前页面栈的实例
var currPage = pages[pages.length - 1];   //当前页面
var prevPage = pages[pages.length - 2];  //上一个页面
 
//直接调用上一个页面对象的setData()方法,把数据存到上一个页面中去
prevPage.setData({
  data:data
});
//然后返回上一个页面
wx.navigateBack({
  delta: 1
})

           

继续阅读