微信小程序的頁面導航問題

小程序提供了 navigator組件 及功能相對應的 API 用於頁面導航，不一樣的導航操做造成不一樣的頁面棧信息，詳細見官網文檔路由的說明，可是官方文檔不推薦也沒有提供修改頁面棧的API。

導航方式

open-type="navigate" 或 api: wx.navigateTo
open-type="redirect" 或 api: wx.redirectTo
open-type="switchTab" 或 api: wx.switchTab
open-type="reLaunch" 或 api: wx.reLaunch
open-type="navigateBack" 或 api: wx.navigateBack

頁面棧形態

• navigate 和 redirect 的區別：前者在頁面棧保留跳轉前頁面，再將跳轉後的頁面推入頁面棧，能夠經過 navigateBack 返回頁面棧前面的頁面，delta可設置返回的層數；後者不保留跳轉前頁面，將其出棧，然後跳轉後頁面入棧，此時若用 navigateBack，返回的是頁面棧裏保存的其餘頁面，若是沒有其餘頁面，則仍在此頁面；用符號語言表示爲：

navigate：A -> B 其頁面棧依次爲：A - AB

redirect: A -> B 其頁面棧依次爲：A - B

看幾個例子，都是在實際項目開發中抽象出來的：

• A navigateTo-> B navigateBack(1)-> A 頁面棧爲：A-AB-A
• A navigateTo-> B navigateTo-> C navigateBack(2)-> A 頁面棧爲：A-AB-ABC-A
• A redirectTo-> B navigateBack-> B(棧內無其餘頁面) 頁面棧爲：A-B-B
• A navigateTo-> B redirectTo-> C navigateBack-> A 頁面棧爲：A-AB-AC-A
• A navigateTo-> B redirectTo-> A navigateTo-> C redirectTo-> A navigateTo-> D redirectTo-> A navigateTo-> E redirectTo-> A navigateTo->(無效了，由於此時頁面棧已到達限制：5) 頁面棧爲：A-AB-AA-AAC-AAA-AAAD-AAAA-AAAAE-AAAAA
• R redirectTo-> B/C/D/E redirectTo-> A 頁面棧爲：E- B/C/D/E-A

小結

• 在可以造成相對獨立閉環的頁面間方纔使用navigate導航，這樣能夠保證每一個頁面能夠單獨分享而不影響頁面導航關係，好比某表單頁面-選擇省份城市-回到表單頁面，這種類型就是一個閉環，其中，省份城市選擇的頁面不會被單獨訪問。
• 在各自獨立的頁面間用redirect導航，好比這種需求：首頁有去其餘各個模塊的入口，每一個模塊都有返回首頁的按鈕，而這些模塊的入口不僅是首頁，也有其餘，如登陸成功後直接進入某模塊頁面，在公衆號菜單有分別進入各個模塊的入口，這種狀況下，每一個模塊雖然與首頁之間有父子關係，但卻不適合用 navigate 和 navigateBack 導航。
• 2017-05-25補充：發現一篇文章《小程序基礎篇之頁面路由》, 對於頁面棧形態給了圖解，看起來更直觀

頁面導航邏輯 - 某項目

1. 各功能頁返回首頁方式看狀況判斷：若從首頁進入則navigateBack返回首頁；如果直接打開功能頁的，則redirect打開首頁；
2. 綁定與否過濾控制頁面訪問權限：已綁定直接訪問，未綁定redirect到綁定頁面，綁定成功後自動回到原進入的頁面；（該小程序功能需綁定對應數據方可以使用）
3. 微信受權判斷：未受權或已失效從新發起受權，受權成功後刷新原頁面；受權流程見小程序文檔(下方有個受權流程圖)
4. 用戶拒絕受權：彈框引導其從新打開受權；（打開設置API: wx.openSetting: success (res.authSetting['scope.userInfo'])）

• 前提：保存打開小程序的初始路徑，做爲以上各類狀況頁面跳轉依據；打開app的路徑可在app啓動關於顯示的時候獲取，具體見文檔：框架-邏輯層-註冊程序 app: onLaunch/onShow(options.path)

---

更新：小程序受權規則有更改，直接查看其文檔，此處附上一實際項目中使用的受權流程：