微信小程序怎么实现页面跳转

微信小程序是跑在微信里的轻量应用，扫码或搜索一下就能进入，用完即走，不必装到手机上。可只要小程序的页面不止一个，跳转就成了绕不开的功能——首页进详情、列表页跳编辑页、底部Tab来回切换，页面之间的流转全靠它来完成。



最直接的跳转方式，是在wxml里用navigator组件。这是一种声明式写法：组件写在哪里，哪里就成了一块可点击的区域：

<navigator url="/pages/secondPage/secondPage">跳转到第二个页面</navigator>

url属性填的是目标页面路径，上面这段代码指向/pages/secondPage/secondPage，点一下文字就能跳过去。

不过按默认方式跳转，页面会一层层往里叠。如果不想要这种效果，可以给组件加上open-type属性，设成redirect，改成重定向：

<navigator url="/pages/secondPage/secondPage" open-type="redirect">重定向跳转</navigator>

redirect的语义是先关掉当前页、再打开新页，用户按返回时回不到刚才那一页。做表单类流程时，这个细节格外好用——提交成功后跳到结果页，总不能再让人“返回”到已经填过的表单上吧。

除了在wxml里声明，更常见的做法是把跳转写进js逻辑，也就是在点击事件中调用API。拿wx.navigateTo来说：

wx.navigateTo({

  url: '/pages/secondPage/secondPage'

})

url参数同样指定跳转目标，效果与navigator组件的默认行为一致——保留当前页，进入新页，用户可以一路返回。想换成重定向，把API换成wx.redirectTo即可：

wx.redirectTo({

  url: '/pages/secondPage/secondPage'

})

两种写法怎么选？如果跳不跳、跳到哪里，在搭页面的时候就已经确定，用组件写起来更直观；但如果得先做判断——比如校验登录状态，或者按不同条件分发到不同页面——那就只能在逻辑代码里调API了。



还有一类页面比较特殊：Tab页。它没法用navigateTo打开，微信会直接报错，正确的调用是wx.switchTab：

wx.switchTab({

  url: '/pages/secondPage/secondPage'

})

这里有个前提必须记牢：switchTab的目标一定要是Tab页，也就是在app.json里配置过的那些。普通页面传给它不会生效；反过来，Tab页也不能被navigateTo打开。不少人踩的第一个坑就在这儿——代码看着哪儿都没毛病，跳转却死活不动，多半是拿Tab页去调了navigateTo。

回头看，小程序的页面跳转入口虽然多，分工其实很清楚：navigator组件负责声明式跳转，wx.navigateTo和wx.redirectTo负责逻辑层的控制，wx.switchTab专门对接Tab页。真正决定用哪个的，是业务本身——需不需要保留返回路径、目标页在不在TabBar里、跳转是写死在界面上还是得动态判断。把这些关系理顺，用户在小程序里来回穿梭时，体验自然就流畅了。