【微信小程序】页面路由跳转函数之间的区别

微信小程序开发系列


文章目录

  • 前言
  • 一、介绍
    • [1.wx.switchTab(Object object)](#1.wx.switchTab(Object object))
    • [2.wx.reLaunch(Object object)](#2.wx.reLaunch(Object object))
    • [3.wx.redirectTo(Object object)](#3.wx.redirectTo(Object object))
    • [4.wx.navigateTo(Object object)](#4.wx.navigateTo(Object object))
    • [5.wx.navigateBack(Object object)](#5.wx.navigateBack(Object object))

前言

在开发微信小程序中基本都会用到页面跳转,微信小程序提供了几个页面跳转函数。它们之间有一些区别,试用用时需要注意,否则会达不到预期效果。下面介绍这几种页面跳转的的区别。


一、介绍

一共提供了五个页面跳转函数,它们都支持 Promise 风格 调用。

1.wx.switchTab(Object object)

描述:

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,该函数是跳转到底部tabBar时使用的。
参数:

Object object

属性 类型 必填 说明
url string 需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

javascript 复制代码
// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
javascript 复制代码
wx.switchTab({
  url: '/index'
})

2.wx.reLaunch(Object object)

描述:

关闭所有页面,打开到应用内的某个页。
参数:

Object object

属性 类型 必填 说明
url string 需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

javascript 复制代码
wx.reLaunch({
  url: 'test?id=1'
})

3.wx.redirectTo(Object object)

描述:

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
参数:

Object object

属性 类型 必填 说明
url string 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

代码示例:

javascript 复制代码
wx.redirectTo({
  url: 'test?id=1'
})

4.wx.navigateTo(Object object)

描述:

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
参数:

Object object

属性 类型 必填 说明
url string 需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
events Object 页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)
routeType string 2.29.2 自定义路由类型,相关文档 自定义路由

object.success

回调函数参数 Object res

属性 类型 说明
eventChannel EventChannel 和被打开页面进行通信

示例代码

javascript 复制代码
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})
javascript 复制代码
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

5.wx.navigateBack(Object object)

描述:

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
参数:

Object object

属性 类型 必填 说明
delta number 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码

javascript 复制代码
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
  delta: 2
})
相关推荐
shitian08111 小时前
用轻量云服务器搭建一个开源的商城系统,含小程序和pc端
服务器·小程序·开源
计算机-秋大田2 小时前
基于微信小程序的农场管理系统的设计与实现,LW+源码+讲解
java·spring boot·微信小程序·小程序·vue
说私域9 小时前
私域流量圈层在新消费时代的机遇与挑战:兼论开源 AI 智能名片、2 + 1 链动模式、S2B2C 商城小程序的应用
人工智能·小程序
亥时科技12 小时前
相亲小程序(源码+文档+部署+讲解)
java·小程序·开源·源代码管理
wayuncn12 小时前
网站小程序app怎么查有没有备案?
小程序
2401_8441379514 小时前
PHP中小学优校管理系统小程序源码
微信·微信小程序·小程序·微信公众平台·微信开放平台
iSee85717 小时前
美团代付微信小程序 read.php 任意文件读取漏洞复现
微信小程序·小程序·php
V+zmm1013417 小时前
小说实体书商城微信小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·ssm·课程设计
V+zmm1013420 小时前
校园服务平台小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·课程设计·1024程序员节
xiaaaa.z1 天前
【小程序】封装网络请求request模块
小程序