微信小程序中常见的 跳转方式 及其特点的表格总结(wx.navigateTo 适合需要返回上一页的场景)

news2025/5/26 7:54:06

文章目录

      • 详细说明
      • 总结
      • `wx.navigateTo` 的特点
      • 为什么 `wx.navigateTo` 最常用?
      • 其他跳转方式的使用频率
      • 总结

以下是微信小程序中常见的跳转方式及其特点的表格总结:

跳转方式API 方法特点适用场景
wx.navigateTowx.navigateTo({ url: '路径' })保留当前页面,跳转到新页面(非 tabBar 页面)。最多支持 10 层页面栈。用于跳转到非 tabBar 页面,且需要返回上一页的场景。
wx.redirectTowx.redirectTo({ url: '路径' })关闭当前页面,跳转到新页面(非 tabBar 页面)。用于不需要返回当前页面的场景,如登录后跳转到主页。
wx.switchTabwx.switchTab({ url: '路径' })跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。用于切换到 tabBar 页面的场景。
wx.reLaunchwx.reLaunch({ url: '路径' })关闭所有页面,跳转到新页面(可以是 tabBar 或非 tabBar 页面)。用于重置应用状态并跳转到新页面的场景,如退出登录后跳转到登录页。
wx.navigateBackwx.navigateBack({ delta: 1 })返回上一页面或多层页面,delta 参数指定返回的层数。用于返回上一页或多层页面的场景。
wx.navigateToMiniProgramwx.navigateToMiniProgram({ appId: '目标小程序appId' })跳转到其他小程序。用于跳转到其他小程序的场景。
wx.navigateBackMiniProgramwx.navigateBackMiniProgram()从其他小程序返回到当前小程序。用于从其他小程序返回当前小程序的场景。

详细说明

  1. wx.navigateTo

    • 特点:保留当前页面,跳转到新页面。
    • 限制:最多只能打开 10 层页面栈。
    • 示例
      wx.navigateTo({
        url: '/pages/detail/detail?id=123'
      });
      
  2. wx.redirectTo

    • 特点:关闭当前页面,跳转到新页面。
    • 限制:不能跳转到 tabBar 页面。
    • 示例
      wx.redirectTo({
        url: '/pages/index/index'
      });
      
  3. wx.switchTab

    • 特点:跳转到 tabBar 页面,并关闭其他非 tabBar 页面。
    • 限制:只能跳转到 tabBar 页面。
    • 示例
      wx.switchTab({
        url: '/pages/home/home'
      });
      
  4. wx.reLaunch

    • 特点:关闭所有页面,跳转到新页面。
    • 限制:无。
    • 示例
      wx.reLaunch({
        url: '/pages/login/login'
      });
      
  5. wx.navigateBack

    • 特点:返回上一页面或多层页面。
    • 参数delta 指定返回的层数,默认为 1。
    • 示例
      wx.navigateBack({
        delta: 1 // 返回上一页
      });
      
  6. wx.navigateToMiniProgram

    • 特点:跳转到其他小程序。
    • 限制:需要目标小程序的 appId,且需要用户授权。
    • 示例
      wx.navigateToMiniProgram({
        appId: '目标小程序的appId',
        path: '目标小程序的路径'
      });
      
  7. wx.navigateBackMiniProgram

    • 特点:从其他小程序返回到当前小程序。
    • 示例
      wx.navigateBackMiniProgram();
      

总结

微信小程序提供了多种跳转方式,适用于不同的场景:

  • 页面内跳转wx.navigateTowx.redirectTowx.reLaunch
  • tabBar 跳转wx.switchTab
  • 返回上一页wx.navigateBack
  • 跳转到其他小程序wx.navigateToMiniProgramwx.navigateBackMiniProgram

根据具体需求选择合适的跳转方式,可以提升用户体验和开发效率。


在微信小程序开发中,wx.navigateTo 是使用最频繁的跳转方式。以下是它的特点和使用场景,以及为什么它是最常用的:


wx.navigateTo 的特点

  1. 保留当前页面

    • 跳转到新页面时,当前页面会被保留在页面栈中,用户可以通过返回按钮回到上一页。
    • 适合需要返回上一页的场景。
  2. 支持传递参数

    • 可以通过 URL 传递参数到目标页面,例如:
      wx.navigateTo({
        url: '/pages/detail/detail?id=123&name=foo'
      });
      
    • 目标页面可以通过 onLoad 生命周期函数接收参数:
      Page({
        onLoad(query) {
          console.log(query.id); // 输出 123
          console.log(query.name); // 输出 foo
        }
      });
      
  3. 适用于非 tabBar 页面

    • wx.navigateTo 只能跳转到非 tabBar 页面,而 tabBar 页面通常使用 wx.switchTab
  4. 页面栈限制

    • 最多只能打开 10 层页面栈。如果超过 10 层,需要先关闭一些页面。

