小程序----页面导航

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

1. 什么是页面导航

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

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

  1. <a> 链接
  2. location.href

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

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

3. 声明式导航

3.1. 导航到 tabBar 页面

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

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

  1. url 表示要跳转的页面的地址,必须以 / 开头
  2. 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 属性,其中:

  1. url 表示要跳转的页面的地址,必须以 / 开头
  2. 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 属性,其中:

  1. open-type 的值必须是 navigateBack,表示要进行后退导航
  2. 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 属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:

  1. 参数与路径之间使用 ? 分隔
  2. 参数键与参数值用 = 相连
  3. 不同参数用 & 分隔
<!--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 )
  }
})

相关文章
|
13天前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
29 1
|
2月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
3月前
|
小程序
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
|
3月前
|
缓存 小程序 数据库
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
181 63
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 前端开发 生物认证
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
172 5
|
2月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
3月前
|
小程序 开发者
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
|
3月前
|
存储 小程序 物联网
园区导航小程序:轻量级设计,打造高效智慧园区
随着园区的规模不断扩大,功能区划分日益复杂,导致访客和新员工在没有有效导航的情况下容易迷路。传统APP导航虽能解决部分问题,但其下载安装繁琐、占用手机内存大、且非高频使用导致的闲置,让许多用户望而却步。园区导航小程序的出现,以其无需下载、即用即走的特性,为访客提供一个便捷、高效的导航体验。
96 0
园区导航小程序:轻量级设计,打造高效智慧园区
|
4月前
|
小程序
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异