微信小程序中常见的 跳转方式 及其特点的表格总结(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); // 输出 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 等)则根据具体场景选择使用。

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

python3+TensorFlow 2.x(四)反向传播

目录 反向传播算法 反向传播算法基本步骤: 反向中的参数变化 总结 反向传播算法 反向传播算法(Backpropagation)是训练人工神经网络时使用的一个重要算法,它是通过计算梯度并优化神经网络的权重来最小化误差。反向传播算法的核…

深度学习 Pytorch 单层神经网络

神经网络是模仿人类大脑结构所构建的算法,在人脑里,我们有轴突连接神经元,在算法中,我们用圆表示神经元,用线表示神经元之间的连接,数据从神经网络的左侧输入,让神经元处理之后,从右…

使用vscode + Roo Code (prev. Roo Cline)+DeepSeek-R1使用一句话需求做了个实验

摘要 使用vscode、Roo Code和deepseek-reasoner进行了一个实验,尝试使用一句话需求来生成小红书封面图片。工具根据需求提供了详细的架构方案,包括技术栈选择、核心模块划分、目录结构建议等。然后,工具自动化地完成了开发和测试,…

微服务搭建----springboot接入Nacos2.x

springboot接入Nacos2.x nacos之前用的版本是1.0的,现在重新搭建一个2.0版本的,学如逆水行舟,不进则退,废话不多说,开搞 1、 nacos2.x搭建 1,首先第一步查询下项目之间的版本对照,不然后期会…

TDengine 与上海电气工业互联网平台完成兼容性认证

在工业数字化转型和智能化升级的浪潮中,企业对高效、可靠的数据管理解决方案的需求日益增长。特别是在风电智能运维、火电远程运维、机床售后服务等复杂多样的工业场景下,如何实现海量设备和时序数据的高效管理,已经成为推动行业升级的关键。…

“大模型横扫千军”背后的大数据挖掘--浅谈MapReduce

文章目录 O 背景知识1 数据挖掘2 邦费罗尼原则3 TF.IDF4 哈希函数5 分布式文件系统 一、MapReduce基本介绍1. Map 任务2. 按键分组3. Reduce 任务4. 节点失效处理5.小测验:在一个大型语料库上有100个map任务和若干reduce任务: 二、基于MapReduce的基本运…

25美赛ABCDEF题详细建模过程+可视化图表+参考论文+写作模版+数据预处理

详情见该链接!!!!!! 25美国大学生数学建模如何准备!!!!!-CSDN博客文章浏览阅读791次,点赞13次,收藏7次。通过了解比赛基本…

Python:元组构造式和字典推导式

(Python 元组构造式和字典推导式整理笔记) 1. 元组构造式 1.1 创建元组 使用圆括号: tuple1 (1, 2.5, (three, four), [True, 5], False) print(tuple1) # 输出: (1, 2.5, (three, four), [True, 5], False) 省略圆括号: tup…

appium自动化环境搭建

一、appium介绍 appium介绍 appium是一个开源工具、支持跨平台、用于自动化ios、安卓手机和windows桌面平台上面的原生、移动web和混合应用,支持多种编程语言(python,java,Ruby,Javascript、PHP等) 原生应用和混合应用&#xf…

vue3组件el-table报错

传给table标签的data不是数组就会报错, 摁着商品管理代码找了半天也没发现哪里错了,而且关闭报错表格数据能正常显示, 。。。 最后发现我还有个订单管理页面,这里面的data初始化成ref( )了,把这个组件注释掉&#xf…

基于SpringBoot+WebSocket的前后端连接,并接入文心一言大模型API

前言: 本片博客只讲述了操作的大致流程,具体实现步骤并不标准,请以参考为准。 本文前提:熟悉使用webSocket 如果大家还不了解什么是WebSocket,可以参考我的这篇博客: rWebSocket 详解:全双工…

《边界感知的分而治之方法:基于扩散模型的无监督阴影去除解决方案》学习笔记

paper:Boundary-Aware Divide and Conquer: A Diffusion-Based Solution for Unsupervised Shadow Removal 目录 摘要 1、介绍 2、相关工作 2.1 阴影去除 2.2 去噪扩散概率模型(Denoising Diffusion Probabilistic Models, DDPM) 3、方…

linux-mysql在centos7安装和基础配置

1.安装mysql数据库 1.使用官网安装 1.检查是否存在mysql的分支mariadb [rootlocalhost ~]# rpm -qa |grep mariadb mariadb-libs-5.5.64-1.el7.x86_64 [rootlocalhost ~]# 2.卸载这个分支包 [rootlocalhost ~]# rpm -qa | grep mariadb mariadb-libs-5.5.64-1.el7.x86_64 …

Python!从0开始学爬虫:(一)HTTP协议 及 请求与响应

前言 爬虫需要基础知识,HTTP协议只是个开始,除此之外还有很多,我们慢慢来记录。 今天的HTTP协议,会有助于我们更好的了解网络。 一、什么是HTTP协议 (1)定义 HTTP(超文本传输协议&#xff…

MySQL数据库笔记——最左前缀原则原理及其注意事项

大家好,这里是Good Note,关注 公主号:Goodnote,专栏文章私信限时Free。本文详细介绍MySQL索引的关键潜规则——最左前缀原则。 文章目录 图示单值索引和联合索引单值索引联合索引 最左前缀原则示例分析1. 全值匹配查询时2. 匹配左…

Java数据结构 (链表反转(LinkedList----Leetcode206))

1. 链表的当前结构 每个方框代表一个节点,每个节点包含两个部分: 左侧的数字:节点存储的值,例如 45、34 等。右侧的地址(如 0x90):表示该节点 next 指针指向的下一个节点的内存地址。 例子中&a…

IMX6ull项目环境配置

文件解压缩: .tar.gz 格式解压为 tar -zxvf .tar.bz2 格式解压为 tar -jxvf 2.4版本后的U-boot.bin移植进SD卡后,通过串口启动配置开发板和虚拟机网络。 setenv ipaddr 192.168.2.230 setenv ethaddr 00:04:9f:…

git基础指令大全

版本控制 git管理文件夹 进入要管理的文件夹 — 进入 初始化(提名) git init 管理文件夹 生成版本 .git ---- git在管理文件夹时,版本控制的信息 生成版本 git status 检测当前文件夹下的文件状态 (检测,检测之后就要管理了…

[高等数学学习记录]函数的极值与最大值最小值

1 知识点 1.1 函数的极值及其求法 定义 设函数 f ( x ) f(x) f(x) 在点 x 0 x_0 x0​ 的某邻域 U ˚ ( x 0 ) \mathring{U}(x_0) U˚(x0​) 内有定义&#xff0c;如果对于去心邻域 U ˚ ( x 0 ) \mathring{U}(x_0) U˚(x0​) 内的任一 x x x&#xff0c;有 f ( x ) <…

docker 简要笔记

文章目录 一、前提内容1、docker 环境准备2、docker-compose 环境准备3、流程说明 二、打包 docker 镜像1、基础镜像2、国内镜像源3、基础的dockerfile4、打包镜像 四、构建运行1、docker 部分2、docker-compose 部分2.1、构建docker-compose.yml2.1.1、同目录构建2.1.2、利用镜…