微信小程序的頁面導航跳轉


聲明式導航

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. 在彈出的自定義編譯條件窗口,按需添加模式名稱,啟動頁面,啟動參數。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM