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

微信小程序开发系列


文章目录

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


前言

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


一、介绍

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

1.wx.switchTab(Object object)

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

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

代码示例:

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

2.wx.reLaunch(Object object)

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

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

代码示例:

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

3.wx.redirectTo(Object object)

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

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

代码示例:

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

4.wx.navigateTo(Object object)

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

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

object.success
回调函数参数 Object res

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

示例代码

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

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

示例代码


// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码// 此处是A页面
wx.navigateTo({url: 'B?id=1'
})// 此处是B页面
wx.navigateTo({url: 'C?id=1'
})// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({delta: 2
})

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

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

相关文章

基于AVR128单片机世界电子时钟的设计

一、系统方案 上电初始化完成系统初始化,液晶滚动显示北京、莫斯科、东京、伦敦、巴黎、纽约等六个城市的标准时间,显示的内容包括地区名及相应地区的年、月、日、星期、时、分、秒。 使用K1按键控制滚动显示或稳定显示某个地区的时间。 使用K3、K4、K5按…

Q/GDW 1597-2015《国家电网公司应用软件系统通用安全要求》

电力安全测试报告 电力行业检测标准 随着信息技术的快速发展和广泛应用,应用软件系统已成为企业信息化建设中不可或缺的重要组成部分。然而,应用软件系统的安全问题也随之而来,给企业和用户带来了潜在的风险和威胁。为了提高应用软件系统的…

信息与通信工程面试准备——信号与系统|10:23

8月16日 23:21 目录 ​编辑 1. 调制的作用 2. 放大器与振荡器的作用和区别 工作原理 输出信号 应用 反馈方式 设计复杂度 装置性质 3. 信号与系统:三大变换之间的关系? 4. 无码间串扰的条件 5. 冲激函数的作用? 研究的意义&…

Docker容器:docker数据管理、镜像的创建及dockerfile案例

文章目录 一、docker数据管理1.为何需要docker数据管理2.数据管理类型3.数据卷4.数据卷容器5.容器的互联 二.docker镜像的三种创建方法1.基于现有镜像创建1.1 启动镜像1.2 生成新镜像 2.基于本地模板创建2.1 OPENVZ 下载模板2.2 导入容器生成镜像 3.基于dockerfile创建3.1 dock…

Redis扩容机制与一致性哈希算法解析

在分布式系统设计中,Redis是一个备受欢迎的内存数据库,而一致性哈希算法则是分布式系统中常用的数据分片和负载均衡技术。本文将深入探讨Redis的扩容机制以及一致性哈希算法的原理,同时提供示例代码以帮助读者更好地理解这两个重要概念。 推…

Code Lab - 2

pip install torch-scatter -f https://pytorch-geometric.com/whl/torch-1.10.2cu102.html pip install torch-sparse -f https://pytorch-geometric.com/whl/torch-1.10.2cu102.html pip install torch-geometric pip install ogb 1. PyG Datasets PyG有两个类,用…

阿里云源 Python、npm、git、goproxy

阿里云源 Python、npm、git、goproxy 各种设置源的方式也都比较常见,但是根本记不住,每次都查感觉也不太好。 正好发现了个宝藏地址,看起来还挺全的,以后找源也可以先在这个地方翻翻,顺便就搞了几个放到一个脚本里边…

【Unity每日一记】SceneManager场景资源动态加载

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:uni…

elementui 修改日期选择器el-date-picker样式

