微信小程序頁面跳轉導航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' }) 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM