微信小程序知識點整理(五)——頁面導航

一、聲明式導航

官方文檔：頁面路由

1. 導航到非 tabBar 頁面

非 tabBar 頁面指的是沒有被當作 tabBar 進行切換的頁面。

<navigator url="/pages/home/home">跳轉到home頁面</navigator>
<!-- <navigator url="../home/home">跳轉到home頁面</navigator> -->

• 注意事項

  • url 屬性設置需要跳轉的路徑
  • 頁面路徑應該以/開頭(根路徑的方式)，也可以使用相對路徑
  • 路徑必須提前在 app.json 的 pages 節點下聲明

2. 導航到 tabBar 頁面

navigator組件單純使用 url 屬性，無法導航到 tabBar 頁面，必須需要結合 open-type 屬性進行導航。

<navigator url="/pages/tabMessage/tabMessage" open-type="switchTab">跳轉到消息tab頁面</navigator>

3. 後退導航

小程序如果要後退到上一頁面或多級頁面，需要把 open-type 設置爲 navigateBack，同時使用 delta 屬性指定後退的層數

<navigator open-type='navigateBack' delta='1'> 返回上一頁 </navigator>

<navigator open-type='navigateBack' delta='2'> 返回上上一頁 </navigator>

二、編程式導航

官方文檔：路由

1. 導航到非 tabBar 頁面

官方文檔：wx.navigateTo

通過 wx.navigateTo(Object object) 方法，可以跳轉到應用內的某個頁面。
但是不能跳到 tabBar 頁面。

// 觸發點擊事件 跳轉到非導航頁面
btnHandle: function () {
  wx.navigateTo({
    url: '/pages/about/about',
    success: function () {
      console.log('Hello about')
    }
  })
},

2. 導航到 tabBar 頁面

官方文檔：wx.switchTab

通過 wx.switchTab(Object object) 方法，可以跳轉到 tabBar 頁面

// 跳轉到導航頁面
  btnHandle2() {
    wx.switchTab({
      url: '/pages/tabHome/tabHome',
      success: function() {
        console.log('hello,tabHome')
      }
    })
  },

3. 後退導航

官方文檔：wx.navigateBack

通過 wx.navigateBack(Object object)方法，關閉當前頁面，返回上一頁面或多級頁面。

  btnHandle3() {
    wx.navigateBack({
      delta:1
    })
  },

三、導航傳參

1. 聲明式導航傳參

navigator 組件的 url 屬性用來指定導航到的頁面路徑，同時路徑後面還可以攜帶參數，參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔。

<navigator url="/pages/about/about?age=18&name=shuji">跳轉到 about 頁面</navigator>

2. 編程式導航傳參

wx.navigateTo(Object object) 方法的 object 參數中，url 屬性用來指定需要跳轉的應用內非 tabBar 的頁面的路徑, 路徑後可以帶參數。參數與路徑之間使用 ? 分隔，參數鍵與參數值用 = 相連，不同參數用 & 分隔。

// 跳轉到 tabBar 頁面
tabBarHandle: function () {
  wx.switchTab({
    url: '/pages/person/person?age=18&name=shuji',
    success: function() {
      console.log('Hello Person')
    }
  })
},

3. 接受傳遞的參數

不論是聲明式導航還是編程式導航，最終導航到的頁面可以在 onLoad 生命週期函數中接收傳遞過來的參數。

onLoad: function (options) {
    // 打印傳遞出來的參數
    console.log(options)
  },

4. 導航欄自定義編譯模式快速傳參

• 小程序每次修改代碼並編譯後，會默認從首頁進入，但是在開發階段，我們經常會針對特定的頁面進行開發，爲了方便編譯後直接進入對應的頁面，可以配置自定義編譯模式，步驟如下：

  • 單擊工具欄上的“普通編譯”下拉菜單
  • 單擊下拉菜單中的“添加編譯模式”選項
  • 在彈出的“自定義編譯條件窗口”，按需添加模式名稱、啓用頁面、啓動參數、進入場景等。

搭配文章：微信小程序裏的路由函數解析