第5次课 - 多页面导航与tabBar配置 - 微信小程序开发实战

1

教学目标

掌握小程序页面导航的两种方式
理解tabBar的配置与使用
掌握页面间参数传递的方法
能够实现多页面应用
案例：案例2-3 婚礼邀请函

2

重点、难点与课时分配

◎

教学重点

页面导航、tabBar配置、页面传参

△

教学难点

页面栈管理、传参编码解码

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

导航与传参讲解 1 学时，案例 2-3 婚礼邀请函实操 2 学时

3

课件要点

页面导航方式

声明式导航: <navigator url="/pages/xxx">跳转</navigator>

编程式导航: wx.navigateTo / wx.redirectTo / wx.switchTab

wx.navigateTo — 保留当前页, 可返回(最多10层)

wx.redirectTo — 关闭当前页, 不可返回

wx.switchTab — 跳转tabBar页面, 关闭其他所有页面

tabBar配置

在app.json中配置tabBar节点

list数组: 最少2个, 最多5个tab

每个tab: pagePath / text / iconPath / selectedIconPath

color / selectedColor / backgroundColor 样式配置

position: bottom(默认) 或 top

页面传参

路径传参: /pages/detail?id=1&name=test

接收参数: onLoad(options) 中获取 options.id

编码: encodeURIComponent() 处理特殊字符

全局变量: getApp().globalData 共享数据

缓存传参: wx.setStorageSync / wx.getStorageSync

案例2-3 婚礼邀请函

使用tabBar实现首页/照片/故事/祝福4个页面

使用navigator实现页面跳转

使用路径传参传递照片/故事详情

自定义tabBar图标与样式

综合运用导航与传参完成婚礼邀请函

4

代码示例与讲解

页面导航方式

                navigate.js
                导航方式对比
              
1// 方式一：声明式导航 navigator
2<!-- 保留当前页，跳转到非tabBar页 -->
3<navigator url="/pages/detail/detail?id=1">
4  查看详情
5</navigator>
6
7<!-- 关闭当前页，重定向 -->
8<navigator url="/pages/login/login" open-type="redirect">
9  去登录
10</navigator>
11
12<!-- 跳转到 tabBar 页 -->
13<navigator url="/pages/index/index" open-type="switchTab">
14  回首页
15</navigator>
16
17// 方式二：编程式导航 wx API
18// 保留当前页，可返回（最多10层）
19wx.navigateTo({
20  url: '/pages/detail/detail?id=1'
21})
22
23// 关闭当前页，不可返回
24wx.redirectTo({
25  url: '/pages/login/login'
26})
27
28// 跳转到 tabBar 页（关闭所有非tabBar页）
29wx.switchTab({
30  url: '/pages/index/index'
31})
32
33// 返回上一页（默认delta=1）
34wx.navigateBack({ delta: 1 })
35
36// ⚠️ navigateTo 最多10层页面栈
37// tabBar 页只能用 switchTab 跳转

页面导航分声明式（navigator组件）和编程式（wx API）两种。核心区别：navigateTo保留当前页可返回，最多10层；redirectTo关闭当前页不可返回；switchTab跳转tabBar页，会关闭所有非tabBar页。注意tabBar页面只能用switchTab跳转，不能用navigateTo。

tabBar配置详解

                app.json
                tabBar效果预览
              
1{
"pages": [
  "pages/home/home",
  "pages/message/message",
  "pages/contact/contact"
],
7
"tabBar": {
  "color": "#999",
  "selectedColor": "#07c160",
  "backgroundColor": "#fff",
  "borderStyle": "black",
  "position": "bottom",
14
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "images/msg.png",
      "selectedIconPath": "images/msg-active.png"
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系",
      "iconPath": "images/contact.png",
      "selectedIconPath": "images/contact-active.png"
    }
  ]
}
36}
37
38// ⚠️ tabBar 配置规则
39list 最少 2 个，最多 5 个
40pagePath 必须在 pages 中已声明
41图标仅支持本地图片，建议 81×81px
42tabBar 页面不会触发 onUnload

