微信小程序頁面跳轉導航wx.navigateTo和wx.redirectTo

   在微信小程序裏面若是有多個頁面確定有頁面跳轉，例如，當用戶掃一掃微信小程序二維碼後，就進入到了小程序的首頁裏面，而後，點擊某個分類就進入到了這個分類的列表頁，點擊列表頁的某一連接的標題後就進行到了這個連接的內容頁，固然，也能夠從小程序的首頁直接進入到內容頁裏面。

   從小程序的首頁到列表而再到內容頁，是一步一步的跳轉的，也就是說通常的小程序都會從一個頁面跳轉到另外一個頁面（固然，有的小程序只有一個頁面，例如，計算器、房稅計算等，這樣的小程序比較少），若是想回到前一個頁面能夠點擊小程序左上角的符號「<」便可返回到前一頁。

  相似小程序這樣的跳轉是由小程序框架提供的接口實現的，這幾個接口是：wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)、wx.navigateBack(OBJECT)和wx.switchTab。

  下面分別介紹這幾個功能的使用區別與聯繫：

wx.navigateTo(OBJECT)

  這個接口是跳轉到一個應用內的某個頁面，可是，保留着當前頁面，這句話很差理解什麼是保留着當前頁面？

以下圖所示：

  
 

  若是使用接口wx.navigateTo的話，當點擊「A頁面」進入到「B頁面」後，「A頁面」仍然存在，若是從「B頁面」進入到「C頁面」，「A頁面」和「B頁面」都會保留着。

  這樣有一個好處是，若是想從「C頁面」回到「B頁面」，只須要點擊「C頁面」的返回便可回到「B頁面」，再點「B頁面」的返回上一頁面則回到「A頁面」。

  使用wx.navigateBack能夠返回到原頁面。

wx.navigateBack(OBJECT)
 

關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層。

OBJECT 參數說明：

參數	類型	默認值	說明
delta	Number	1	返回的頁面數，若是 delta 大於現有頁面數，則返回到首頁。

示例代碼：

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
wx.navigateTo({
  url: 'B?id=1'
})

// 此處是B頁面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
  delta: 2
})

wx.redirectTo(OBJECT)

  關閉當前頁面，跳轉到應用內的某個頁面。

  仍是用上面的三張圖示做爲例子，當使用wx.redirctTo接口跳轉頁面時，原來的頁面將被刪除掉，固然，這是小程序框架刪除的並非咱們本身編寫代碼刪除的，是騰訊把刪除原頁面的功能封裝在了這個接口裏面。

  當點擊「A頁面」進入到「B頁面」時，原「A頁面」將被刪除掉，只留下當前頁面「B頁面」，若是從「B頁面」又進入到了「C頁面」後，那麼，「B頁面」也被刪除掉了，當前頁面就是「C頁面」。

  若是我想回到「A頁面」或「B頁面」能夠回去嗎？ 不能，由於，已經被小程序框架給銷燬了，只能直接回到小程序的首頁。

  這就是這個接口wx.redirectto與wx.navigateTo的最主要區別。
 

接口wx.redirectto與wx.navigateTo的OBJECT 參數相同，以下表所示：
 

OBJECT 參數說明：

參數	類型	必填	說明
url	String	是	須要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔；如 'path?key=value&key2=value2'
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

  這兩個接口裏面的路徑url後能夠帶參數，例如：
 

wx.redirectTo({ url: 'test?id=1' })

  當用戶點擊這個跳轉後，就會一同把id值爲1的參數帶到test頁面裏面。

  跳轉帶參數很是重要，因此，下面作一個完整的實例來說解帶參數是如何實現的。

實例：

  要求：當點擊頁面navigate，把id=9的參數帶到新頁面login頁面，在login頁面接收這個參數值，根據業務須要來處理這個id值。

  navigate頁面和login頁面在同一個目錄裏面，以下圖所示：


navigate.wxml代碼：
 

<view catchtap="ontouch" id="9"> <button >跳轉帶參數測試</button> </view>

  當用戶點擊這個按扭後，就會觸發事件ontouch，並把一個事件對象帶到navigate.js文件裏面ontouch函數裏面。

這個事件對象是：



  也就是在視圖層navigate.wxml裏面的id的值9會經過事件對象傳遞到邏輯層navigate.js裏面，即在對象的e.currentTarget.id裏面。

  這樣咱們在作微信小程序開發時，就能夠經過e.currentTarget.id來獲取視圖層裏的id值，而後，把這個id值以參數的形式帶到login頁面。

navigate.js代碼：
 

ontouch:function(e){ console.log(e) wx.navigateTo({ url: '../login/login?id='+e.currentTarget.id, success: function (e) { console.log(e) } })

login.js代碼：
 

onLoad: function (options) { console.log(options) }

  這樣當點擊「跳轉帶參數測試」按扭後就會在login.js文件裏面的onLoad函數裏面獲取到一個對象options，options以下所示：
 

Object {id: "9"}

  顯示options是一個對象，對象裏面的id值正是從頁面navigate.wxml獲取到的id的值。

  至於，獲取到上一個面頁作什麼，微信小程序開發者能夠根據本身的業務須要來處理。
 

wx.switchTab(OBJECT)

跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面

OBJECT 參數說明：

參數	類型	必填	說明
url	String	是	須要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑後不能帶參數
success	Function	否	接口調用成功的回調函數
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

示例代碼：

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首頁"
    },{
      "pagePath": "other",
      "text": "其餘"
    }]
  }
}

wx.switchTab({
  url: '/index'
})

 

親，若是您感受本文有用，請點個贊再走吧！！(>‿◠)✌