小程式頁面跳轉有哪幾種方式

小程式頁面跳轉的方式有以下幾種：

#一、wx.navigateTo(OBJECT)

   這是最普遍的一種跳轉方式，其官方解釋為：「保留目前頁面，跳到應用程式內的某個頁面」

#類似於html中的 window.location.href=" "
eg：

wx.navigateTo({  url: 'test?id=1'})
實際效果如下：

##小程式中左上角落有一個返回箭頭，可返回上一個頁面

也可以透過方法  wx.navigateBack 返回原始頁面

二、wx.redirectTo(OBJECT)

關閉目前頁面，跳到應用程式內的某個頁面。

類似html中的 window.open('你要跳轉的頁面');
eg：
wx.redirectTo({  url: 'test?id=1'})
效果如下：

左上角沒有回傳箭頭，不能回上上一個頁面

三、wx.switchTab(OBJECT)

# 跳到tabBar 頁面，並關閉其他所有非tabBar 頁面

eg：
{  "tabBar": {    "list": [{      "pagePath": "index",      "text": "首頁"    },{      "pagePath": "other",      "text": "其他"    }]  } }
wx.switchTab({  url: '/index'})

wx.navigateTo 和wx.redirectTo 不允許跳到tabbar 頁面，只能用wx.switchTab 跳到tabbar 頁面

四、wx.reLaunch(OBJECT)

關閉所有頁面，開啟到應用程式內的某個頁面。

跟wx.redirectTo 一樣左上角不會出現回傳箭頭，但兩者卻不完全相同

這裡要提到小程式中的  getCurrentPages() 方法

在wx.navigateTo中，每跳轉一個新的頁面，其原始頁面就會被加入堆疊，透過呼叫wx.navigateBack(OBJECT)可透過取得堆疊中儲存的頁面返回上一層或多層頁面；

wx.redirectTo,方法則不會加入堆疊,但仍可透過wx.navigateBack(OBJECT)方法傳回先前堆疊中的頁面 

#wx.reLaunch 方法則會清空目前的堆疊。

eg：

// 此处是A页面wx.navigateTo({  url: 'B?id=1'})// 此处是B页面wx.navigateTo({  url: 'C?id=1'})// 在C页面内 navigateBack，将返回b页面wx.navigateBack({  delta: 1})
// 此处是B页面
wx.redirectTo({
 url: 'C?id=1'
 })
 // 在C页面内 navigateBack，则会返回a页面 
wx.navigateBack({
 delta: 1
 })
// 此处是B页面
wx.reLaunch({
 url: 'C?id=1'
 })
 // 在C页面内 navigateBack，则无效

相關推薦：

小程式開發教學
#

以上是小程式頁面跳轉有哪幾種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！