小程序页面跳转是开发中最基础也最容易出错的功能之一。很多新手在写跳转代码时，会遇到页面白屏、路径报错、参数丢失等问题。本教程将从零开始，手把手教你掌握微信小程序中所有类型的页面跳转写法，包括普通跳转、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 接收到的ID：{{receivedId}} ``` 6. 重新编译，在输入框中输入任意数字，点击“带参数跳转”按钮，详情页应显示你输入的内容。 ## 3. 编写Tab页面跳转（wx.switchTab） 如果目标页面是 `app.json` 中 `tabBar` 配置的页面，必须使用 `wx.switchTab`，否则跳转无效。 1. 在 `pages/index/index.wxml` 中添加一个按钮： ```html 跳转到日志Tab ``` 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。 现在，你可以打开自己的小程序项目，将这些跳转方法应用到实际页面中。如果遇到任何跳转异常，先检查路径是否以 `/` 开头，再确认跳转方式是否匹配页面类型，最后查看控制台报错信息。多写几次，这些代码就会变成肌肉记忆。