微信小程式頁面跳轉 的幾種方式

最近在做微信小程式，碰到頁面跳轉的問題，總結一下頁面之間跳轉的方式

一、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，則無效

最近在做微信小程式，碰到頁面跳轉的問題，總結一下頁面之間跳轉的方式

一、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，則無效