從小程序的首頁到列表而再到內容頁,是一步一步的跳轉的,也就是說一般的小程序都會從一個頁面跳轉到另一個頁面(當然,有的小程序只有一個頁面,例如,計算器、房稅計算等,這樣的小程序比較少),如果想回到前一個頁面可以點擊小程序左上角的符號“<”即可返回到前一頁。
類似小程序這樣的跳轉是由小程序框架提供的接口實現的,這幾個接口是:wx.navigateTo(OBJECT)、wx.redirectTo(OBJECT)、wx.navigateBack(OBJECT)和wx.switchTab。
下面分別介紹這幾個功能的使用區別與聯系:
wx.navigateTo(OBJECT)
這個接口是跳轉到一個應用內的某個頁面,但是,保留着當前頁面,這句話不好理解什么是保留着當前頁面?
如下圖所示:



這樣有一個好處是,如果想從“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' })