小程序----页面导航

2023-08-05 99

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 小程序----页面导航

1. 什么是页面导航

页面导航指的是页面之间的相互跳转。

例如，浏览器中实现页面导航的方式有如下两种：

<a> 链接
location.href

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

声明式导航
在页面上声明一个 <navigator> 导航组件
通过点击 <navigator> 组件实现页面跳转
编程式导航
调用小程序的导航 API，实现页面的跳转

3. 声明式导航

3.1. 导航到 tabBar 页面

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

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

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

被配置为 tabBar 的页面：

"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-active.png"
      }
    ]
  },

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<!-- <button type="primary" bindtap="getInfo">发起get请求</button> -->
<!-- <button type="primary" bindtap="getInfo2">发起post请求</button> -->
<navigator 
  url="/pages/message/message" 
  open-type="switchTab"
  class="nav"
>导航到消息页面</navigator>

/* pages/home/home.wxss */
.nav {
  background-color: cadetblue;
  border: black 1px solid;
  text-align: center;
}

3.2. 导航到非 tabBar 页面

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

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

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

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator 
  class="navt" 
  url="/pages/list/list" 
  open-type="navigate"
>导航到list页面</navigator>
<navigator 
  class="navt"
  url="/pages/list/list" 
>导航到list页面</navigator>

3.3. 后退导航

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

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

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

<!--pages/list/list.wxml-->
<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>
<view 
  wx:for="{{arr}}" 
  wx:for-index="idx" 
  wx:for-item="content"
  wx:key="id"
>
  id: {{content.id}}
  索引：{{idx}} -- 当前项：{{content.content}}
</view>

4. 编程式导航

4.1. 导航到 tabBar 页面

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator 
  class="navt" 
  url="/pages/list/list" 
  open-type="navigate"
>导航到list页面</navigator>
<navigator 
  class="navt"
  url="/pages/list/list" 
>导航到list页面</navigator>
<button bindtap="goMessage" type="primary">跳转到消息页面</button>

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  goMessage() {
    wx.switchTab({
      url: '/pages/message/message'
    })
  }
})

4.2. 导航到非 tabBar 页面

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<button
  bindtap="goList"
>跳转到list页面</button>

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  }
  goMessage() {
    wx.switchTab({
      url: '/pages/message/message'
    })
  },
  goList() {
    wx.navigateTo({
      url: '/pages/list/list',
    })
  }
})

4.3. 后退导航

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

<!--pages/list/list.wxml-->
<button type="primary" bindtap="goBack"></button>
<view 
  wx:for="{{arr}}" 
  wx:for-index="idx" 
  wx:for-item="content"
  wx:key="id"
>
  id: {{content.id}}
  索引：{{idx}} -- 当前项：{{content.content}}
</view>

// pages/list/list.js
Page({
  data: {
    arr: [
      {id: 1, content: 'a'},
      {id: 2, content: 'b'},
      {id: 3, content: 'c'},
      {id: 4, content: 'd'},
      {id: 5, content: 'e'}
    ]
  },
  goBack() {
    wx.navigateBack({
      delta: 1
    })
  }
})

5. 导航传参

5.1. 声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔
参数键与参数值用 = 相连
不同参数用 & 分隔

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator 
  class="navt" 
  url="/pages/message/message?name='zs'&age=12" 
  open-type="switchTab" 
>跳转到信息页面</navigator>
<button
  bindtap="goList"
>跳转到list页面</button>

5.2. 编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator 
  class="navt" 
  url="/pages/message/message?name='zs'&age=12" 
  open-type="switchTab" 
>跳转到信息页面</navigator>
<button
  bindtap="goList"
>跳转到list页面</button>

// pages/home/home.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  }
  goMessage() {
    wx.switchTab({
      url: '/pages/message/message?name="ls"&age=22'
    })
  },
  goList() {
    wx.navigateTo({
      url: '/pages/list/list',
    })
  }
})

5.3. 在 onLoad 中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<navigator 
  class="navt" 
  url="/pages/list/list?name='zs'&age=12" 
  open-type="navigate" 
>跳转到list页面</navigator>

// pages/list/list.js
Page({
  data: {
    arr: [
      {id: 1, content: 'a'},
      {id: 2, content: 'b'},
      {id: 3, content: 'c'},
      {id: 4, content: 'd'},
      {id: 5, content: 'e'}
    ]
  },
  goBack() {
    wx.navigateBack({
      delta: 1
    })
  },
  onLoad( messageVal ) {
    console.log( messageVal )
  }
})