微信小程式頁面跳轉三種方式
為了不讓使用者在使用小程式時造成困擾,微信小程式規定頁面路徑只能是五層,請儘量避免多層級的互動方式。
頁面跳轉的話就涉及到了多個頁面層級
第一種:wx.navigateTo(OBJECT)
保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
OBJECT引數說明:
引數 型別 必填 說明
url String 是 需要跳轉的應用內頁面的路徑 , 路徑後可以帶引數。引數與路徑之間使用?分隔,引數鍵與引數值用=相連,不同引數用&分隔;如 ‘path?key=value&key2=value2’
success Function 否 介面呼叫成功的回撥函式
fail Function 否 介面呼叫失敗的回撥函式
complete Function 否 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)
onLoad: function(options) {
wx.navigateTo({
url: '../index/index'
})
}
第二種:wx.redirectTo(OBJECT)
關閉當前頁面,跳轉到應用內的某個頁面。
OBJECT引數說明:
引數 型別 必填 說明
url String 是 需要跳轉的應用內頁面的路徑
success Function 否 介面呼叫成功的回撥函式
fail Function 否 介面呼叫失敗的回撥函式
complete Function 否 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行)
onLoad: function(options) {
wx.redirectTo({
url: '../index/index'
})
}
第三種:wx.navigateBack(OBJECT)
關閉當前頁面,返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧,決定需要返回幾層。
OBJECT引數說明:
引數 型別 預設值 說明
delta Number 1 返回的頁面數,如果 delta 大於現有頁面數,則返回到首頁。
onLoad: function(options) {
var pages = getCurrentPages()
var num = pages.length
navigateBack:function(){
wx.navigateBack({
delta: num
})
}
}