做微信小程序时,页面跳转看着很基础,却常常决定用户能不能顺顺当当地把流程走完。小程序可能从扫码、搜索或聊天入口进来,但真正进入应用之后,很多交互都落在页面切换上:从首页点进详情,从表单跳到结果页,再在几个 Tab 之间来回。写对 url 只是第一步,更重要的是想清楚这一跳之后,页面栈会怎样变化,返回按钮还能不能回到原来的位置,整条路径会不会变得绕。
如果入口是固定的,navigator 组件往往是最省事的写法。列表项、卡片、按钮,本身就是一块可点击区域,用组件承载跳转语义很自然。在 wxml 里写 <navigator url="/pages/secondPage/secondPage">进入第二页</navigator>,用户点击后就会跳到目标页。如果想让这次跳转更像“替换当前页”,可以把 open-type 改成 redirect,例如 <navigator url="/pages/secondPage/secondPage" open-type="redirect">重定向进入</navigator>。这种写法适合一次性入口,用户点完以后,通常不需要再回到上一屏。

当跳转时机需要由代码判断时,API 会灵活很多。wx.navigateTo({ url: '/pages/secondPage/secondPage' }) 是最常见的方式。它会保留当前页面,把新页面压进页面栈,所以用户看完还能返回。详情页通常比较适合这种模式:用户从列表点进去,看完后应该能回到刚才的位置。不过页面栈不是无限长的,连续多层 navigateTo 会让返回路径越来越深。如果中间页已经没有意义,再让用户一层层退回去,体验就会显得笨拙。
这时候可以考虑 wx.redirectTo({ url: '/pages/secondPage/secondPage' })。它会关闭当前页面,再打开新页面,相当于把这一跳替换掉。登录成功、授权完成、活动落地页加载结束,都是比较典型的场景。既然旧页面已经完成了使命,就没有必要留在栈里。返回时不再回到那一页,流程也更顺。需要注意的是,redirectTo 不适合跳 Tab 页,也不适合还需要保留当前现场的情况。
如果目标页正好是底部导航里的 Tab,那就更明确了:用 wx.switchTab({ url: '/pages/secondPage/secondPage' })。Tab 页通常已经在 app.json 里配置好,url 必须指向这些已注册页面,不能用普通页路径随便代替。另一个容易踩坑的地方是参数传递。普通页面跳转可以通过 url 带 query,Tab 页却通常不太适合依赖这种方式。很多项目会把要传递的状态先放到本地存储、全局变量或接口返回里,等切换 Tab 后再读取。这样写起来稍微绕一点,但比反复排查“参数怎么没过去”要稳定得多。

所以面对页面跳转,其实要做的不是背几个方法名,而是先分清页面之间的关系。只是查看内容、需要保留上下文,navigateTo 更合适;已经完成一个阶段、不想让用户回退,redirectTo 更干脆;目标是底部 Tab,就用 switchTab;静态入口则可以直接交给 navigator。再配合 fail 回调处理路径错误,基本就能覆盖大多数日常场景。跳转写得顺不顺,最后往往体现在一个很具体的地方:用户有没有被莫名其妙地带走,返回时还能不能回到该回的地方。
今すぐログイン