企业官网建设流程全解析

一、前言

在微信小程序开发中，"页面"是用户交互的最基本单元，而"导航"则负责把多个页面串联成一个完整的应用。本文基于《开源框架应用》课程案例 3.1「创建页面和导航」，完整记录了从零搭建一个包含 5 个页面、支持多种导航方式的小程序的过程，并对相关 API 进行梳理，便于初学者快速上手。

二、开发环境

• 微信开发者工具（稳定版）
• 基础库版本：2.32.0
• 调试基础库：建议 2.30.0 以上
• AppID：可使用"测试号"或"游客模式"进行本地学习调试

三、小程序项目结构

一个小程序页面由四个文件组成，它们具有相同的文件名、不同的扩展名：

本项目共创建 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.json

app.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){constpath=e.currentTarget.dataset.path wx.navigateTo({url:path,fail:()=>{wx.showToast({title:'该页是TabBar页，请用切换',icon:'none'})}})},// 切换 TabBar 页（消息、我的）switchTab(e){constpath=e.currentTarget.dataset.path wx.switchTab({url:path})}

首页 WXML 通过wx:for循环渲染跳转列表，并根据页面类型动态绑定不同的事件函数：

<viewclass="nav-item"wx:for="{{navList}}"wx:key="id"data-path="{{item.path}}"data-type="{{item.type}}"bindtap="{{item.type === 'tab' ? 'switchTab' : 'goToPage'}}"><viewclass="nav-left"><viewclass="nav-name">{{index + 1}}. {{item.name}}</view><viewclass="nav-desc">{{item.desc}}</view></view></view>

5.2 消息页 msg（TabBar）

消息页展示一个消息列表，点击列表项携带参数跳转到详情页：

viewDetail(e){constid=e.currentTarget.dataset.id wx.navigateTo({url:'/pages/detail/detail?id='+id})}

5.3 我的页 me（TabBar）

我的页提供用户信息卡片以及跳转到关于页、切换到其他 TabBar 页的入口，演示navigateTo与switchTab的配合使用。

5.4 详情页 detail（新增页面）

详情页通过onLoad(options)接收上一页传递的参数，并根据参数展示对应内容：

onLoad(options){constid=options.id||0constdetail=this.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，它们在页面栈处理方式上各有不同，下表是实践中的总结：

实践要点：

1. navigateTo跳转的目标不能是 TabBar 页，否则会触发fail回调。本项目首页据此做了容错提示。
2. 页面栈最大深度为 10，navigateTo连续跳转时需注意栈溢出。
3. navigateBack的delta表示回退层数，默认为 1。
4. 需要传参时，在 URL 后拼接?key=value&key2=value2，目标页在onLoad(options)中接收。

七、TabBar 配置要点

• tabBar.list最少 2 个、最多 5 个。
• 每项必须包含pagePath与text；iconPath、selectedIconPath可省略（省略时仅显示文字）。
• color为未选中文字颜色，selectedColor为选中文字颜色。
• TabBar 页之间只能用switchTab跳转，navigateTo会被拦截。

八、运行效果

1. 启动小程序进入首页，底部出现"首页/消息/我的"三个标签。
2. 点击底部标签可在三个 TabBar 页之间切换。
3. 点击首页的"详情页""关于页"入口，使用navigateTo进入对应页面。
4. 在消息页点击任意消息，可携带 id 跳转到详情页并显示对应内容。
5. 在详情页/关于页点击"返回上一页"按钮，使用navigateBack回退。

九、总结

本案例围绕"页面创建"与"导航"两个核心知识点，构建了一个包含 5 个页面的小程序，完整覆盖了navigateTo、navigateBack、redirectTo、switchTab、reLaunch五种导航方式以及页面间参数传递。通过本次实践可以体会到：小程序的页面组织遵循"四个同名文件一组"的约定，导航 API 的选择取决于是否需要保留页面栈、目标页是否为 TabBar 页。掌握这些规则后，即可在后续复杂应用中灵活组织页面流转。