微信小程序的跳转方式

微信小程序的跳转方式

微信小程序的跳转方式确实有多种，每种都有其特定的使用场景和需要注意的地方。下面我用一个表格帮你快速了解这些跳转方式的核心特点，然后再详细说说它们怎么用。

跳转类型	核心特点	典型应用场景
内部页面跳转
wx.navigateTo	保留当前页面，跳转到新页面**（页面栈最多10层）**	多级页面导航，如商品列表→商品详情
wx.redirectTo	关闭当前页面，跳转到新页面	无需返回的场景，如登录页跳转到首页
wx.switchTab	跳转到 tabBar 页面，关闭所有非 tabBar 页面	切换底部的标签页
wx.reLaunch	关闭所有页面，打开到应用内的某个页面	清理页面栈并跳转，如用户退出登录后回到首页
wx.navigateBack	返回上一页面或多级页面	返回之前的操作步骤
跳转其他小程序
wx.navigateToMiniProgram	跳转到其他小程序	需要从A小程序跳转到B小程序
跳转外部网页
<web-view>组件	通过配置业务域名，在小程序内嵌入网页	展示已配置业务域名的网页内容
复制链接	自动复制链接到剪贴板，提示用户手动打开	跳转未配置业务域名的网页（如公司内网）

🧭 一、小程序内部页面跳转

小程序内部的页面跳转，主要依赖微信官方提供的 API 或 <navigator> 组件，并涉及一个重要的概念——页面栈。

1. 页面栈（Page Stack）：你可以把它想象成一个放盘子的架子。每调用一次 wx.navigateTo，就像往架子上放一个新盘子（新页面）。架子最多能放10个盘子（页面栈最多10层）。wx.redirectTo 则是用一个新盘子替换掉最顶上的盘子（当前页面），架子总数不变。wx.reLaunch 会把整个架子清空，然后放上一个新盘子。

2. API方式跳转：

   • wx.navigateTo({url: '/pages/detail/detail?id=123'}) 保留当前页面，跳转到新页面。新页面可通过 wx.navigateBack 返回。
   • wx.redirectTo({url: '/pages/home/home'}) 关闭当前页面，跳转到新页面。用户无法返回上一页。
   • wx.switchTab({url: '/pages/index/index'}) 专用于跳转到 tabBar 页面，并关闭所有非 tabBar 页面。
   • wx.reLaunch({url: '/pages/home/home'}) 关闭所有页面，打开到应用内的某个页面，即清空页面栈并跳转。
   • wx.navigateBack({delta: 2}) 返回上一页面或多级页面。delta 参数指定返回的层数，默认为1（返回上一页）。

3. <navigator> 组件方式跳转：
   在 .wxml