微信小程式開髮指南系列：關於頁面跳轉

從跳轉的方式（或說成開啟新頁面的方式）來說大致可分為：請求轉發，請求重定向 和 TAB頁跳轉(有過web經驗的話，應該很清楚兩種方式的區別)，部分出自官方文件。

wx.navigateTo(OBJECT)

保留目前頁面，跳到應用程式內的某個頁面，使用wx.navigateBack可以回到原始頁面。

wx.navigateTo(OBJECT)

注意點：小程式中要求頁面的層級最多只能有五層，因為這種方式保留目前頁面，也就是說以這種方式跳轉頁面，最多只能開啟5個頁面。

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

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

wx.navigateBack(OBJECT)

關閉目前頁面，返回上一頁面或多層級頁面。可透過 getCurrentPages()) 取得目前的頁面棧，決定需要傳回幾層。

注意點： 
1.這裡需要強調一下小程式中以堆疊形式記錄頁面。每一個以wx.navigateTo(OBJECT) 方式跳轉的頁面都會被壓入堆疊，但是以wx.redirectTo(OBJECT) 開啟的頁面則不會。借用一下官方的例子，很清晰明了。

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.redirectTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack()

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

從寫的位置來說大致可分為兩種，一種是在頁面wxml文件中以標籤的形式，另一種是程式碼的形式（這種上面已經列舉出來了，此處不再贅述） 。

元件navigator頁面連結。

透過open-type 可以指定跳轉的方式是請求轉發，請求重定向還是TAB頁跳轉。 （效果同上面js程式碼的效果，此處不再贅述）

這裡記錄一個筆者遇到的坑，坑了我一晚。 。 。也是很無言。雖然不是頁面跳躍的問題，但也有一定聯繫，姑且記在這裡。

原本我的專案首頁有兩個tab，需要在其中一個清單頁中點選一個item進入詳情，查看地圖。然而，不管我怎麼嘗試，文檔擼了N遍，都還是沒解決。

先貼出異常

上面報錯的aboutUs是首頁的其中另一個tab，只是一個展示頁，沒有操作，所以雖然報錯了，然而我並沒有管。問題出在我跳轉pages/map（詳情的地圖）的時候,提示我如上最後一行的錯誤。

Page[pages/map/map] not found. May be caused by: 1. Forgot to add page route in app.json. 2. Invoking Page() in async task.

依照筆者先前Android和後台的經驗，一直把問題定位到map頁的本身。擼了N久都沒解決。後來心血來潮把aboutUs的異常解決了，發現問題奇蹟般的解決了。

問題出在，aboutUs頁，因為只是靜態頁，並沒有操作，所以aboutUs.js是空的，問題就出在這。

在小程式中，即時不需要寫js的程式碼，那麼js檔案也必須加上Page({})。

以上是微信小程式開髮指南系列：關於頁面跳轉的詳細內容。更多資訊請關注PHP中文網其他相關文章！