1. 案例: 2. css /* 最外层颜色 */ .el-popper.is-pure {background: url("/assets/imgList/memuBG.png") no-repeat;border: none;background-size:100% 100%}/* 日期 1.背景透明 */ .el-date-picker{background: transparent; }/* 日期 2.标题、左右图…

关于css 的选择器和 css变量

css 选择器 常用的选择器 1. 后代选择器:也就是我们常见的空格选择器,选择的对象为该元素下的所有子元素 。例如,选择所有 元素下的 元素 div p{font-size:14px}2. 子元素选择器 ‘>’ 选择某元素下的直接子元素。例如,选择所…

数据分析师所要经历的三个阶段

数据分析师如今逐渐已经成为一个热门的岗位,在这个流量为王的年代,数据的重要性也日益增高,许多企业都是意识到了这一点,纷纷开始招募相关的数据型人才。 数据分析师的基本职业发展道路为:初级数据分析师-中级数据分析…

Java算法_ BST 中第 k 个最小元素 (LeetCode_Hot100)

题目描述:给定一个二叉搜索树的根节点 ,和一个整数 ,请你设计一个算法查找其中第 个最小元素(从 1 开始计数)。 获得更多?算法思路:代码文档,算法解析的私得。 运行效果 完整代码 /*** 2 * Aut…

LeetCode150道面试经典题-- 二叉树的最大深度(简单)

1.题目 给定一个二叉树 root ,返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 2.示例 3.思路 深度优先遍历 一个二叉树要查询到最大深度,可以将问题转为从根节点出发,查看左右子树的最大深度&am…

并发编程5:如何执行任务?

目录 1、线程中执行任务的方式 2、Executor 框架 2.1 - 线程的执行策略 2.2 - 线程池 2.3 - Executor 的生命周期 2.4 - 延任务与周期任务 3、找出可利用的并行性-代码示例 3.1 - 单线程的 I/O 操作 3.2 - 携带任务结果的 Callable 与 Future(重要&#xf…

基于swing的教务管理系统java jsp学生教师信息mysql源代码

本项目为前几天收费帮学妹做的一个项目,Java EE JSP项目,在工作环境中基本使用不到,但是很多学校把这个当作编程入门的项目来做,故分享出本项目供初学者参考。 一、项目描述 基于swing的教务管理系统 系统有3权限:管…

c++ qt--信号与槽(一) (第三部分)

c qt–信号与槽(一) (第三部分) 一.用qt自带的方法添加信号槽 1.第一种 1.如何添加 2.在何处进行绑定 2.第二种 1.如何添加 2.在何处进行绑定 而且会在mainwindow.h中添加槽函数的声明,在mainwindow.cpp中添加槽函数的定义 在mainwindow…

【线性DP】模型总结(terse版)

【线性DP】模型总结 最长上升子序列 DP法 ​ dp[i]表示以i结尾的最长上升子序列的长度。 ​ 对于每个i&#xff0c;遍历j1~i-1,若a[j] < a[i], 则dp[i] max(dp[i], dp[j] 1); 二分法 ​ 可以优化时间复杂度。 ​ dp[]数组用来存储当前最长上升子序列。 ​ 若dp[]数…

伦敦银和伦敦金的区别

伦敦银河伦敦金并称贵金属交易市场的双璧&#xff0c;一般投资贵金属的投资者其实不是交易伦敦金就是交易伦敦银。相信经过一段时间的学习和投资&#xff0c;不少投资者都能分辨二者的区别。下面我们就来谈谈伦敦银和伦敦金有什么异同&#xff0c;他们在投资上是否有差别。 交易…

vue与vueComponent的关系

创建完组件之后 就会创建一个vueComponent构造函数 当注册成功这个组件并且在页面使用之后 就会创建一个vueComponent实例对象&#xff0c; 所以为了避免组件在使用过程中data对象中的值混乱 组件中的data要写成函数&#xff0c; 使得每次创建的组件实例对象都可以返回一…

Sui第四轮资助:16个团队瓜分

近日&#xff0c;Sui基金会公布了第四轮开发者资助名单&#xff0c;受助项目均是集中在DeFi、支付、基础设施、游戏、预言机等领域的Sui生态项目&#xff0c;他们是从2023年7月1日之前提交的申请中选出的。在此时间之后提交的任何项目目前正在审查中。 在前三轮资助中累积发放…