微信小程序中路由跳转方式

news/2024/7/20 2:48:52 标签: 微信小程序, 小程序

文章目录

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

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

  • wx.switchTab(Object)跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(面全部出栈,只留下新的 Tab 页面)

  • wx.reLaunch(Object)关闭所有页面,打开到应用内的某个页面(页面全部出栈,只留下新的页面)

  • wx.redirectTo(Object)关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面(当前页面出栈,新页面入栈)

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

  • wx.navigateBack(Object)关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层(页面不断出栈,直到目标返回页,新页面入栈)


wx.switchTab(Object)

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

需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。

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

wx.reLaunch(Object)

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

需要跳转的应用内页面路径 (代码包路径),路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 path?key=value&key2=value2

wx.reLaunch({
  url: 'test?id=1'
})
Page({
  onLoad (option) {
    console.log(option.query) // 获取参数
  }
})

wx.redirectTo(Object)

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

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 path?key=value&key2=value2

wx.redirectTo({
  url: 'test?id=1'
})

wx.navigateTo(Object)

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

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如path?key=value&key2=value2

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

wx.navigateBack(Object)

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

wx.navigateBack() // 返回上一页面

wx.navigateBack({
  delta: 2   // 向上返回2页
})

http://www.niftyadmin.cn/n/5466567.html

相关文章

wireshark数据流分析学习日记-day2 识别主机用户专题

动态主机配置协议 (DHCP) 流量的主机信息 网络中生成流量的任何主机都具有三个标识符,那就是:mac地址,ip地址和主机名 一般流量可以直接看到mac和ip 输入dhcp过滤dhcp流量 mac,hostname与ip位置如图所示 关于mac地址…

list使用与模拟实现

目录 list使用 reverse sort unique splice list模拟实现 类与成员函数声明 节点类型的定义 非const迭代器的实现 list成员函数 构造函数 尾插 头插 头删 尾删 任意位置插入 任意位置删除 清空数据 析构函数 拷贝构造函数 赋值重载函数 const迭代器的设计 …

蓝桥杯嵌入式备赛相关知识点

一、介绍 ​ 蓝桥杯嵌入式使用的单片机是STM32G431RBT6,内核ARM Cortex - M4,MCUFPU,170MHz/213DMIPS,高达128KB Flash,32KB SRAM,其余的外设就不多介绍了,参照数据芯片数据手册 ​ CT117E-M4…

ffmpeg点对点音视频udp协议传输

参考:https://zhuanlan.zhihu.com/p/636152437?utm_id0 ffmpeg查看可用设备: ffmpeg -list_devices true -f dshow -i dummy1、音频 局域网内两台设备间 设备1-音频: ffmpeg -f dshow -i audio"麦克风阵列 (适用于数字麦克风的英特…

【QT+QGIS跨平台编译】056:【pdal_json_schema+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、pdal_json_schema介绍二、pdal下载三、文件分析四、pro文件五、编译实践一、pdal_json_schema介绍 pdal_json_schema 是与 PDAL(Point Data Abstraction Library)相关的 JSON 模式文件。PDAL 是一个用于处理和分析点云数据的开源库。JSON 模式…

k8s Calico 网络模式总结

目录 Overlay calico网络模式: Pod IP对外暴露 不对外暴露: 实现对外暴露的方法: overlay模式下的网络MTU Iptables & ipvs overlay的主要缺点: Full-mesh Unoverlay Reflect route (Full-mesh RR&a…

【嵌入式开发 Linux 常用命令系列 8 -- shell 命令 basename 介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 shell 命令 basenamedf 命令 shell 命令 basename 在 shell 脚本中,可以使用 basename 命令来获取文件的基本名称(不带路径的部分)。以下是如何将文件名赋值给变量的示例: file_pat…

uniapp开发App(一)登陆流程 判断是否登陆,是,进入首页,否,跳转到登录页

一、登陆流程 文字描述:用户进入App,之后就是判断该App是否有用户登陆过,如果有,直接进入首页,否则跳转到登陆页,登陆成功后,进入首页。 流程图如下: 二、在uniapp项目中代码实现 实…