一、前言在微信小程序开发中页面是用户交互的最基本单元而导航则负责把多个页面串联成一个完整的应用。本文基于《开源框架应用》课程案例 3.1「创建页面和导航」完整记录了从零搭建一个包含 5 个页面、支持多种导航方式的小程序的过程并对相关 API 进行梳理便于初学者快速上手。二、开发环境微信开发者工具稳定版基础库版本2.32.0调试基础库建议 2.30.0 以上AppID可使用测试号或游客模式进行本地学习调试三、小程序项目结构一个小程序页面由四个文件组成它们具有相同的文件名、不同的扩展名文件作用.js页面逻辑.json页面配置.wxml页面结构.wxss页面样式本项目共创建 5 个页面整体目录结构如下3.1创建页面和导航/ ├── app.js // 小程序逻辑 ├── app.json // 全局配置 ├── app.wxss // 全局样式 ├── project.config.json // 项目配置 ├── sitemap.json // 站点地图 └── pages/ ├── home/ // 页面1首页TabBar ├── msg/ // 页面2消息TabBar ├── me/ // 页面3我的TabBar ├── detail/ // 页面4详情新增 └── about/ // 页面5关于新增其中home、msg、me三个页面为底部 TabBar 标签页detail和about为通过navigateTo跳转的普通页面。这样所有 5 个页面之间都可以相互跳转。四、全局配置 app.jsonapp.json是小程序的全局配置文件决定了页面注册顺序、窗口样式以及底部导航栏。本项目的配置如下{pages:[pages/home/home,pages/msg/msg,pages/me/me,pages/detail/detail,pages/about/about],window:{backgroundTextStyle:light,navigationBarBackgroundColor:#4A90D9,navigationBarTitleText:页面导航演示,navigationBarTextStyle:white,backgroundColor:#f5f6fa},tabBar:{color:#999999,selectedColor:#4A90D9,backgroundColor:#ffffff,borderStyle:black,list:[{pagePath:pages/home/home,text:首页},{pagePath:pages/msg/msg,text:消息},{pagePath:pages/me/me,text:我的}]},style:v2,sitemapLocation:sitemap.json}要点说明pages数组的第一项即为小程序启动后展示的首页。tabBar.list中的pagePath必须在pages中注册。当页面较多时TabBar 适合承载 2~5 个主要入口其余页面通过导航 API 进入。五、页面创建5.1 首页 home导航枢纽首页是整个应用的中枢集中展示了跳转到其他四个页面的入口并分别演示switchTab与navigateTo两种跳转方式。关键逻辑如下// 保留当前页跳转到非 TabBar 页详情、关于goToPage(e){constpathe.currentTarget.dataset.path wx.navigateTo({url:path,fail:(){wx.showToast({title:该页是TabBar页请用切换,icon:none})}})},// 切换 TabBar 页消息、我的switchTab(e){constpathe.currentTarget.dataset.path wx.switchTab({url:path})}首页 WXML 通过wx:for循环渲染跳转列表并根据页面类型动态绑定不同的事件函数viewclassnav-itemwx:for{{navList}}wx:keyiddata-path{{item.path}}data-type{{item.type}}bindtap{{item.type tab ? switchTab : goToPage}}viewclassnav-leftviewclassnav-name{{index 1}}. {{item.name}}/viewviewclassnav-desc{{item.desc}}/view/view/view5.2 消息页 msgTabBar消息页展示一个消息列表点击列表项携带参数跳转到详情页viewDetail(e){constide.currentTarget.dataset.id wx.navigateTo({url:/pages/detail/detail?idid})}5.3 我的页 meTabBar我的页提供用户信息卡片以及跳转到关于页、切换到其他 TabBar 页的入口演示navigateTo与switchTab的配合使用。5.4 详情页 detail新增页面详情页通过onLoad(options)接收上一页传递的参数并根据参数展示对应内容onLoad(options){constidoptions.id||0constdetailthis.data.detailMap[id]||this.data.defaultDetailthis.setData({id,detail})wx.setNavigationBarTitle({title:detail.title})}该页同时演示了navigateBack返回上一页goBack(){wx.navigateBack({delta:1})}5.5 关于页 about新增页面关于页罗列了本案例的功能要点并演示reLaunch重启应用reLaunchHome(){wx.reLaunch({url:/pages/home/home})}六、五大导航 API 对比小程序提供五个核心导航 API它们在页面栈处理方式上各有不同下表是实践中的总结API作用是否保留当前页是否可跳 TabBar 页wx.navigateTo保留当前页跳转到应用内某页是否wx.navigateBack关闭当前页返回上一页或多级——wx.redirectTo关闭当前页跳转到某页否否wx.switchTab跳转到 TabBar 页并关闭其它非 TabBar 页否是wx.reLaunch关闭所有页面重启到某页否是/否实践要点navigateTo跳转的目标不能是 TabBar 页否则会触发fail回调。本项目首页据此做了容错提示。页面栈最大深度为 10navigateTo连续跳转时需注意栈溢出。navigateBack的delta表示回退层数默认为 1。需要传参时在 URL 后拼接?keyvaluekey2value2目标页在onLoad(options)中接收。七、TabBar 配置要点tabBar.list最少 2 个、最多 5 个。每项必须包含pagePath与texticonPath、selectedIconPath可省略省略时仅显示文字。color为未选中文字颜色selectedColor为选中文字颜色。TabBar 页之间只能用switchTab跳转navigateTo会被拦截。八、运行效果启动小程序进入首页底部出现首页/消息/我的三个标签。点击底部标签可在三个 TabBar 页之间切换。点击首页的详情页关于页入口使用navigateTo进入对应页面。在消息页点击任意消息可携带 id 跳转到详情页并显示对应内容。在详情页/关于页点击返回上一页按钮使用navigateBack回退。九、总结本案例围绕页面创建与导航两个核心知识点构建了一个包含 5 个页面的小程序完整覆盖了navigateTo、navigateBack、redirectTo、switchTab、reLaunch五种导航方式以及页面间参数传递。通过本次实践可以体会到小程序的页面组织遵循四个同名文件一组的约定导航 API 的选择取决于是否需要保留页面栈、目标页是否为 TabBar 页。掌握这些规则后即可在后续复杂应用中灵活组织页面流转。