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

在这里插入图片描述

✅作者简介: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知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

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

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

相关文章

如何在APP开发中实现多平台兼容?

随着移动互联网的发展,各大 APP平台也如雨后春笋般崛起,现在市面上主流的 APP平台基本都已经支持 IOS、 Android、 WP等多个平台的开发,但对于一些只想专注于做一款 APP的企业来说,往往只能选择在一个平台开发一个 APP&#xff0c…

opencv hand openpose

使用opencv c 来调用caffemodel 使用opencv 得dnn 模块调用 caffemodel得程序,图片自己输入就行,不做过多得解释,看代码清单。 定义手指关节点 const int POSE_PAIRS[20][2] { {0,1}, {1,2}, {2,3}, {3,4}, // thumb {0,5}, {5,6}, {6,7}…

索引能优化查询,那么谈谈索引的优点和缺点?索引原理

面试必备:索引能优化查询,那么谈谈索引的优点和缺点?索引原理 简述: 优点: 第一,通过创建唯一性索引,可以保证数据库表中每一行数据的唯一性。 第二,可以大大加快数据的检索速度,这也是创建…

leetcode刷题常用代码片段

Vscode是常用的开发工具,代码插入能够把常见的代码嵌入智能提醒,减轻了很大的工作量,下面是我刷题的配置,直接复制黏贴到自己的cpp.json里就可以用了 左下角,打开设置,选择用户代码片段,选择自…

idea中Easy Code模版配置

首先找到模版位置 找到使用的模版,我用的是MybatisPlus-H,这是我新建的一个模版 controller.java.vm模版 ##导入宏定义 $!{define.vm}##设置表后缀(宏定义) #setTableSuffix("Controller")##保存文件(宏定义&#xff…

Tensorflow(二)

一、过拟合 过拟合现象:机器对于数据的学习过于自负(想要将误差减到最小)。 解决方法:利用正规化方法 二、卷积神经网络(CNN) 卷积神经网络是近些年来逐渐兴起的人工神经网络,主要用于图像分类、计算机视觉等。 卷积:例如对图片每一小块像素区域的处理&#xff…

利用Stable diffusion Ai 制作艺术二维码超详细参数和教程

大家有没有发现最近这段时间网上出现了各种各样的AI艺术二维码,这种二维码的出现,简直是对二维码的“颠覆式创新”,直接把传统的二维码提升了一个维度!作为设计师的我们怎么可以不会呢? 今天就教大家怎么制作这种超有艺…

Error: unknown flag: --export 【k8s,kubernets报错】

报错情况如下: [rootk8smaster ~]# kubectl get deploy nginx -oyaml --export > my2.yaml Error: unknown flag: --export See kubectl get --help for usage.原因: --export在所使用的版本中已被移除 解决:去除--export即可&#xff0c…

七、Kafka源码分析之网络通信

1、生产者网络设计 架构设计图 2、生产者消息缓存机制 1、RecordAccumulator 将消息缓存到RecordAccumulator收集器中, 最后判断是否要发送。这个加入消息收集器,首先得从 Deque 里找到自己的目标分区,如果没有就新建一个批量消息 Deque 加进入 2、消…

微信小程序 Page页面

新建页面只需要在app.json配置好路径,编译器自动新增了页面 项目首页,在app.json哪个页面是第一位,哪个页面就是小程序首页

Java面试笔记

JAVA基础知识 语法结构 1.类 2.属性 3.方法 4.静态代码块 构造器 构造函数,构造类的对象,默认隐式,创建对象,先执行父类构造函数,再执行子类构造函数 父类的super必须在第一行 代码块 优先级最高,只…

3ds Max图文教程: 使用动态工具Mass FX 创建风铃动画

推荐: NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. 简单的场景设置 步骤 1 打开 3ds Max。 打开 3ds Max 步骤 2 我将向您展示风铃背后的动态 通过简单的场景设置进行模拟。一旦你有了这个想法,你就可以应用这个 技术到复杂的风铃结构。 基…

pytest study

pytest 测试用例的识别与运行 测试文件:test_*.py 和 *_test.py 以test开头或结尾的文件 测试用例:Test*类包含的所有 test_*的方法(测试类不能带有__init__方法), 不在class中的所有test_*的方法 def func(x):r…

我对牟长青分享的各个私董会数据分析

我是卢松松,点点上面的头像,欢迎关注我哦! 其实之前,我也想写一个关于各个草根社群的数据分析,但这样的文章容易得罪人,因为我一直喜欢直言不讳,所以一直没有动笔。例如,我在6月份写…

windows安装linux

https://www.cnblogs.com/liuqingzheng/p/16271895.html 咱们安装linux系统是centos7 准备工作: 安装软件:vmware -------虚拟机 官网下载地址:下载 VMware Workstation Pro | CN 也可以从这里面下载 链接:https://pan.bai…

Bugs记录

一、/usr/bin/ld: cannot find -l**** 参考:https://www.cnblogs.com/sakuraie/p/13341508.html 在ubuntu上安装软件时,经常出现这样的问题: /usr/bin/ld: cannot find -l**** 例如: /usr/bin/ld: cannot find -lcaffe 安装 需…

SIP视频对讲sip广播网关

SV-PA2是专门对行业用户需求研发的一款SIP音视频对讲,媒体流传输采用标准IP/RTP/RTSP协议。它很好的继承了锐科达话机稳定性好、电信级音质的优点,且完美兼容当下所有基于SIP的主流IPPBX/软交换/IMS平台,如Asterisk, Broadsoft, 3CX, Elastix 等。它集多…

uni-app接口请求封装

1.前言。 正所谓“工欲善其事必先利其器”,在vue-PC项目中,我们可以借助axios来封装对应的api接口请求(ps:axios的接口请求封装)。不过,如果是用uni-app开发小程序,那么又该如何借助uni-app自带…

了解Unity编辑器之组件篇Physics(四)

Physics:用于处理物理仿真和碰撞检测。它提供了一组功能强大的工具和算法,用于模拟真实世界中的物理行为,使游戏或应用程序更加真实和可信。 主要用途包括: 碰撞检测:Unity Physics 提供了高效的碰撞检测算法&#x…

【论文笔记】RCM-Fusion: Radar-Camera Multi-Level Fusion for 3D Object Detection

原文链接:https://arxiv.org/abs/2307.10249 1. 引言 目前的一些雷达-相机融合3D目标检测方法进行实例级的融合,从相机图像生成3D提案,并与雷达点云相关联以修正提案。但这种方法没有在最初阶段使用雷达,依赖于相机3D检测器&…