为什么 wx.navigateTo 最常用?

  1. 符合用户习惯

    • 用户通常期望通过返回按钮回到上一页,而 wx.navigateTo 正好满足这一需求。
  2. 灵活性高

    • 支持传递参数,适合大多数页面跳转场景。
    • 可以跳转到任意非 tabBar 页面。
  3. 开发便捷

    • 代码简单易用,适合快速开发。
  4. 适用场景广泛

    • 例如:
      • 从列表页跳转到详情页。
      • 从表单页跳转到确认页。
      • 从主页跳转到设置页。

其他跳转方式的使用频率

  1. wx.redirectTo

    • 使用频率较低,通常用于不需要返回当前页面的场景,例如登录后跳转到主页。
  2. wx.switchTab

    • 用于跳转到 tabBar 页面,使用频率中等。
  3. wx.reLaunch

    • 使用频率较低,通常用于重置应用状态,例如退出登录后跳转到登录页。
  4. wx.navigateBack

    • 使用频率较高,通常用于返回上一页或多层页面。
  5. wx.navigateToMiniProgram

    • 使用频率较低,通常用于跳转到其他小程序。

总结

  • wx.navigateTo 是最常用的跳转方式,因为它符合用户习惯、灵活性高且开发便捷。
  • 其他跳转方式(如 wx.switchTabwx.redirectTo 等)则根据具体场景选择使用。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2281609.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

postgresql15的启动

PostgreSQL是一个功能非常强大的、源代码开放的客户/服务器关系型数据库管理系统,且因为许可证的灵活,任何人都可以以任何目的免费使用、修改和分发PostgreSQL。现在国产数据库大力发展阶段,学习和熟悉postgresql的功能是非常有必要的&#x…

ChatGPT结合Excel辅助学术数据分析详细步骤分享!

目录 一.Excel在学术论文中的作用✔ 二.Excel的提示词✔ 三. 编写 Excel 命令 四. 编写宏 五. 执行复杂的任务 六. 将 ChatGPT 变成有用的 Excel 助手 一.Excel在学术论文中的作用✔ Excel作为一种广泛使用的电子表格软件,在学术论文中可以发挥多种重要作用&a…

大模型 / 智能体在智能运维领域的应用总结与发展趋势概述

智能体 智能运维 ? 回顾大模型的发展 大模型的发展在过去两年间呈现出爆炸式的增长,成为推动人工智能领域快速进步的关键力量。 2023年3月:百度发布了其知识增强的大语言模型产品“文心一言”,这标志着国内AI大模型产业竞争的…

戴尔电脑设置u盘启动_戴尔电脑设置u盘启动多种方法

最近有很多网友问,戴尔台式机怎么设置u盘启动,特别是近两年的戴尔台式机比较复杂,有些网友不知道怎么设置,其实设置u盘启动有两种方法,下面小编教大家戴尔电脑设置u盘启动方法。 戴尔电脑设置u盘启动方法一、戴尔进入b…

【博客之星】年度总结:在云影与墨香中探寻成长的足迹

🐇明明跟你说过:个人主页 🔖行路有良友,便是天堂🔖 目录 一、年度回顾 1、创作历程 2、个人成长 3、个人生活与博客事业 二、技术总结 1、赛道选择 2、技术工具 3、实战项目 三、前景与展望 1、云原生未来…

《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风,开源流体吊坠,物联网在军工领域的应用,Unicode字符压缩解压

周报汇总地址:嵌入式周报 - uCOS & uCGUI & emWin & embOS & TouchGFX & ThreadX - 硬汉嵌入式论坛 - Powered by Discuz! 视频版: 《安富莱嵌入式周报》第349期:VSCode正式支持Matlab调试,DIY录音室级麦克风…

cursor ide配置远程ssh qt c++开发环境过程记录

cursor是啥就不介绍了,好像是目前最好用的ai ide,下面主要是配置远程ssh连接linux机器进行qt5 c程序运行的配置过程记录。 一、c_cpp_properties.json 在项目根目录的.vscode目录里面新建c_cpp_properties.json文件,根据你的实际情况配置该文…

Langchain+文心一言调用

