聲明式導航
1.導航到非tabBar頁面
非tabBar頁面指的是沒有被當作tabBar進行切換的頁面。
示例代碼:
<navigator url='pages/info/info' > 點擊跳轉</navigator>
上述代碼使用url屬性置頂要跳轉到的頁面路徑,其中頁面路徑應該以/開頭,且路徑必須提前在app.json的pages 節點下聲明,才能實現正常的跳轉。
2.導航到tabBar頁面
tabBar頁面指的是被當作tabBar進行頁面切換的頁面。如果navigator組件單純使用url屬性,無法導航到tabBar頁面,需要結合open-type屬性進行導航。
<navigator url="/pages/home/home" open-type="switchTab">點擊跳轉</navigator>
3.后退導航
如果要后退到上一頁面或多級頁面,需要把open-type設置為navigateBack, 同時使用delta屬性指定后退的層數。
<navigator open-type="navigateBack" delta="1">返回上一頁面</navigator>
編程式導航
1.導航到非tabBar頁面
通過wx.navigateTO(Object)方法,可以跳轉到應用內的某個頁面,但不能跳轉到tabBar頁面上。其中Object參數對象的屬性列表如下。
url: string,必填,需要跳轉的應用非tabBar路徑,路徑后面可以攜帶參數參數與路徑之間?分隔,參數鍵與值用=相連,不同參數用&分隔。
success: function,選填,接口調用成功的回調函數。
fail: function,選填,接口調用失敗的回調函數。
complate: function,選填,接口調用結束的回調函數,調用成功和失敗都會執行。
<view><button bindtap="btn">logs</button></view> btn: function () { wx.navigateTo({ url: '/pages/logs/logs', }) }
2.導航到tabBar頁面
通過wx.switchTab(Object, Object)方法,可以跳轉到tabBar頁面,並關閉其他所有非tabBar頁面,其中Object參數對象的屬性如下:
url: string,必填,需要跳轉的應用非tabBar路徑,路徑后面可以攜帶參數參數與路徑之間?分隔,參數鍵與值用=相連,不同參數用&分隔。
success: function,選填,接口調用成功的回調函數。
fail: function,選填,接口調用失敗的回調函數。
complate: function,選填,接口調用結束的回調函數,調用成功和失敗都會執行。
3.后退導航
通過wx.navigateBack(Object) 方法,關閉當前頁面,返回上一頁面或多級頁面參數如下:
delta: number,必填,返回的頁面數,如果delta大於現有頁面數,則返回首頁
success: function,選填,接口調用成功的回調函數。
fail: function,選填,接口調用失敗的回調函數。
complate: function,選填,接口調用結束的回調函數,調用成功和失敗都會執行。
導航傳參:
小程序中url傳參與html 一樣,可以在地址后面傳遞參數。
接收參數:
不論是聲明式導航還是編程式導航,最終導航到的頁面可以在onLoad生命周期函數中接收傳遞過來的參數。
onLoad: function (options) {
console.log(options)
}
自定義編譯模式快速傳參:
小程序每次修改代碼並編譯后,會默認從首頁進入,但是在開發階段,我們經常會針對特定頁面進行開發,為了方便編譯后直接進入對應頁面,可以配置自定義編譯模式,步驟如下:
1.點擊工具欄的普通編譯,下拉菜單,
2. 單擊下拉菜單的添加編譯模式選項
3. 在彈出的自定義編譯條件窗口,按需添加模式名稱,啟動頁面,啟動參數。