微信小程序页面跳转方法

文章目录


前言

微信小程序页面跳转的各种方法总结,备查。


方式一:wx.navigateTo

保留当前页面,跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头,点击后可返回原本页面。示例代码:

bash 复制代码
wx.navigateTo({
    url: '../carDetails/carDetails'
})
  • 使用场景

适用于需要跳转到新页面并保留原页面状态的情况,比如从列表页跳转到详情页。

  • 优点

可以保留原页面的状态,用户返回时可以继续操作。

  • 缺点

每次跳转都会创建新页面,可能会占用较多的内存资源。

方式二:wx.redirectTo

关闭当前页面,跳转到应用内的某个页面,不能跳转 tabbar 页面,跳转后左上角出现返回首页图标,点击后可返回首页面。示例代码:

bash 复制代码
wx.redirectTo({
  url: '../carDetails/carDetails'
})
  • 使用场景

适用于需要关闭当前页面并跳转到新页面的情况,比如登录成功后跳转到首页。

  • 优点

可以直接关闭当前页面,减少内存占用。

  • 缺点

无法保留原页面的状态,用户返回时会重新加载页面。

方式三:wx.reLaunch

关闭所有页面,打开应用内的某个页面,跳转后左上角出现返回首页图标,点击后可返回首页面。示例代码:

bash 复制代码
wx.reLaunch({
  url: '../carDetails/carDetails'
})
  • 使用场景

适用于需要关闭所有页面并打开新页面的情况,比如用户退出登录后跳转到登录页。

  • 优点

可以清空页面栈,减少内存占用。

  • 缺点

无法保留原页面的状态,用户返回时会重新加载页面。

方式四:wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,该方法只能跳转 tabbar 页面。 示例代码:

bash 复制代码
wx.switchTab({
  url: '../install/install'
})
  • 使用场景

适用于需要跳转到 tabBar 页面的情况,比如从其他页面跳转到首页。

  • 优点

可以直接跳转到 tabBar 页面,方便用户导航。

  • 缺点

无法保留原页面的状态,用户返回时会重新加载页面。

方式五:wxml中navigator标签跳转

通过设置 url 属性来指定跳转的目标页面。 示例代码:

bash 复制代码
<navigator url="../carDetails/carDetails"><button>我是A页面,点击跳转到B页面</button></navigator>
  • 使用场景

适用于需要在页面中添加跳转链接的情况,比如在列表页中点击某个项跳转到详情页。

  • 优点

使用简单,可以直接在页面中添加跳转链接。

  • 缺点

无法保留原页面的状态,用户返回时会重新加载页面。

  • 注意

<navigator> 组件只能跳转到小程序内的页面,无法跳转到外部链接。如果需要跳转到外部链接,可以使用 <a> 标签,并设置 open-type 属性为 navigate

页面回退

bash 复制代码
wx.navigateBack(Object object)
  • 功能描述

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。

  • wx.navigateBack的作用

wx.navigateBack函数是微信小程序提供的一个API接口,用于实现页面的跳转回退功能。具体来说,它可以用来回到历史记录中的上一个页面。

例如,在一个小程序中,用户从页面A跳转到页面B,此时在页面B中如果使用wx.navigateBack函数,则可以返回到页面A,即上一个页面。

  • wx.navigateBack的参数

wx.navigateBack函数支持传入一个参数,用来指定返回的页面数,即返回历史记录中的第几个页面。

例如,如果用户从页面A跳转到页面B,再从页面B跳转到页面C,此时在页面C中使用wx.navigateBack(2)函数,则可以返回到页面A,因为历史记录中的第2个页面就是页面A。

bash 复制代码
// 示例代码
wx.navigateBack({
  delta: 2
})
相关推荐
棋子一名1 小时前
跑马灯组件 Vue2/Vue3/uni-app/微信小程序
微信小程序·小程序·uni-app·vue·js
无衣 秦风2 小时前
vue3+hubuilderX开发微信小程序使用elliptic生成ECDH密钥对遇到的问题
微信小程序·小程序
游戏开发爱好者83 小时前
BShare HTTPS 集成与排查实战,从 SDK 接入到 iOS 真机调试(bshare https、签名、回调、抓包)
android·ios·小程序·https·uni-app·iphone·webview
2501_916008893 小时前
iOS 26 系统流畅度实战指南|流畅体验检测|滑动顺畅对比
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌4 小时前
陪诊就医小程序中健康档案的精细化管理设计方案
小程序
明天你好2674 小时前
如何做一个花店小程序,搭建一个小程序多少钱
微信小程序·小程序·模拟退火算法
2501_915106325 小时前
苹果软件加固与 iOS App 混淆完整指南,IPA 文件加密、无源码混淆与代码保护实战
android·ios·小程序·https·uni-app·iphone·webview
江城开朗的豌豆5 小时前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
2501_915921435 小时前
iOS 26 崩溃日志解析,新版系统下崩溃获取与诊断策略
android·ios·小程序·uni-app·cocoa·iphone·策略模式
江城开朗的豌豆6 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序