微信小程序——页面跳转方法和场景用法总结

news2024/11/27 15:40:22

在这里插入图片描述

✅作者简介:2022年博客新星 第八。热爱国学的Java后端开发者,修心和技术同步精进。
🍎个人主页:Java Fans的博客
🍊个人信条:不迁怒,不贰过。小知识,大智慧。
💞当前专栏:微信小程序学习分享
✨特色专栏:国学周更-心性养成之路
🥭本文内容:微信小程序——页面跳转方法和场景用法总结

文章目录

    • 1、wx.switchTab(url):跳转主页
    • 2、wx.reLaunch(url):关闭所有页面跳转
    • 3、wx.redirectTo(url):关闭当前页面跳转
    • 4、wx.navigateTo(url):保留页面跳转
    • 5、wx.navigateBack(delta):页面返回
    • 总结

在这里插入图片描述

1、wx.switchTab(url):跳转主页

  • 描述:跳转到带有标签栏的页面,并关闭其他非标签页的页面。
  • 使用场景:当你需要切换到小程序中不同的页面,并且页面具有标签栏时,可以使用此方法。
属性解释
url需要跳转的tabBar路径,不能带参数
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

案例展示:

wx.switchTab({
  url: '/pages/tab/home' // 跳转到名为“home”的标签页
})
  • 参数说明:
    url(必填):要跳转的页面路径,需在app.json中进行注册。

2、wx.reLaunch(url):关闭所有页面跳转

  • 描述:关闭所有页面,并打开一个新的页面作为首页。
  • 使用场景:当你需要重新启动小程序,并跳转到一个全新的页面时,可以使用此方法。
属性解释
url需要跳转的应用内页面路径,可以带参数
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

案例展示:

wx.reLaunch({
  url: '/pages/login' // 跳转到名为“login”的页面
})
  • 参数说明:
    url(必填):要跳转的页面路径,需在app.json中进行注册。

3、wx.redirectTo(url):关闭当前页面跳转

  • 描述:关闭当前页面,并跳转到一个新的页面。
  • 使用场景:当你需要关闭当前页面,并导航到另一个页面时,可以使用此方法。
属性解释
url需要跳转的应用内页面路径,可以带参数
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

案例展示:

wx.redirectTo({
  url: '/pages/detail?id=123' // 跳转到名为“detail”的页面,并传递参数id
})
  • 参数说明:
    url(必填):要跳转的页面路径,需在app.json中进行注册。

4、wx.navigateTo(url):保留页面跳转

  • 描述:保留当前页面,并跳转到一个新的页面。
  • 使用场景:当你需要在当前页面保留导航记录,并在新页面打开时,可以使用此方法。
属性解释
url需要跳转的应用内页面路径,可以带参数
events页面间通信接口,用于监听被打开页面发送到当前页面的数据
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

案例展示:

wx.navigateTo({
  url: '/pages/detail?id=123' // 跳转到名为“detail”的页面,并传递参数id
})
  • 参数说明:
    url(必填):要跳转的页面路径,需在app.json中进行注册。

5、wx.navigateBack(delta):页面返回

  • 描述:返回上一页面。
  • 使用场景:当你需要回到上一个页面时,可以使用此方法。
属性解释
delta默认值为1,返回的页面数,如果 delta 大于现有页面数,则返回到首页。
success接口调用成功的回调函数
fail接口调用失败的回调函数
complete接口调用结束的回调函数(调用成功、失败都会执行)

案例展示:

wx.navigateBack({
  delta: 1 // 返回上一页面(如果存在)
})
  • 参数说明:
    delta(选填):返回的页面数,如果不填则默认返回上一页面;设置为2则返回上两个页面,以此类推。

注意: 小程序的页面不是很多,通常推荐使用wx.navigateTo进行跳转,后退不需要重新渲染,提高加载相率。反之,页面很多时候,最好不用。

总结

  这些方法在跳转页面时,参数中的路径需在app.json中注册,确保小程序能够正确识别页面路径。根据你的具体需求,选择适当的方法来实现页面跳转。


  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

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

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

相关文章

失物招领小程序连接人与物的奇妙纽带

hello guys!! 随着生活的节奏加快,人们在各个领域都有可能会遇到丢失物品或者拾到物品的情况。不论是学生、员工还是旅游爱好者,我们都有可能在生活的轨迹中遇到这样的情况。为了提供一个便捷的平台,让人们能够分享、发布和寻找丢失物品&…

再添新品|OPT(奥普特)高速高分辨率线阵相机发布!

针对大幅面且高速生产的视觉检测场景,OPT(奥普特)持续在数据传输接口技术上进行开发创新,推出三大系列线阵相机,产品阵容再升级。 本次发布的新品共12款,分别有万兆网、CXP及CL系列的新品,分辨…

JavaDemo——使用jks的https

java使用https主要就是设置下sslContext,sslContext初始化需要密钥管理器和信任管理器,密钥管理器用于管理本地证书和私钥,信任管理器用于验证远程服务器的证书,这两种管理器都需要KeyStore初始化,两种管理器可以按需只…

OS1_进程与线程的管理

序言 1.OS以进程、线程的方式在CPU中执行静态保存在外存(内存)中的程序,进程的构成与状态转化,特别是进程的切换; 2.当有多个进程处于就绪态,有哪些常见的挑选以执行方式; 3.并发执行(乱序发射)的进程,共享…

