小程序页面跳转是开发中最基础也最容易出错的功能之一。很多新手在写跳转代码时，会遇到页面白屏、路径报错、参数丢失等问题。本教程将从零开始，手把手教你掌握微信小程序中所有类型的页面跳转写法，包括普通跳转、Tab切换、带参数跳转以及返回操作，确保每一步都能直接运行。
---
# 前置准备
1. 安装微信开发者工具（建议使用稳定版），并登录微信账号。
2. 创建一个新的小程序项目，选择“不使用云服务”，模板选择“JavaScript-基础模板”。
3. 在项目根目录下的 `app.json` 文件中，配置至少两个页面路径。例如：
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/detail/detail"
],
"window": { ... }
}
```
确保 `pages` 数组中有三个页面路径，后续操作会用到。
4. 如果需要进行 Tab 跳转测试，在 `app.json` 中添加 `tabBar` 配置，至少包含两个 Tab 页面，例如：
```json
"tabBar": {
"list": [
{"pagePath": "pages/index/index", "text": "首页"},
{"pagePath": "pages/logs/logs", "text": "日志"}
]
}
```
5. 在 `pages` 文件夹下创建 `detail` 页面文件夹，并生成四个基本文件（`.wxml`、`.wxss`、`.js`、`.json`）。如果使用开发者工具，直接右键 `pages` 文件夹选择“新建页面”并命名为 `detail` 即可。
---
# 分步操作步骤
## 1. 编写基础页面跳转（wx.navigateTo）
`wx.navigateTo` 是最常用的跳转方式，它会保留当前页面，跳转到应用内的某个页面，并可以返回。
1. 打开 `pages/index/index.wxml`，在 `
```html
```
2. 打开 `pages/index/index.js`，在 `Page` 对象的 `data` 下方添加 `goToDetail` 方法：
```javascript
Page({
data: { },
goToDetail: function() {
wx.navigateTo({
url: '/pages/detail/detail'
});
}
})
```
**注意**：`url` 必须以 `/` 开头，表示从项目根目录开始定位，否则会报路径错误。
3. 点击工具栏中的“编译”按钮，在模拟器中点击“跳转到详情页”按钮，观察页面是否跳转到 `detail` 页面，并且左上角出现返回箭头。
4. 如果跳转后页面白屏，请检查 `detail` 页面的 `.wxml` 文件是否包含内容。至少写入：
```html
```
## 2. 编写带参数的页面跳转
很多时候需要在跳转时携带数据，例如用户ID、文章ID等。
1. 修改 `pages/index/index.wxml` 中的按钮，增加一个输入框用于演示传参：
```html
```
2. 在 `pages/index/index.js` 的 `data` 中添加一个变量用于存储输入值：
```javascript
data: {
inputId: ''
},
onInput: function(e) {
this.setData({
inputId: e.detail.value
});
}
```
3. 添加带参数的跳转方法：
```javascript
goToDetailWithParam: function() {
var id = this.data.inputId || 'default';
wx.navigateTo({
url: '/pages/detail/detail?id=' + id
});
}
```
**注意**：参数直接拼接在 `url` 后面，格式为 `?key=value`，多个参数用 `&` 连接，例如 `?id=123&name=test`。
4. 在 `pages/detail/detail.js` 的 `onLoad` 生命周期函数中接收参数：
```javascript
Page({
onLoad: function(options) {
console.log('接收到的参数：', options);
this.setData({
receivedId: options.id
});
},
data: {
receivedId: ''
}
})
```
5. 在 `pages/detail/detail.wxml` 中显示接收到的参数：
```html
```
6. 重新编译，在输入框中输入任意数字，点击“带参数跳转”按钮，详情页应显示你输入的内容。
## 3. 编写Tab页面跳转（wx.switchTab）
如果目标页面是 `app.json` 中 `tabBar` 配置的页面，必须使用 `wx.switchTab`，否则跳转无效。
1. 在 `pages/index/index.wxml` 中添加一个按钮：
```html
```
2. 在 `pages/index/index.js` 中添加方法：
```javascript
goToLogsTab: function() {
wx.switchTab({
url: '/pages/logs/logs'
});
}
```
**关键点**：`url` 必须指向 `tabBar` 中定义的 `pagePath`，且不能携带参数。如果尝试传参，参数会被忽略。
3. 点击按钮，观察页面是否切换到“日志”Tab，并且底部Tab栏高亮状态改变。
4. 如果需要从Tab页面跳转到非Tab页面，可以混合使用 `wx.navigateTo`，但注意从Tab页面跳转后，底部Tab栏会隐藏，返回时需要手动调用返回方法。
## 4. 编写页面重定向（wx.redirectTo）与返回操作
`wx.redirectTo` 会关闭当前页面，跳转到新页面，用户无法通过返回按钮回到原页面。常用于登录后跳转或表单提交后跳转。
1. 在 `pages/index/index.wxml` 添加按钮：
```html
```
2. 在 `pages/index/index.js` 添加方法：
```javascript
redirectToDetail: function() {
wx.redirectTo({
url: '/pages/detail/detail?from=redirect'
});
}
```
3. 点击按钮，观察页面跳转后，左上角没有返回箭头，因为当前页面已被替换。
4. 编写返回上一页操作。在 `pages/detail/detail.wxml` 添加返回按钮：
```html
```
5. 在 `pages/detail/detail.js` 中添加返回方法：
```javascript
goBack: function() {
wx.navigateBack({
delta: 1 // 返回的页面数，1表示上一页
});
}
```
**注意**：如果当前页面是通过 `wx.redirectTo` 进入的，`wx.navigateBack` 会返回到重定向前的那一页。如果 `delta` 值大于历史栈中的页面数，则返回到首页。
6. 也可以使用 `wx.navigateBack({ delta: 2 })` 返回上两页，但需要确保历史栈中有足够页面。
---
# 常见问题
**问题1：跳转后页面白屏，没有任何内容**
原因：目标页面的 `.wxml` 文件为空，或者 `.js` 文件中有语法错误导致页面渲染失败。
解决：检查目标页面所有文件是否存在且内容正确。在开发者工具的控制台中查看是否有红色报错信息。最常见的错误是 `Page` 函数未正确调用或 `data` 格式错误。
**问题2：使用 `wx.navigateTo` 跳转Tab页面时无反应**
原因：Tab页面必须使用 `wx.switchTab` 跳转，`wx.navigateTo` 对Tab页面无效。
解决：将跳转方法改为 `wx.switchTab`。注意 `switchTab` 不能传参。
**问题3：跳转时传递的参数在目标页面接收为 `undefined`**
原因：参数拼接错误，或者参数值中包含特殊字符（如 `&`、`?`、`#`）未编码。
解决：使用 `encodeURIComponent` 对参数值进行编码：
```javascript
var encodedValue = encodeURIComponent(this.data.inputId);
wx.navigateTo({
url: '/pages/detail/detail?id=' + encodedValue
});
```
在目标页面使用 `decodeURIComponent` 解码：
```javascript
var rawId = decodeURIComponent(options.id);
```
**问题4：点击返回按钮后页面无反应**
原因：当前页面是历史栈中的第一个页面，或者 `delta` 值设置过大。
解决：使用 `wx.navigateBack` 前，先通过 `getCurrentPages()` 获取当前页面栈的信息：
```javascript
var pages = getCurrentPages();
console.log('当前页面栈长度：', pages.length);
```
根据实际栈长度设置 `delta` 值，通常设为 `1` 即可。
**问题5：跳转后底部Tab栏消失**
原因：从Tab页面使用 `wx.navigateTo` 跳转到非Tab页面时，Tab栏会隐藏。
解决：如果希望保留Tab栏，可以考虑将目标页面也设置为Tab页面，或者使用自定义Tab组件。如果必须隐藏Tab栏，这是正常行为，用户可以通过返回按钮回到Tab页面。
---
# 收尾总结
本教程覆盖了微信小程序中最核心的四种页面跳转方式：`wx.navigateTo` 用于普通跳转并保留当前页，`wx.switchTab` 专用于Tab页面切换，`wx.redirectTo` 用于关闭当前页跳转，`wx.navigateBack` 用于返回。同时，通过参数传递和接收的实操，你已经掌握了页面间数据通信的基本方法。
在实际开发中，建议优先使用 `wx.navigateTo` 进行页面跳转，因为它保留页面栈，用户体验更自然。当需要跳转到Tab页时，务必使用 `wx.switchTab`。对于登录、支付完成等场景，使用 `wx.redirectTo` 避免用户误返回。参数传递时，养成使用 `encodeURIComponent` 编码的习惯，可以避免很多隐蔽的bug。
现在，你可以打开自己的小程序项目，将这些跳转方法应用到实际页面中。如果遇到任何跳转异常，先检查路径是否以 `/` 开头，再确认跳转方式是否匹配页面类型，最后查看控制台报错信息。多写几次，这些代码就会变成肌肉记忆。