微信小程序里几乎每个项目都会用到页面跳转:列表进详情、活动入口进表单、底部标签切换,背后都是跳转在起作用。微信提供了几种不同的跳转方式,各有各的适用场景,选对了页面栈会更干净,交互也会更顺畅。

如果想把跳转直接写在页面结构里,比如首页上的固定入口、文章列表里的每一项,使用 navigator 组件会很直观。它的普通写法很简单:
<navigator url="/pages/secondPage/secondPage">跳转到第二个页面</navigator>
url 指定目标页面路径,不带 open-type 时默认会新开一个页面,用户点返回还能回到当前页。如果希望跳转后把当前页替换掉,可以加上 open-type="redirect":
<navigator url="/pages/secondPage/secondPage" open-type="redirect">重定向跳转</navigator>
这两种写法差异很明显:普通跳转保留当前页,重定向则关闭当前页再打开目标页。像登录成功后跳转首页,往往就适合用重定向,避免用户按返回又回到登录页。
实际业务里,跳转经常发生在点击事件之后,比如先校验数据、拼接参数,再决定要不要跳。这时用 JS 方式会更灵活。wx.navigateTo 对应普通跳转:
wx.navigateTo({
url: '/pages/secondPage/secondPage'
})

wx.redirectTo 则对应重定向:
wx.redirectTo({
url: '/pages/secondPage/secondPage'
})

它们与 navigator 组件在页面栈上的行为是一致的。不过需要留意的是,navigateTo 和 redirectTo 都不能直接打开 tabBar 页面,如果把底部导航页的路径写进 url,跳转会失败。这种时候得换一种方式。
wx.switchTab 就是专门处理 tabBar 页面跳转的:
wx.switchTab({
url: '/pages/secondPage/secondPage'
})
这里的 url 必须是已经在 app.json 的 tabBar.list 里配置过的页面,否则同样会跳转失败。和普通跳转不同,switchTab 会关闭当前打开的其他非 tabBar 页面,只保留目标 tab 页。因此它更适合做底部主导航切换,不适合用在详情页之间。另外,switchTab 不能像 navigateTo 那样在 url 后面直接拼 query 参数,tab 页之间要传数据,一般得通过全局状态或缓存来中转。

所以实际开发时不必所有跳转都用同一种。先看目标页面是不是 tabBar 页面,再判断这次跳转要不要保留当前页、用户是否需要返回,基本就能确定用 navigator / navigateTo,还是 redirectTo,或者 switchTab。把这几条规则理清,页面的进出逻辑会清楚很多,也不容易踩到小程序跳转的坑。
अभी लॉगिन करें