天天看點

!!!!解決小程式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
})

           

繼續閱讀