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

在这里插入图片描述

✅作者简介: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.mzph.cn/news/5989.shtml

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

相关文章

如何理解spring cloud 和 spring cloud Alibaba

Spring Cloud是一个基于Spring Framework构建的用于开发和构建分布式系统的开源框架。它提供了一系列的工具和组件,用于帮助开发者快速构建、部署和管理微服务架构。Spring Cloud提供了包括服务发现、配置管理、负载均衡、断路器等在内的众多功能。 Spring Cloud A…

【JVM】JVM执行流程 JVM类加载 垃圾回收机制等

目录 🌷1、JVM是什么? 🌷2、JVM的执行流程(能够描述数据区5部分) 🌷3、JVM类加载过程 🌷4、双亲委派机制:描述类加载的过程 问题1:类加载器 问题2:什么…

支付宝原生小程序组件与父级传递数据(微信小程序基本一样)

1. 声明组件 在对应的目录下,右击点击 新建小程序,之后会生成对应的文件 2. 子组件 Component({data: {colorList: [#165FF6, #3D16F6,

一元多项式的表示及相加

实现思路: 通过链表实现,会更为简单直观。用链表中的每个结点表示多项式中的每一项,多项式每一项都是由数据域(包含系数和指数)和指针域构成的,所以在定义表示结点的结构体时,可如下所示进行定义…

FFMPEG android mac 编译 支持DASH/OPENSSL问题汇总

一 下载源码 FFMPEG https://github.com/FFmpeg/FFmpeg/tree/release/4.3 二 编写脚本 支持https 就必须添加open SSL 的编译 具体可以查看我的另一个关于open SSL 的 然后我们配置的一些路径 涉及 ndk 的一定要查看你用的ndk 版本 是否存在这些路径这是第一步 然后如果支…

python爬虫入门

基础回顾 使用函数, 先导入, 直接点方法名使用 import math m math.log10(100) print(m)python 交互模式 input输入示例 age int(input("请输入年龄")) age 1 print(age)if else 的使用 和java一样, 只是不加括号, else if 阉割成了 elif 与或非 java : &am…

No3: 学习过程中故障成长积累

文章目录 故障积累1、编码错误导致 故障积累1、编码错误导致

5.2 Bootstrap 过渡效果(Transition)插件

文章目录 Bootstrap 过渡效果(Transition)插件使用案例 Bootstrap 过渡效果(Transition)插件 过渡效果(Transition)插件提供了简单的过渡效果。 注意:如果您想要单独引用该插件的功能&#xff0…

【ACM】—蓝桥杯大一暑期集训Day5

🚀欢迎来到本文🚀 🍉个人简介:陈童学哦,目前正在学习C/C、Java、算法等方向,一个正在慢慢前行的普通人。 🏀系列专栏:陈童学的日记 💡其他专栏:CSTL&#xff…

Qt6 Qt Quick UI原型学习QML第五篇

文章目录 效果QML语法父文件 MyQML.qmlQML语法子文件 TLineEditV1.qmlQML语法子文件 TTextEdit.qml 效果 QML语法父文件 MyQML.qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 600height: 600title:…

Linux系统进程概念详解

这里写目录标题 冯诺依曼体系结构操作系统(Operator System)1.概念2.目的3.管理4.系统调用和库函数概念 进程1.概念2.描述进程-PCB3.查看进程4.通过系统调用获取进程标示符5.通过系统调用创建进程-fork 进程状态1.Linux内核源代码2.进程状态查看 进程优先级1.基本概念2.查看系统…

投个 3D 冰壶,上班玩一玩

本篇文章将介绍如何使用物理引擎和图扑 3D 可视化技术来呈现冰壶运动的模拟。 Oimo.js 物理引擎 Oimo.js 是一个轻量级的物理引擎,它使用 JavaScript 语言编写,并且基于 OimoPhysics 引擎进行了改进和优化。Oimo.js 核心库只有 150K ,专门用…

5G的发展过程

目录 1.什么是5G 2.5G与4G的区别 3.5G的应用领域 4.5G给人类带来的福利 5.5G未来的发展趋势 1.什么是5G 5G技术是第五代移动通信技术,它是对之前的2G、3G和4G技术的升级和革新。5G技术具有更高的数据传输速度、更低的延迟和更大的网络容量,为人们提供…

Java-API简析_java.net.InetSocketAddress类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权) https://blog.csdn.net/m0_69908381/article/details/131870760 出自【进步*于辰的博客】 因为我发现目前,我对Java-API的学习意识比较薄弱…

办公软件ppt的制作

毕业找工作太难了,赶紧多学点什么东西吧,今天开始办公软件ppt的制作学习。 本文以WPS作为默认办公软件,问为什么不是PowerPoint,问就是没钱买不起,绝对不是不会破解的原因。 一.认识软件 在快捷工具栏中顾名思义就是一…

微服务基础理论

微服务简介 微服务Microservices之父,马丁.福勒,对微服务大概的概述如下: 就目前而言,对于微服务业界并没有一个统一的、标准的定义(While there is no precise definition of this architectural style ) 。但通在其…

Express 框架的基本操作

目录 1、应用生成器 2、基本路由 2.1、在跟路由下配置 GET请求,返回对应相应内容。 2.2、在跟路由下配置 POST请求,返回对应相应内容。 2.3、在跟路由下配置 PUT请求,返回对应相应内容。 2.4、在根路由下配置DELETE请求,返回对…

音视频开发-ffmpeg介绍-系列一

目录 一.简介 FFmpeg框架的基本组成包含: 二. FFmpeg框架梳理音视频的流程​编辑 基本概念: 三.ffmpeg、ffplay、ffprobe区别 4.1 ffmpeg是用于转码的应用程序 4.2 fffplay是用于播放的应用程序 4.3 ffprobe是用于查看文件格式的应用程序 4.4 ffmpeg是用于转…

华为鲲鹏920 aarch64 版本 Ambari HDP 下载地址

声明:为有效缓解各位同行兄弟们的痛,特推出此文 本文能够适配兼容 华为鲲鹏920 aarch64 版本,仅限 CentOS7、openEuler20.03-LTS 操作系统 以下是详细下载地址 1、CentOS7 aarch64版本 CentOS7 aarch64 https://mirrors.huaweicloud.com/…

《零基础入门学习Python》第054讲:论一只爬虫的自我修养2:实战

0. 请写下这一节课你学习到的内容:格式不限,回忆并复述是加强记忆的好方式! 今天我们决定在实战中来进行学习,会举两个例子,第一个例子是我们会下载一只猫,第二个例子是我们用Python来模拟浏览器通过在线的…