import osfrom langchain_community.llms import QianfanLLMEndpointos.environ["QIANFAN_AK"] "" os.environ["QIANFAN_SK"] ""llm_wenxin QianfanLLMEndpoint()res llm_wenxin.invoke("中国国庆日是哪一天?") print(…

lwIP——3 内存管理

目录 1.什么是内存管理 2.lwIP内存堆 3.lwIP内存堆程序代码解析 3.1 mem_init程序解析 3.2 mem_malloc程序解析 3.3 mem_free程序解析 4.lwIP内存池 5.lwIP内存池程序代码解析 5.1 实现lwIP内存池的文件 5.1.1 memp_priv.h 5.1.2 memp_std.h 5.1.3 memp.h memp_t 枚…

使用 Serilog 在 .NET Core 6.0 中日志记录

在本文中,我们将讨论日志记录的基础知识以及在 .NET Core 6 中使用 Serilog 的逐步实现。 先决条件 1、Visual Studio 2022。 2、C# 和 .NET Core 的基础知识。 3、.NET Core 6 SDK。 日志记录基础知识 从技术角度来说,日志记录是记录事件并捕获应用程…

当 Facebook 窥探隐私:用户的数字权利如何捍卫?

随着社交平台的普及,Facebook 已经成为全球用户日常生活的一部分。然而,伴随而来的隐私问题也愈发严峻。近年来,Facebook 频频被曝出泄露用户数据、滥用个人信息等事件,令公众对其隐私保护措施产生质疑。在这个信息化时代&#xf…

微信小程序隐藏右侧胶囊按钮,分享和关闭即右侧三个点和小圆圈按钮

在微信小程序开发过程中,可能需要将右侧的胶囊按钮、即右侧的三个点和小圆圈按钮关闭掉。如图: 这时,我们只需在该页面的json文件中进行相关配置即可 {"navigationBarTitleText": "商品详情页","navigationStyle&q…

Sharding-JDBC 5.4.1+SpringBoot3.4.1+MySQL8.4.1 使用案例

最近在升级 SpringBoot 项目,原版本是 2.7.16,要升级到 3.4.0 ,JDK 版本要从 JDK8 升级 JDK21,原项目中使用了 Sharding-JDBC,版本 4.0.0-RC1,在升级 SpringBoot 版本到 3.4.0 之后,服务启动失败…

鸿蒙仓颉环境配置(仓颉SDK下载,仓颉VsCode开发环境配置,仓颉DevEco开发环境配置)

目录 ​1)仓颉的SDK下载 1--进入仓颉的官网 2--点击图片中的下载按钮 3--在新跳转的页面点击即刻下载 4--下载 5--找到你们自己下载好的地方 6--解压软件 2)仓颉编程环境配置 1--找到自己的根目录 2--进入命令行窗口 3--输入 envsetup.bat 4--验证是否安…

【数据库】详解MySQL数据库中索引的本质与底层原理

目录 1.MySQL索引的本质 1.1.索引的重要性 1.2.索引演示 1.3.索引的底层原理 1.3.1磁盘IO的原理 1.3.2.硬盘的主要结构 1.3.3.工作情形 1.3.4.各主要部件说明 1.3.5.扇区中是如何表示01数据的 2.MySQL索引底层原理 2.1.二叉查找树 2.2.平衡二叉查找树 2.3.B树和B树…

网络编程原理:回显服务器与客户端通信交互功能

文章目录 路由器及网络概念网络通信基础TCP/IP 五层协议封装和分用封装分用 网络编程(网络协议)UDP类 API使用实现回显通信程序回显服务器(UDP代码)回显客户端(UDP代码) TCP API使用回显服务器(TCP代码)回显客户端(TCP代码) 路由器及网络概念 网络发展是…

AIGC视频扩散模型新星:Video 版本的SD模型

大家好,这里是好评笔记,公主号:Goodnote,专栏文章私信限时Free。本文详细介绍慕尼黑大学携手 NVIDIA 等共同推出视频生成模型 Video LDMs。NVIDIA 在 AI 领域的卓越成就家喻户晓,而慕尼黑大学同样不容小觑,…

[Day 15]54.螺旋矩阵(简单易懂 有画图)

今天我们来看这道螺旋矩阵,和昨天发的题很类似。没有技巧,全是循环。小白也能懂~ 力扣54.螺旋矩阵 题目描述: 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: …

用Python绘制一只懒羊羊

目录 一、准备工作 二、Turtle库简介 三、绘制懒羊羊的步骤 1. 导入Turtle库并设置画布 2. 绘制头部 3. 绘制眼睛 4. 绘制嘴巴 5. 绘制身体 6. 绘制四肢 7. 完成绘制 五、运行代码与结果展示 六、总结 在这个趣味盎然的技术实践中,我们将使用Python和Turtle图形…

QT QTreeWidget控件 全面详解

本系列文章全面的介绍了QT中的57种控件的使用方法以及示例,包括 Button(PushButton、toolButton、radioButton、checkBox、commandLinkButton、buttonBox)、Layouts(verticalLayout、horizontalLayout、gridLayout、formLayout)、Spacers(verticalSpacer、horizontalSpacer)、…