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

文章目录

      • 详细说明
      • 总结
      • `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); // 输出 123console.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.rhkb.cn/news/6623.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式的艺术-享元模式

结构性模式的名称、定义、学习难度和使用频率如下表所示: 1.如何理解享元模式 当一个软件系统在运行时产生的对象数量太多,将导致运行代价过高,带来系统性能下降等问题。 在享元模式中,存储这些共享实例对象的地方称为享元池&…

20250122-正则表达式

1. 正则标记 表示一位字符:\\ 表示指定的一位字符:x 表示任意的一位字符:. 表示任意一位数字:\d 表示任意一位非数字:\D 表示任意一个字母:[a-zA-Z](大写或小写) 表示任意一个…

OpenEuler学习笔记(八):安装OpenEuler

在VMware Workstation中安装OpenEuler 准备工作 下载并安装VMware Workstation虚拟机软件。前往OpenEuler官网下载OpenEuler系统镜像文件。 创建虚拟机 打开VMware Workstation,点击“创建新的虚拟机”,选择“自定义”,点击“下一步”。选择…

“““【运用 R 语言里的“predict”函数针对 Cox 模型展开新数据的预测以及推理。】“““

主题与背景 本文主要介绍了如何在R语言中使用predict函数对已拟合的Cox比例风险模型进行新数据的预测和推理。Cox模型是一种常用的生存分析方法,用于评估多个因素对事件发生时间的影响。文章通过具体的代码示例展示了如何使用predict函数的不同参数来获取生存概率和…

Java导出通过Word模板导出docx文件并通过QQ邮箱发送

一、创建Word模板 {{company}}{{Date}}服务器运行情况报告一、服务器:总告警次数:{{ServerTotal}} 服务器IP:{{IPA}},总共告警次数:{{ServerATotal}} 服务器IP:{{IPB}},总共告警次数:{{ServerBTotal}} 服务器IP:{{IPC}}&#x…

使用github提交Pull Request的完整流程

文章目录 1.Fork仓库2. git clone 仓库在本地3.对项目进行修改开发4.上传项目到远程仓库操作补充1. git add .2. git commit -m "提交信息"3. git pull4. git push总结完整工作流程示例 5.将更新的项目pull Request给原来的仓库主人 当多人进行项目的开发的时候&…

浅谈Unity中Canvas的三种渲染模式

Overview UGUI通过 Canvas 组件渲染和管理UI元素。Canvas 是 UI 元素的容器,它决定了 UI 元素的渲染方式以及它们在屏幕上的显示效果。Canvas 有三种主要的渲染模式,每种模式有不同的用途和特点。本文将介绍这三种渲染模式 1. Screen Space - Overlay 模…

Kafak 单例生产者实现-C#操作

前面写了一篇入门操作的文章,因为工作需要,简单修改了下如何实现单例生产者。 Kafka入门-C#操作_c# kafka-CSDN博客文章浏览阅读1.6k次,点赞20次,收藏9次。2).报错:“kafka.zookeeper.ZooKeeperClientTimeoutException: Timed out waiting for connection while in state…

第五天 Labview数据记录(5.1 INI配置文件读写)

5.1 INI配置文件读写 INI配置文件是一种简单的文本文件,通常用于存储软件的配置信息。它具有以下作用: 存储软件配置参数方便软件的维护和更新提高软件的灵活性和可扩展性便于用户修改和共享配置 5.1.1 前面板 1)新建项目SaveData_Exampl…

自动化01

测试用例的万能公式:功能测试界面测试性能测试易用性测试安全性测试兼容性测试 自动化的主要目的就是用来进行回归测试 新产品--第一个版本 (具备丰富的功能),将产品的整体进行测试,人工创造一个自动化测试用例,在n个版本的时候…

ElasticSearch(十一)— Elasticsearch中的SQL语句

一、总概 Elasticsearch 在 Basic 授权中支持以 SQL 语句的形式检索文档,SQL 语句在执行时会被翻译为 DSL 执行。从语法的角度来看,Elastisearch 中的 SQL 语句与RDBMS 中的 SQL 语句基本一致, 所以对于有数据库编程基础的人来说大大降低了使…

详解Redis的Zset类型及相关命令

目录 Zset简介 ZADD ZCARD ZCOUNT ZRANGE ZREVRANGE ZRANGEBYSCORE ZPOPMAX BZPOPMAX ZPOPMIN BZPOPMIN ZRANK ZREVRANK ZSCORE ZREM ZREMRANGEBYRANK ZREMRANGEBYSCORE ZINCRBY ZINTERSTORE 内部编码 应用场景 Zset简介 有序集合相对于字符串、列表、哈希…

【技术洞察】2024科技绘卷:浪潮、突破、未来

涌动与突破 2024年,科技的浪潮汹涌澎湃,人工智能、量子计算、脑机接口等前沿技术如同璀璨星辰,方便了大家的日常生活,也照亮了人类未来的道路。这一年,科技的突破与创新不断刷新着人们对未来的想象。那么回顾2024年的科…

缓存商品、购物车(day07)

缓存菜品 问题说明 问题说明:用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大。 结果: 系统响应慢、用户体验差 实现思路 通过Redis来缓存菜品数据,减少数据库查询…

09_异步加载_单例模式_常量类配置_不可销毁

1.首先在 资源加载服务层ResSvc.cs中添加 自定义异步加载函数 using UnityEngine; using UnityEngine.SceneManagement; //异步加载 命名空间 //功能 : 资源加载服务 public class ResSvc : MonoBehaviour{public void InitSvc(){Debug.Log("Init ResSvc...");}//自定…

【Redis】事务

前言: 对比MySQL事务:【MySQL篇】事务的认识以及四大特性-CSDN博客 弱化的原子性: redis 没有 "回滚机制". 只能做到这些操作 "批量执行". 不能做到 "一个失败就恢复到初始状态". 不保证一致性: 不涉及 "约束". 也没有…

深度学习|表示学习|卷积神经网络|通道 channel 是什么?|05

如是我闻: 在卷积神经网络(CNN)中,channel(通道) 是指输入或输出数据的深度维度,通常用来表示输入或输出的特征类型。 通道的含义 输入通道(Input Channels):…

K8S 集群搭建和访问 Kubernetes 仪表板(Dashboard)

一、环境准备 服务器要求: 最小硬件配置:2核CPU、4G内存、30G硬盘。 服务器可以访问外网。 软件环境: 操作系统:Anolis OS 7.9 Docker:19.03.9版本 Kubernetes:v1.18.0版本 内核版本:5.4.203-…

网络(三) 协议

目录 1. IP协议; 2. 以太网协议; 3. DNS协议, ICMP协议, NAT技术. 1. IP协议: 1.1 介绍: 网际互连协议, 网络层是进行数据真正传输的一层, 进行数据从一个主机传输到另一个主机. 网络层可以将数据主机进行传送, 那么传输层保证数据可靠性, 一起就是TCP/IP协议. 路径选择: 确…

用Python绘制一只懒羊羊

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