商品信息管理-亿发商品进销存管理系统,批发行业零售门店免费试用

众所周知,批发零售行业面临着商品品类繁多、品牌众多、商品信息量庞大等挑战。同时,商品售价波动频繁,还需要管理商品批次,避免积压过期。针对这些传统批发零售行业的管理难题,加快行业数字化转型成为解决之道&#xf…

远程访问不了虚拟机【bug】

远程访问不了虚拟机【bug】 bug 虚拟机访问不了他的默认网关 虚拟机IP:172.25.254.250 虚拟机网关IP:172.25.254.1 远程登录也是超时的 错误产生 我还原了一下虚拟机的网络配置选项 导致 √ 使用本地DHCPT服务将IP地址给虚拟机 相关资源 本机的I…

基于Labelstudio的UIE半监督智能标注方案(本地版)

自然语言处理信息抽取智能标注方案包括以下几种: 基于规则的标注方案:通过编写一系列规则来识别文本中的实体、关系等信息,并将其标注。 基于规则的标注方案是一种传统的方法,它需要人工编写规则来识别文本中的实体、关系等信息&a…

Redis入门(1)——Redis是啥 安装Docker的Redis Redis的基本数据类型+常用命令 SpringBoot整合Redis初步

目录 引出MySQL数据库:慢Redis是啥?问题:redis是单线程的,为什么会非常快? 安装Redis的docker1.搜索docker search redis2.拉取docker pull redis3.运行容器4.进入容器-->进入redis redis的基本数据类型字符串(stri…

在线招投标系统nodejs+vue

本站是一个B/S模式系统,采用vue框架,MYSQL数据库设计开发,充分保证系统的稳定性。系统具有界面清晰、操作简单,功能齐全的特点,使得在线招投标系统管理工作系统化、规范化。本系统的使用使管理人员从繁重的工作中解脱出…

PHP反序列化漏洞之面向对象基础

一、PHP面向对象基础 要谈PHP反序列化,不得不涉及面向对象,因为在反序列化漏洞利用中,大多涉及的都是“对象”的反序列化。所以需要了解面向对象基础。 面向面向对象是一种以“对象”为中心的编程思想,把要解决的问题分解成各个…

WORD模板如何自定义并使用?

文章目录 0.引言1.新建WORD2.WORD另存为模板3.使用模板 0.引言 使用Word模板可以提高文档处理的一致性、效率和专业性,同时也方便了更新和维护。对于需要频繁创建或修改文档的组织或个人来说,使用Word模板是一个非常实用的工具。本文总结Word模板自定义并…

Docker数据管理和镜像创建

Docker数据管理和镜像创建 一、Docker的数据管理1、数据卷2、数据卷容器3、端口映射4、容器互联(使用centos镜像) 二、Docker 镜像的创建1、基于现有镜像创建2、基于本地模板创建3、基于Dockerfile创建3.1 联合文件系统(UnionFS)3…

Docker 的前世今生

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

19 数组静态初始化练习

语法: 数据类型[ ] 数组名称 {元素1,元素2,元素3}; public class Demo1 {public static void main(String[] args) {int[] arr {0,1,2,3};System.out.println(arr);System.out.println(arr[0]);System.out.println(arr[1]);System.out.pri…

线性链表的实现

线性链表简介 线性表的链式存储结构称为线性链表,如图1所示,线性链表将存储空间划分成若干的小块,每块占用若干个字节,这些小块称为存储结点。将其中的存储结点分为两个部分,一部分用于存储数据元素的值,称…

vue中如何通过webpack-bundle-analyzer打包分析工具进行配置优化

vue中随着项目的不断功能迭代和开发,项目文件越来越多,项目的打包文件也越来越大。如何对打包文件进行分析优化,减小打包文件大小呢?可以通过webpack-bundle-analyzer 这个打包分析工具进行解决。 1、webpack-bundle-analyzer的安…

传输层协议 TCP与UDP

目录 传输层端口号端口号范围划分 0-65535认识知名端口号(Well-Know Port Number)netstatpidofxargs UDP协议UDP协议段格式UDP的特点面向数据报UDP的缓冲区基于UDP的应用层协议 TCP协议TCP协议段格式确认应答(ACK)机制超时重传机制连接管理机制:tcp的三次握手和四次…

自然语言处理基础详解入门

1、自然语言的概念 自然语言是指人类社会约定俗成的,并且区别于人工语言(如计算机程序)的语言,,是自然而然的随着人类社会发展演变而来的语言,它是人类学习生活的重要工具。 2、自然语言处理概述 自然语言…

Kubernetes对象深入学习之四:对象属性编码实战

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是《Kubernetes对象深入学习》系列的第四篇,前面咱们读源码和文档,从理论上学习了kubernetes的对象相关的知识&#xff…

【算法基础:搜索与图论】3.6 二分图(染色法判定二分图匈牙利算法)

文章目录 二分图介绍染色法判定二分图例题:860. 染色法判定二分图 匈牙利匹配二分图最大匹配匈牙利匹配算法思想例题:861. 二分图的最大匹配 二分图介绍 https://oi-wiki.org/graph/bi-graph/ 二分图是图论中的一个概念,它的所有节点可以被…