tabBar在app.json中配置，list数组最少2项最多5项。每项必须包含pagePath、text、iconPath和selectedIconPath。全局样式属性：color未选中文字颜色、selectedColor选中文字颜色、backgroundColor背景色。注意pagePath必须在pages数组中已声明，图标只支持本地图片建议81×81px，tabBar页面不会触发onUnload。

页面传参三种方式

                params.js
                传参方式对比
              
1// 方式一：URL 参数传递
2
3// 发送方：URL 拼接参数
4wx.navigateTo({
5  url: '/pages/detail/detail?id=1&name=张三'
6})
7
8// 接收方：onLoad 的 options 参数
9Page({
10  onLoad(options) {
11    console.log(options.id)    // "1"
12    console.log(options.name)  // "张三"
13  }
14})
15
16// 方式二：globalData 全局数据
17
18// app.js 中定义
19App({
20  globalData: { token: '', userInfo: null }
21})
22
23// 页面中读取
24const app = getApp()
25console.log(app.globalData.userInfo)
26
27// 方式三：本地缓存 Storage
28
29// 存储数据
30wx.setStorageSync('token', 'abc123')
31
32// 读取数据
33const token = wx.getStorageSync('token')
34
35// 清除数据
36wx.removeStorageSync('token')
37
38// ⚠️ 三种方式对比
39URL参数：简单页面间传值，仅onLoad可接收
40globalData：全局共享数据，小程序运行期间有效
41Storage：持久化存储，关闭小程序后仍存在

页面传参有三种方式：URL参数最简单，通过navigateTo的url拼接参数，在目标页onLoad(options)接收，但仅限onLoad；globalData在App中定义全局数据，任意页面通过getApp()读取，小程序运行期间有效；Storage本地缓存，关闭小程序后仍存在，适合存储登录态等持久化数据。

案例2-3 婚礼邀请函

                wedding.wxml
                婚礼邀请函效果
              
1<!-- 案例2-3：婚礼邀请函 -->
2<!-- app.json tabBar 配置 -->
3{
4  "pages": [
5    "pages/home/home",
6    "pages/photo/photo",
7    "pages/map/map"
8  ],
9  "tabBar": {
10    "color": "#999",
11    "selectedColor": "#e91e63",
12    "list": [
13      { "pagePath": "pages/home/home", "text": "邀请" },
14      { "pagePath": "pages/photo/photo", "text": "相册" },
15      { "pagePath": "pages/map/map", "text": "导航" }
16    ]
17  }
18}
19
20<!-- home.wxml 邀请页 -->
21<view class="invite">
22  <image src="{{coverImg}}" mode="aspectFill" />
23  <view class="title">{{groom}} & {{bride}}</view>
24  <view class="date">{{date}}</view>
25
26  <!-- 带参数跳转到相册详情 -->
27  <navigator
28    url="/pages/photo/photo?albumId={{albumId}}"
29    open-type="switchTab">
30    查看相册
31  </navigator>
32
33  <!-- 跳转到地图导航 -->
34  <navigator
35    url="/pages/map/map"
36    open-type="switchTab">
37    宴会导航
38  </navigator>
39</view>
40
41// home.js 数据与传参
42Page({
43  data: {
44    coverImg: "/images/cover.jpg",
45    groom: "小明",
46    bride: "小红",
47    date: "2025年10月1日",
48    albumId: "wedding2025"
49  }
50})

案例2-3婚礼邀请函综合运用了本课知识点：tabBar配置实现邀请、相册、导航三个底部标签页；navigator声明式导航配合open-type="switchTab"跳转tabBar页；URL参数传递将albumId传到相册页；{{}}数据绑定显示新郎新娘姓名和婚期。这是一个典型的多页面小程序结构。

5

课件预览与下载