【微信小程序】小程序中几种跳转页面的方式

2024-07-04 09:41:45

本期内容

本期将介绍小程序中，几种跳转页面的方式以及区别

目录

1、只能跳转到 tabBar 配置页面

2、返回上一级页面（ delta：返回的页面数，默认值为 1，若 delta 大于现有页面数，则返回到首页）

3、关闭当前页面，并跳转到应用内的某个页面

4、保留当前页面，跳转到应用内的某个页面

5、关闭所有页面，打开到应用内的某个页面

1、只能跳转到 tabBar 配置页面

在微信小程序中，我们可以分为两种不同的页面，一种是带底部导航栏，也就是 tabBar 的页面，一种是不带导航栏的普通页面。当我们在 普通页面 -> tabBar 页面时，就需要用到如下方法：

wx.switchTab({url: 'pages/index/main'
})

带导航栏的页面如下红圈处：

普通页面如下，不带底部导航栏：

2、返回上一级页面（ delta：返回的页面数，默认值为 1，若 delta 大于现有页面数，则返回到首页）

返回上一级也非常好理解，当我们进入到不带导航栏的普通页面中（默认 tabBar 为首页时）的子级页面时，系统会记录上一次进入的页面，就如 PC 端的返回操作一样：

wx.navigateBack({dalta: 2     // 默认值是 1
})

3、关闭当前页面，并跳转到应用内的某个页面

在我们不需要将当前页面作为页面栈中的元素时，我们可以使其销毁，并跳转到应用内的界面（不带 tabBar 的普通页面）

wx.redirectTo({url: '/pages/index/main'
})

4、保留当前页面，跳转到应用内的某个页面

将当前页面保存在页面栈中，可以通过返回键来返回至该页面，同时跳转到应用内的不带 tabBar 的普通页面

wx.navigateTo({url: '/pages/index/main'
})

5、关闭所有页面，打开到应用内的某个页面

清空页面栈，直接进入到某个不带 tabBar 普通页面。比如退出登录功能，直接从 tabBar 页面返回到重新登录的界面，并清空所有已经打开过的页面。

wx.reLaunch({url: '/pages/index/main'
})

【微信小程序】小程序中几种跳转页面的方式相关推荐

H.266/VVC相关技术学习笔记21：帧间预测中五种Merge模式的熵编码方式
今天主要详细讲一下帧间预测中五种Merge模式的熵编码方式,以及对应的VTM的代码中的编码方式的实现.现阶段VTM6.0中Merge模式大致上分为五种,分别是Subblock_Merge.MMVD_M ...
JavaScript中四种不同的属性检测方式比较
JavaScript中四种不同的属性检测方式比较 1. 用in方法 var o = {x:1}; "x" in o; //true "y" in o; //fa ...
Extjs中三种不同的数据提交方式
Extjs中三种不同的数据提交方式 Extjs的三种提交方式: 表单Ajax提交,普通提交,单独Ajax提交: 1.表单ajax提交(默认提交方式) 提交函数:当按下表单中的提交按钮时执行下面的btn ...
java 输出文件到mac路径_Java 中几种获取文件路径的方式
原标题:Java 中几种获取文件路径的方式 1. 前言 Java开发中我们经常要获取文件的路径,比如读取配置文件等等.今天我们就关于文件的路径和如何读取文件简单地探讨一下. 2. 文件的路径文件的路 ...
电气工程中一种较好的电缆编号方式
电气工程中一种较好的电缆编号方式电气二次专业电缆号均由6位字符组成,前两位可为数字或字母,分别代表电缆两端连接设备所代表的系统,遵从由小到大,先数字后字母的原则:后四位为数字,每组数字区域段代表了电 ...
CSS几种常见的页面布局方式介绍
问题:CSS几种常见的页面布局方式介绍? CSS常见的有以下7种,必须要掌握的是前3种: flex弹性盒子(弹性布局): rem布局(一般都是flex+rem使用的比较多): 响应式布局(响应式布局的 ...
微信小程序两种跳转页面的方法
步骤一:添加新页面在小程序目录下的pages文件下新建文件下,命名为news 在app.json中添加新的页面"pages/news/news" 此时news文件夹下出现四个配置 ...
实现微信扫描小程序码携带参数和路径跳转页面
1.后端生成小程序码,小程序码需携带参数和跳转路径,如果想体验版测试的话,在后端添加为体验版获取不限制的小程序码 | 微信开放文档在前端: 需要扫描小程序跳转的页面中 onLoad(option) ...
R中6种读入表格数据的方式哪个最快？结果出人意料！
R怎么读入表格数据最快? R中有6个常用数据读取函数: utils::read.csv: 默认使用的读入方式 (read.table) readr::read_csv: readr包中的读入函数 (R ...

最新文章

热门文章