1. 什么是頁面導航

頁面導航指的是頁面之間的相互跳轉(zhuǎn)。例如，瀏覽器中實現(xiàn)頁面導航的方式有如下兩種：

① a鏈接

② location.href

2. 小程序中實現(xiàn)頁面導航的兩種方式

① 聲明式導航

? 在頁面上聲明一個 <navigator> 導航組件

? 通過點擊 <navigator> 組件實現(xiàn)頁面跳轉(zhuǎn)

② 編程式導航

? 調(diào)用小程序的導航 API，實現(xiàn)頁面的跳轉(zhuǎn)

1.聲明式導航

1. 導航到 tabBar 頁面

tabBar 頁面指的是被配置為 tabBar 的頁面。

在使用 <navigator> 組件跳轉(zhuǎn)到指定的 tabBar 頁面時，需要指定 url 屬性和 open-type 屬性，其中：

? url 表示要跳轉(zhuǎn)的頁面的地址，必須以 / 開頭

? open-type 表示跳轉(zhuǎn)的方式，必須為 switchTab

示例代碼如下：

<!--pages/home/home.wxml-->
<navigator url="/pages/message/message" open-type="switchTab">導航到消息頁面</navigator>

2. 導航到非 tabBar 頁面

非 tabBar 頁面指的是沒有被配置為 tabBar 的頁面。

在使用 <navigator> 組件跳轉(zhuǎn)到普通的非 tabBar 頁面時，則需要指定 url 屬性和 open-type 屬性，其中：

? url 表示要跳轉(zhuǎn)的頁面的地址，必須以 / 開頭

? open-type 表示跳轉(zhuǎn)的方式，必須為 navigate

示例代碼如下：

<!--pages/home/home.wxml-->
<navigator url="/pages/info/info" open-type="navigate">導航到info頁面</navigator>

注意：為了簡便，在導航到非 tabBar 頁面時，open-type=“navigate” 屬性可以省略。

3. 后退導航

如果要后退到上一頁面或多級頁面，則需要指定 open-type 屬性和 delta 屬性，其中：

? open-type 的值必須是 navigateBack，表示要進行后退導航

? delta 的值必須是數(shù)字，表示要后退的層級

示例代碼如下：

<!--pages/info/info.wxml-->
<navigator open-type="navigateBack" delta="1">后退（返回上一頁）</navigator>

注意：為了簡便，如果只是后退到上一頁面，則可以省略 delta 屬性，因為其默認值就是 1

2.編程式導航

1. 導航到 tabBar 頁面

調(diào)用 wx.switchTab(Object object) 方法，可以跳轉(zhuǎn)到 tabBar 頁面。其中 Object 參數(shù)對象的屬性列表如下：

<!--pages/home/home.wxml-->
<button bindtap="gotoMessage">跳轉(zhuǎn)到消息頁面</button>

// pages/home/home.js
  //通過編程式導航跳轉(zhuǎn)到tabbar頁面
  gotoMessage(){
    wx.switchTab({
      url: '/pages/message/message',
    })
  }

2. 導航到非 tabBar 頁面

調(diào)用 wx.navigateTo(Object object) 方法，可以跳轉(zhuǎn)到非 tabBar 的頁面。其中 Object 參數(shù)對象的屬性列表

如下：

<!--pages/home/home.wxml-->
<button bindtap="gotoinfo">跳轉(zhuǎn)到info頁面</button>

// pages/home/home.js
  //通過編程式導航跳轉(zhuǎn)到info頁面
  gotoinfo(){
    wx.navigateTo({
      url:"/pages/info/info"
    })
  },

3. 后退導航

調(diào)用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級頁面。其中 Object 參數(shù)對象可選的

屬性列表如下：

<!--pages/info/info.wxml-->
<button bindtap="goback">后退</button>

// pages/info/info.js
  goback(){
    wx.navigateBack()
  },

3.導航傳參

1. 聲明式導航傳參

navigator 組件的 url 屬性用來指定將要跳轉(zhuǎn)到的頁面的路徑。同時，路徑的后面還可以攜帶參數(shù)：

? 參數(shù)與路徑之間使用 ? 分隔

? 參數(shù)鍵與參數(shù)值用 = 相連

? 不同參數(shù)用 & 分隔

代碼示例如下：

<!--pages/home/home.wxml-->
<navigator url="/pages/info/info?name=zs&age=20">跳轉(zhuǎn)到info頁面</navigator>

2. 編程式導航傳參

調(diào)用 wx.navigateTo(Object object) 方法跳轉(zhuǎn)頁面時，也可以攜帶參數(shù)，代碼示例如下：

<!--pages/home/home.wxml-->
<view bindtap="gotoinfo">跳轉(zhuǎn)到info頁面</view>

  //通過編程式導航跳轉(zhuǎn)到info頁面
  gotoinfo(){
    wx.navigateTo({
      url:"/pages/info/info?name=zs&gender='男'"
    })
  },

3. 在 onLoad 中接收導航參數(shù)

通過聲明式導航傳參或編程式導航傳參所攜帶的參數(shù)，可以直接在 onLoad 事件中直接獲取到，示例代碼如下：

// pages/info/info.js
Page({
  data: {
    query:{}
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad(options) {
    console.log(options);
    this.setData({
      query:options
    })
  },

總結(jié)

到此這篇關于微信小程序如何在頁面跳轉(zhuǎn)時進行頁面導航的文章就介紹到這了,更多相關小程序頁面跳轉(zhuǎn)進行頁面導航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論