小程序中實(shí)現(xiàn)頁面導(dǎo)航：聲明式和編程式

頁面導(dǎo)航目的是頁面之間的相互跳轉(zhuǎn)。聲明式導(dǎo)航在頁面上聲明一個(gè) <navigator>導(dǎo)航組件，通過點(diǎn)擊 <navigator>組件實(shí)現(xiàn)頁面跳轉(zhuǎn)。編程式導(dǎo)航調(diào)用小程序的導(dǎo)航 API，實(shí)現(xiàn)頁面的跳轉(zhuǎn)。

聲明式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁面

tabBar 頁面指的是被配置為 tabBar 的頁面。在使用 組件跳轉(zhuǎn)到指定的 tabBar 頁面時(shí)，需要指定 url 屬性和 open-type 屬性，其中：

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

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

示例代碼如下：

<navigator url="/pages/message/message"open-type="switchTab">導(dǎo)航到消息頁面</navigator>

2. 導(dǎo)航到非 tabBar 頁面

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

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

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

<navigator url="/pages/info/info"open-type="navigate">導(dǎo)航到info頁面</navigator>

注意：為了簡(jiǎn)便，在導(dǎo)航到非 tabBar 頁面時(shí)，open-type="navigate" 屬性可以省略。

3. 后退導(dǎo)航

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

  ? open-type 的值必須是 navigateBack，表示要進(jìn)行后退導(dǎo)航

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

示例代碼如下：

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

注意：為了簡(jiǎn)便，如果只是后退到上一頁面，則可以省略 delta 屬性，因?yàn)槠淠J(rèn)值就是 1。

編程式導(dǎo)航

1. 導(dǎo)航到 tabBar 頁面

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

示例代碼如下：

//頁面結(jié)構(gòu)
<button bindtap="gotoMessage">跳轉(zhuǎn)到消息頁面</button>

// 通過編程式導(dǎo)航，跳轉(zhuǎn)到 message 頁面
gotoMessage() {
   wx.switchTab({
      url: '/pages/message/message'
   }）
}

2. 導(dǎo)航到非 tabBar 頁面

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

示例代碼如下：

// 頁面結(jié)構(gòu)
<button bindtap="gotoMessage">跳轉(zhuǎn)到消息頁面</button>

// 通過編程式導(dǎo)航，跳轉(zhuǎn)到message頁面
gotoMessage() {
  wx.swchTab({
    url: '/pages/message/message'
  }）
}

3. 后退導(dǎo)航

調(diào)用 wx.navigateBack(Object object) 方法，可以返回上一頁面或多級(jí)頁面。其中 Object 參數(shù)對(duì)象可選的屬性列表如下：

示例代碼如下：

//頁面結(jié)構(gòu)
<button bindtap="gotoBack">后退</button>

//編程式導(dǎo)航，后退到上一頁面
gotoBack(){
  wx.navigateBack()
}