1. 程式人生 > >小程式頁面連結-navigator(導航)

小程式頁面連結-navigator(導航)

navigator-頁面連結-通過設定open-type的值來確定頁面的開啟方式

<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁開啟</navigator>
<navigator url="/page/index/index" open-type="switchTab"

hover-class="other-navigator-hover">切換 Tab</navigator>
<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">開啟繫結的小程式</navigator>
</view>

open-type 有效值

navigate 對應 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 對應 wx.redirectTo 的功能
switchTab

對應 wx.switchTab 的功能
reLaunch 對應 wx.reLaunch 的功能 1.1.0
navigateBack 對應 wx.navigateBack 的功能 1.1.0
exit 退出小程式,target="miniProgram"時生效 2.1.0

重定向、轉發等各種跳轉的區別如下:

navigate :用於保留當前頁面、跳轉到應用內的某個頁面,使用 wx.navigateBack可以返回到原頁面。對於頁面不是特別多的小程式,通常推薦使用 wx.navigateTo進行跳轉, 以便返回原頁面,以提高載入速度。當頁面特別多時,則不推薦使用。

redirect :當頁面過多時,被保留頁面會擠佔微信分配給小程式的記憶體,或是達到微信所限制的 5 層頁面棧。這時,應該考慮選擇 wx.redirectTo。wx.redirectTo()用於關閉當前頁面,跳轉到應用內的某個頁面。這樣的跳轉,可以避免跳轉前頁面佔據執行記憶體,但返回時頁面需要重新載入,增加了返回頁面的顯示時間。

reLaunch : wx.reLaunch()與 wx.redirectTo()的用途基本相同, wx.reLaunch()先關閉了記憶體中所有保留的頁面,再跳轉到目標頁面

switchTab : 對於跳轉到 tab bar 的頁面,最好選擇 wx.switchTab(),它會先關閉所有非 tab bar 的頁面。其次,也可以選擇 wx.reLaunch(),它也能實現從非 tab bar 跳轉到 tab bar,或在 tab bar 間跳轉,效果等同 wx.switchTab()。使用其他跳轉 API 來跳轉到 tab bar,則會跳轉失敗

navigateBack: 用於關閉當前頁面,並返回上一頁面或多級頁面。開發者可通過 getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層。這個 API 需要填寫的引數只有 delta,表示要返回的頁面數。若 delta 的取值大於現有可返回頁面數時,則返回到使用者進入小程式的第一個頁面。當不填寫 delta 的值時,就預設其為 1(注意,預設並非取 0),即返回上一頁面。