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

在这里插入图片描述

✅作者简介: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,一经查实,立即删除!

相关文章

Arduino 与 Unity3D TCP通信

一、通过传输流的方式 #include <WiFi.h>#define LED_PIN 5 const char * ssid "Daschow2021"; const char * password "daschow2021"; void setup() {Serial.begin(9600);//连接WiFiWiFi.begin(ssid,password);Serial.print("正在连接Wifi&…

linux麒麟系统二级等保【三权分立策略】

目录 三权分立策略 一、系统管理员 二、审计管理员 三、安全管理员 三权分立策略 "建议创建管理、操作、审计三类独立权限账号&#xff0c;支持三权分立机制。参考配置&#xff1a; 管理账号&#xff08;root&#xff09;&#xff1a;拥有所有操作权限&#xff1b;…

如何理解spring cloud 和 spring cloud Alibaba

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

第四十三天

●<template>&#xff1a;每个vue文件中最多可以包含一个&#xff0c;语块包裹的内容内容会被提取&#xff0c;编译成js渲染函数&#xff0c;并附在导出的组件上作为其render选项。 ●<script>​&#xff1a;每个 vue 文件最多可以包含一个 script>块(使用 <…

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

目录 &#x1f337;1、JVM是什么&#xff1f; &#x1f337;2、JVM的执行流程&#xff08;能够描述数据区5部分&#xff09; &#x1f337;3、JVM类加载过程 &#x1f337;4、双亲委派机制&#xff1a;描述类加载的过程 问题1&#xff1a;类加载器 问题2&#xff1a;什么…

Ubuntu Linux中hostname`命令

当然&#xff0c;让我们将关于在Ubuntu Linux中理解hostname的知识转化为列表形式&#xff1a; 参考&#xff1a; https://www.howtouseubuntu.com/network/change-hostname-in-ubuntu-linux/ 定义&#xff1a;hostname是Ubuntu&#xff08;以及其他Linux发行版&#xff09;中…

最优贸易(记忆化搜索)

题目链接&#xff1a;[NOIP2009 提高组] 最优贸易 - 洛谷 思路&#xff1a;这道题的标签是SPFA&#xff0c;但是我觉得这道题可以用记忆化搜索&#xff0c;用两组dfs&#xff0c;将从1到 i点道路上的最小值都存进min数组&#xff0c;将i 到n点的最大值存进max组&#xff0c;最后…

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

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

一元多项式的表示及相加

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

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…

网络中的一些概念对比

HTTP与HTTPS 从安全性和效率性进行阐述&#xff1a; 对于HTTP HTTP默认端口是80 HTTP是明文传输&#xff0c;数据以纯文本、明文形式在网络上传输&#xff0c;容易受到黑客的攻击和数据窃取。 对于HTTPS HTTPS默认端口是443 HTTPS用的是SSL或者TLS协议对数据进行加密&am…

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

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

5.2 Bootstrap 过渡效果(Transition)插件

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

Typescript:类的装饰器

装饰器 装饰器为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式 装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明&#xff0c;方法&#xff0c; 访问符&#xff0c;属性或参数上。 装饰器使用 expression这种形式&#xff0c;expression求值后必…

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

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前正在学习C/C、Java、算法等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;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 是一个轻量级的物理引擎&#xff0c;它使用 JavaScript 语言编写&#xff0c;并且基于 OimoPhysics 引擎进行了改进和优化。Oimo.js 核心库只有 150K &#xff0c;专门用…

交易流水指标统计——pandas

1、根据交易流水&#xff0c;计算每个交易交易对象的如下指标&#xff0c; 总收入笔数、总收入月数、最大月收入笔数、最大月收入笔数所在日期&#xff08;年月日格式&#xff09; import pandas as pd path r"C:\Users\xxx\Desktop\科技数据.xlsx"df pd.read_exc…