微信小程序中路由跳转的方式有哪些?区别?

news2025/1/9 14:33:48

面试官:说说微信小程序中路由跳转的方式有哪些?区别?

一、是什么

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能

在微信小程序中,每个页面可以看成是一个 pageModelpageModel 全部以栈的形式进行管理

二、有哪些

常见的微信小程序页面跳转方式有如下:

  • wx.navigateTo(Object)
  • wx.redirectTo(Object)
  • wx.switchTab(Object)
  • wx.navigateBack(Object)
  • wx.reLaunch(Object)

wx.navigateTo(Object)

wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面

对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用

参数表如下所示:

流程图如下:

wx.redirectTo(Object)

重定向,当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 10 层页面栈的情况下,我们应该考虑选择 wx.redirectTo

wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面

这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间

参数表如下所示:

流程图如下所示:

wx.switchTab(Object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

参数表如下所示:

wx.navigateBack(Object)

wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面,开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层则设置对象的delta属性即可

参数表如下:

wx.reLaunch(Object)

关闭所有页面,打开到应用内的某个页面,返回的时候跳到首页

流程图如下所示:

参数表如下所示:

三、总结

关于上述五种跳转方式,做下总结:

  • navigateTo 保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页
  • redirectTo 关闭当前页面,跳转到应用内的某个页面
  • switchTab 跳转到 tabBar 页面,同时关闭其他非 tabBar 页面
  • navigateBack 返回上一页面
  • reLanch 关闭所有页面,打开到应用内的某个页面

其中关于它们的页面栈的关系如下:

  • avigateTo 新页面入栈

  • redirectTo 当前页面出栈,新页面入栈

  • navigateBack 页面不断出栈,直到目标返回页,新页面入栈

  • switchTab 页面全部出栈,只留下新的 Tab 页面

  • reLanch 页面全部出栈,只留下新的页面

参考文献

  • https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

更多前端资源==> GitHub

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

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

相关文章

创意天堂:25个聚焦艺术、设计和创意的网站推荐

1、即时设计 说到即时设计,每个人都应该熟悉它。不久前,即时设计开启了世界上第一个可以使用人工智能完成UI设计草案的即时设计「即时AI」大规模的内部测试也给产品设计行业带来了新的发展方向。事实上,对于产品设计师来说,即时设…

自动化测试框架pytest系列之21个命令行参数介绍(二)

第一篇 : 自动化测试框架pytest系列之基础概念介绍(一)-CSDN博客 接上文 3.pytest功能介绍 3.1 第一条测试用例 首先 ,你需要编写一个登录函数,主要是作为被测功能,同时编写一个测试脚本 ,进行测试登录功能 。 登…

ROS建图之ROS标准REP-105(官方搬运翻译+个人理解)

REP-105 是一个由 Wim Meeussen 于 2010年10月27日 创建并维护的,名为 "Coordinate Frames for Mobile Platforms"(移动平台的坐标系框架)的 ROS Enhancement Proposal(REP)。ROS官方教程:REP 10…

C盘删除的文件怎么恢复?恢复文件,4个方法!

“请问一下在c盘中删除的文件还有机会恢复吗?保存了一些比较重要的工作文件,但是在清理电脑时误删了,怎么恢复呢?” C盘作为系统盘,保存了很多重要的文件。有时候电脑会默认将某些文件自动保存在c盘。那么,…

视频监控录像服务器(中心录像服务器)功能详细介绍

目 录 一、概述 (一)定义 (二)视频监控中心录像服务器 二、存储策略服务 (一)存储策略配置 1、 录入页面 2、 选择需要进行录像的视频 3、批量选择多个通道号 4、其他关键参数…

迅为RK3568开发板Android11/12/Linux编译驱动到内核

在平时的驱动开发中,经常需要在内核中配置某种功能,为了方便大家开发和学习,本小 节讲解如何在内核中添加驱动。具体的讲解原理讲解请参考本手册的驱动教程。 Android11 源码如果想要修改内核,可以运行以下命令进行修改: cd ke…

Python类型转换,数据类型转换函数大全 与 strip()函数介绍

Python类型转换,数据类型转换函数大全 虽然 Python 是弱类型编程语言,不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型,但在一些特定场景中,仍然需要用到类型转换。 比如说,我们想通过使用 print() 函数…

前端本地覆盖资源(local override)调试

文章目录 前言一、本地替换(local override)能干啥?二、以CSDN为例 实践一波替换图片资源 总结 前言 Chrome 65 中的开发者工具将包含以下新功能: 本地替换 新的无障碍工具 更改标签页 新的搜索引擎优化 (SEO) 和性能审核 Perfo…

rocketmq实现延迟消息

SpringBoot整合RocketMQ发送延时消息 springboot rocketmq 延迟消息 Windows下RocketMQ安装及可视化界面搭建 Java 客户端 RocketMQ延迟消息 项目背景 项目中有延时消息的需求,综合考量RocketMQ比较适合。 RocketMQ支持多维度的延迟级别 支持多种消息类型 基…

Go模板后端渲染时vue单页面冲突处理

go后端模版语法是通过 {{}} ,vue也是通过双花括号来渲染的,如果使用go渲染vue的html页面的时候就会报错,因为分别不出来哪个是vue的,哪个是go的,既可以修改go的模板语法 template.New("output").Delims(&qu…

【大数据进阶第三阶段之Datax学习笔记】使用阿里云开源离线同步工具DataX 实现数据同步

【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax概述 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax快速入门 【大数据进阶第三阶段之Datax学习笔记】阿里云开源离线同步工具Datax类图 【大数据进阶第三阶段之Datax学习笔记】使用…

新生儿成长的阳光之钙:补充注意事项指南

引言: 钙是新生儿骨骼发育不可或缺的重要元素,对于宝宝的生长发育起着至关重要的作用。本文将深入探讨钙的功能、补充时机,以及在给新生儿补充钙时应该注意的事项,为小天使们提供最贴心的呵护。 第一部分:钙的重要性与…

基于ssm社区老年人关怀服务系统论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本社区老年人关怀服务系统就是在这样的大环境下诞生,其可以帮助管理者在短时间内处理完毕庞大的数…

Linux系统——测试端口连通性方法

目录 一、TCP端口连通性测试 1、ssh 2、telnet(可能需要安装) 3、curl 4、tcping(需要安装) 5、nc(需要安装) 6、nmap(需要安装) 二、UDP端口连通性测试 1、nc(…

11Spring IoC注解式开发(上)(元注解/声明Bean的注解/注解的使用/负责实例化Bean的注解)

注解的存在主要是为了简化XML的配置。Spring6倡导全注解开发。 注解开发的优点:提高开发效率 注解开发的缺点:在一定程度上违背了OCP原则,使用注解的开发的前提是需求比较固定,变动较小。 1 注解的注解称为元注解 自定义一个注解: package com.sunspl…

保留几位小数的函数、全排列函数、​反斜杠的作用、二进制、八进制、十六进制的输入​、求三角形面积的三种方法、求平方根、N次方如何表示

保留几位小数的函数 方法一&#xff1a; 头文件 #include<iomanip> 格式 cout<<fixed<<setprecision(int n)<<a; 作用&#xff1a;把a保留三位小数 方法二&#xff1a; 还有一种方法&#xff0c;就是用C从C语言保留的printf()方法。 保留二位小数&a…

QML实现的图片浏览器

很久之前实现了一个QWidget版本的图片浏览器:基于Qt5的图片浏览器QHImageViewer 今天用QML也实现一个,功能差不多: ●悬浮工具栏 ●支持图片缩放、旋转、还原、旋转、拖动。 ●拖动图片时,释放鼠标图片会惯性滑动。 ●支持左右翻页查看文件夹中的图片。 ●支持保存图片至本…

低代码的应用场景

Gartner 在 2019 年的低代码调研报告中&#xff0c;曾经绘制过一张用来阐述低代码适用场景的“应用金字塔”&#xff0c;如下图所示&#xff1a; 应用级别划分&#xff1a;从下往上&#xff0c;分别为工作组级(Workgroup Class)、部门级(Departmental Class)、企业级(Enterpris…

【HashMap】结构和底层原理

文章目录 HashMap结构和底层原理 HashMap 结构和底层原理 ​ HashMap 是我们非常常用到数据结构&#xff0c;由数组和链表构成的数据结构&#xff0c;数组里面每个地方都存了 key-value 这样的实例&#xff0c;在Java7叫 Entry 在 Java8 中叫 Node ​ 因为他本身所有的位置都…

模型的权值平均的原理和Pytorch的实现

一、前言 模型权值平均是一种用于改善深度神经网络泛化性能的技术。通过对训练过程中不同时间步的模型权值进行平均&#xff0c;可以得到更宽的极值点&#xff08;optima&#xff09;并提高模型的泛化能力。 在PyTorch中&#xff0c;官方提供了实现模型权值平均的方法。 这里…