微信小程序之页面跳转

1、wx.navigateTo( ):

  • 功能:保留当前页面,跳转到应用内的某个页面。
  • 特点:跳转后原页面保留在后台,可以通过wx.navigateBack()返回到原页面,新页面显示在原页面之上,有返回按钮。
javascript 复制代码
wx.navigateTo({
  url: '/pages/otherPage/otherPage' // 跳转到名为 otherPage 的页面
})

2、wx.redirectTo( ):

  • 功能:关闭当前页面,跳转到应用内的另一个页面。
  • 特点:跳转后原页面被关闭,新的页面没有默认的返回按钮,若需返回需要自行编程实现。
javascript 复制代码
wx.redirectTo({
  url: '/pages/newPage/newPage' // 跳转到名为 newPage 的页面,关闭当前页面
})

3、wx.switchTab( ):(假设我们要切换到 tabBar 中的 index 页面)

  • 功能:跳转到 tabBar 页面,同时关闭其他所有非 tabBar 页面。
  • 特点:常用于切换至底部导航栏对应的页面。
javascript 复制代码
wx.switchTab({
  url: '/pages/index/index' // 跳转到 tabBar 中的 index 页面
})

4、wx.navigateBack( ):

  • 功能:关闭当前页面,回退到上一页面或多级页面。
  • 特点:不是直接跳转到其他页面,而是根据页面栈返回到之前的页面
javascript 复制代码
wx.navigateBack() // 返回上一个页面

// 或者指定返回的层数
wx.navigateBack({
  delta: 2 // 返回两层页面
})

5、wx.reLaunch( ):

  • 功能:关闭所有页面,打开到应用内的某个页面。
  • 特点:清空所有历史栈并跳转到指定页面,通常用于启动页或者需要重新加载的应用首页。
javascript 复制代码
wx.reLaunch({
  url: '/pages/home/home' // 重启并跳转到 home 页面,清除所有页面栈
})
相关推荐
whinc7 小时前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
Lupino10 小时前
烧掉 10 刀 API 费,我才明白小程序虚拟列表根本不用“库”!
react.js·微信小程序
小溪彼岸2 天前
是时候给想做小程序的小伙伴泼盆冷水了
微信小程序
远山枫谷2 天前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
木易士心3 天前
一文读懂:微信小程序云数据库直连原理与使用指南
微信小程序·serverless
明月_清风4 天前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
拉不动的猪4 天前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
WangHappy6 天前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端7 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker7 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序