在以往的APP或網頁產品中,使用者在使用時可以瀏覽多個頁面,這些產品的伺服器可以承載足夠的資料。而小程式的特色就是規模小,為了不讓使用者在使用小程式時造成困擾,微信小程式規定頁面路徑只能是五層,請盡量避免多層級的互動方式。
頁面跳轉的話就牽涉到了多個頁面層級
第一種: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 傳回的頁數,如果 delta 大於現有頁數,則回到首頁。
onLoad:function(options) { var pages =getCurrentPages() var num =pages.length navigateBack:function(){ wx.navigateBack({ delta: num })}}
推薦:《小程式開發教學》
以上是小程式開發頁面如何實現跳轉?的詳細內容。更多資訊請關注PHP中文網其他相關文章!