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

布满荆棘的人生 2023-03-14 08:17 7阅读 0赞

### 本期内容 ###

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

**目录**

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

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

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

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

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

--------------------

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1][]

## 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'
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20230312/394b51c16b754ebdbffb7f5f7afe869c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20230312/e698cab4ab0b4fda89879e27a3e2524e.png