【微信小程序】页面导航

淡淡的烟草味﹌ 2023-10-01 22:52 25阅读 0赞

**目录**

小程序 - 视图与逻辑

页面导航

1. 什么是页面导航

2. 小程序中实现页面导航的两种方式

页面导航 - 声明式导航

1. 导航到 tabBar 页面

2. 导航到非 tabBar 页面

3. 后退导航

页面导航 - 编程式导航

1. 导航到 tabBar 页面

2. 导航到非 tabBar 页面

3. 后退导航

--------------------

## **小程序 - 视图与逻辑** ##

### 页面导航 ###

#### **1. 什么是页面导航**  ####

页面导航指的是 页面之间的相互跳转 。例如，浏览器中实现页面导航的方式有如下两种：

① <a> 链接

② location.href

####  ####

#### **2. 小程序中实现页面导航的两种方式**  ####

①  声明式导航

在页面上声明一个 <navigator> 导航组件

通过点击 <navigator> 组件实现页面跳转

②  编程式导航

调用小程序的导航 API，实现页面的跳转

### **页面导航 - 声明式导航** ###

#### **1. 导航到 tabBar 页面**  ####

tabBar 页面 指的是被配置为 tabBar 的页面。

在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定  url  属性和  open-type  属性，其中：

*  url 表示要跳转的页面的地址，必须以 / 开头 
 *  open-type 表示跳转的方式，必须为 switchTab

**示例代码如下：**

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

#### **2. 导航到非 tabBar 页面**  ####

非 tabBar 页面 指的是没有被配置为 tabBar 的页面。

在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定  url  属性和  open-type  属性，其中：

*  url 表示要跳转的页面的地址，必须以 / 开头 
 *  open-type 表示跳转的方式，必须为 navigate

**示例代码如下：**

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

**注意：为了简便，在导航到非 tabBar 页面时，open-type="navigate" 属性可以省略。**

#### **3. 后退导航**  ####

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

*  open-type 的值必须是 navigateBack，表示要进行后退导航 
 *  delta 的值必须是数字，表示要后退的层级

示例代码如下：

**注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。**

### **页面导航 - 编程式导航**  ###

#### **1. 导航到 tabBar 页面**  ####

调用  wx.switchTab( Object object )  方法，可以跳转到 tabBar 页面。其中 Object  参数对象 的属性列表如下：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td><strong>是否必选</strong></td> 
   <td><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>是</td> 
   <td>需要跳转的 tabBar 页面的路径，路径后不能带参数</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

示例代码如下：

<button bindtap="gotoMessage">跳转到message页面</button>

gotoMessage() {
        wx.switchTab({
          url: '/pages/message/message'
        })
      },

#### **2. 导航到非 tabBar 页面**  ####

调用  wx.navigateTo( Object object )  方法，可以跳转到非 tabBar 的页面。其中 Object  参数对象 的属性列表

如下：

示例代码如下：

<button bindtap="gotoInfo">跳转到info页面</button>

gotoInfo() {
        wx.navigateTo({
          url: '/pages/info/info'
        })
      },

#### **3. 后退导航**  ####

调用  wx.navigateBack( Object object )  方法，可以返回上一页面或多级页面。其中 Object  参数对象 可选的

属性列表如下：

<table style="width:523px;"> 
 <tbody> 
  <tr> 
   <td><strong>属性</strong></td> 
   <td><strong>类型</strong></td> 
   <td style="width:69px;"><strong>默认值</strong></td> 
   <td style="width:69px;"><strong>是否必选</strong></td> 
   <td style="width:310px;"><strong>说明</strong></td> 
  </tr> 
  <tr> 
   <td><span style="color:#c00000;">delta</span></td> 
   <td><span style="color:#c00000;">number</span></td> 
   <td style="width:69px;">1</td> 
   <td style="width:69px;">否</td> 
   <td style="width:310px;"><span style="color:#000000;">返回的页面数，如果 delta 大于现有页面数，则返回到首页</span></td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td style="width:69px;"></td> 
   <td style="width:69px;">否</td> 
   <td style="width:310px;">接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td style="width:69px;"></td> 
   <td style="width:69px;">否</td> 
   <td style="width:310px;">接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td style="width:69px;"></td> 
   <td style="width:69px;">否</td> 
   <td style="width:310px;">接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

示例代码如下：

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