微信小程序如何跳转到tabBar页面、如何携带参数过去

news2024/11/16 0:27:37

文章目录

    • 一、跳转链接时,不能使用navigator标签、 wx.navigateTo、wx.redirectTo方法跳转页面
      • 问题解决:
        • 1、wx.switchTab(Object object)
        • 2、wx.reLaunch(Object object)
    • 二、不能用常规的方式给tabBar的页面传递参数
      • 问题解决:
        • 1、用前面提到的wx.reLaunch(Object object)方法进行传递
        • 2、使用本地存储方法实现

微信底部如果用的是系统自动的 tabbar,也就是在 app.json中配置的底部路由:

// app.json
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/me/me",
      "text": "个人中心"
    }]
  }
}

需要注意以下两个问题:

一、跳转链接时,不能使用navigator标签、 wx.navigateTo、wx.redirectTo方法跳转页面

比如,个人中心是tabBar,使用<navigator url="/pages/me/me">个人中心</navigator>跳转时,无法跳转,也不会给任何提示。

如果在普通标签上使用wx.navigateTo跳转到任意tabBar页面,则会报错:

Error: MiniProgramError
{"errMsg":"navigateTo:fail can not navigateTo a tabbar page"}

使用wx.redirectTo也会报同样的错误:

WAServiceMainContext.js:2 Error: MiniProgramError
{"errMsg":"redirectTo:fail can not redirectTo a tabbar page"}

问题解决:

可以使用如下两个方法:

1、wx.switchTab(Object object)

作用:跳转到tabBar页面,并关闭其他所有非 tabBar 页面。

参数:

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

用法:

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

官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

但这样的缺点是,无法携带参数给tabBar页面。如果需要携带参数过去,可以用如下方法。

2、wx.reLaunch(Object object)

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

参数:

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

用法(可以携带url参数):

wx.reLaunch({
  url: '/pages/me/me?id=1'
})

me页面

// test
Page({
  onLoad (option) {
    console.log(option.id)
  }
})

二、不能用常规的方式给tabBar的页面传递参数

比如在tabBar的页面的onload钩子函数是接收不到其他页面携带过来的option参数的。

问题解决:

可以使用如下两个方法:

1、用前面提到的wx.reLaunch(Object object)方法进行传递

2、使用本地存储方法实现

即在A页面用wx.setStorage将想要传递的参数存到内存中去 , 在B页面(tabBar页面)中直接用wx.getStorage取出内存中取出。

image-20230918095957650

如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。

祝你能成为一名优秀的WEB前端开发工程师!

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

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

相关文章

聚观早报 | 联发科天玑9300跑分曝光;OPPO A2 Pro开启预售

【聚观365】9月18日消息 联发科天玑9300跑分曝光 OPPO A2 Pro开启预售 哪吒汽车泰国累计交付破1万台 小米13T系列最新渲染图出炉 酷派手机新品通过工信部入网 联发科天玑9300跑分曝光 今年上半年&#xff0c;联发科推出了天玑9200移动平台&#xff0c;截至目前已有多款机…

二蛋赠书三期:《C#入门经典(第9版)》

文章目录 前言活动规则参与方式本期赠送书籍介绍作者介绍内容简介读者对象获奖名单 结语 前言 大家好&#xff01;我是二蛋&#xff0c;一个热爱技术、乐于分享的工程师。在过去的几年里&#xff0c;我一直通过各种渠道与大家分享技术知识和经验。我深知&#xff0c;每一位技术…

Apache httpd 安全漏洞处理-升级httpd版本

文章目录 前言一、现状二、使用codeit库升级Apache1. 安装epel-release2. 下载codeit的repo文件3. 查看版本信息4. 更新httpd版本后确认版本5. 重启httpd服务 总结 前言 手上有台zabbix-server服务器&#xff0c;用了httpd的服务支撑&#xff0c;漏扫时发现有很多的Apache htt…

具体项目下解决Echarts多端同步开发和维护的问题

具体问题场景 PC端和移动端需要同时上线图表功能&#xff08;没有多余工时&#xff09; 之后的版本迭代&#xff08;功能、样式、配置等&#xff09;默认双端同步&#xff0c;开发人员只希望维护一套代码 Echarts在移动端有部分功能不兼容不支持 Echarts在移动端的坑 ① 移动端…

AI与医疗保健:革命性技术如何拯救生命

文章目录 引言AI的应用领域1. 影像识别2. 疾病诊断3. 药物研发4. 个性化治疗 AI技术1. 机器学习2. 深度学习3. 自然语言处理4. 基因组学 实际案例1. Google Health的深度学习模型2. IBM Watson for Oncology3. PathAI的病理学分析 道德和隐私考虑结论 &#x1f389;欢迎来到AIG…

振弦采集仪和传感器在岩土工程中安装方法的关键要点

振弦采集仪和传感器在岩土工程中安装方法的关键要点 振弦采集仪和传感器在岩土工程中的安装方法是岩土工程中非常关键的过程。其安装质量的好坏直接影响实验数据的准确性&#xff0c;进而影响工程设计和施工效果。因此&#xff0c;在实际工作中&#xff0c;如何正确的安装振弦…

0基础学习VR全景平台篇 第100篇:美团酒店丨平台上传全景全流程

目前美团平台已经具备VR全景图在美团App客户端的展示能力&#xff0c;但目前E-Booking暂未开通上传通道&#xff0c;若商家您有全景图且有意愿上传至平台&#xff0c;需要签署授权书&#xff0c;并依照规定的格式要求发送邮件申请&#xff0c;由平台代为人工上传。具体规则和要…

一款非常容易上手的报表工具,简单操作实现BI炫酷界面数据展示,驱动支持众多不同类型的数据库,可视化神器,免开源了

一款非常容易上手的报表工具&#xff0c;简单操作实现BI炫酷界面数据展示&#xff0c;驱动支持众多不同类型的数据库&#xff0c;可视化神器&#xff0c;免开源了。 在互联网数据大爆炸的这几年&#xff0c;各类数据处理、数据可视化的需求使得 GitHub 上诞生了一大批高质量的…

循环神经网络——上篇【深度学习】【PyTorch】【d2l】

文章目录 6、循环神经网络6.1、序列模型6.1.1、序列模型6.1.2、条件概率建模6.1.2、代码实现 6.2、文本预处理6.2.1、理论部分6.2.2、代码实现 6.3、语言模型和数据集 6、循环神经网络 6.1、序列模型 6.1.1、序列模型 序列模型主要用于处理具有时序结构的数据&#xff0c; *…

OA 电子审批流程是什么?

公司中&#xff0c;最最最常见也是最最最多的就是——各种审批。 我当年第一次实习&#xff0c;在一家国企的行政部门&#xff0c;我们部门领导那个时候最主要的工作就是“打通流程”&#xff0c;咱也不知道他在打通什么流程&#xff0c;反正这个很重要就是了。 结果&#xf…

docker swarm集群

集群构建 不包含在任何 Swarm 中的 Docker 节点&#xff0c;称为运行于单引擎&#xff08;Single-Engine&#xff09;模式。一旦被加入 Swarm 集群&#xff0c;则切换为 Swarm 模式。第一步我们要做的就是初始化 Swarm。 初始化swarm集群 将本机作为manager节点 docker swar…

小谈设计模式(4)—单一职责原则

小谈设计模式&#xff08;4&#xff09;—单一职责原则 专栏介绍专栏地址专栏介绍 单一职责原则核心思想职责的划分单一变化原则高内聚性低耦合性核心总结 举例图书类&#xff08;Book&#xff09;用户类&#xff08;User&#xff09;图书管理类&#xff08;Library&#xff09…

强信创,高实用:SuperMap开发者线上训练营9月25日起航

当前&#xff0c;信创工作全面开展&#xff0c;从细分领域延展至所有领域&#xff0c;自主GIS技术也迈入新的发展阶段。2023年9月25日至9月27日&#xff0c;北京超图软件股份有限公司、917书院GIS学堂将主办以“强信创、高实用”为主题的SuperMap开发者训练营&#xff08;以下简…

路由器ip地址设置

当你使用路由器时&#xff0c;你可以按照以下步骤设置路由器的IP地址。这样可以确保你的网络连接正常并允许其他设备连接到你的路由器。 **步骤一&#xff1a;登录路由器管理界面** 首先&#xff0c;你需要登录到路由器的管理界面。打开你的浏览器&#xff0c;并输入路由器的…

【校招VIP】java语言考点之switch和default

考点介绍&#xff1a; switch、default是 校招Java岗位面试时常考的关键字组合之一。 java语言考点之switch和default-相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考点试题 1、switch语句能否作用在byte上&#xff0c;能否作用在long上&#xff0c;能否作用…

ubuntu 22.04通过apt-get安装的apache2将http改造为https的方法

目录 一、安装apache2 二、启动apache2服务 三、访问http网页 四、改造https &#xff08;一&#xff09;查看apache2是否安装了ssl模块 &#xff08;二&#xff09;安装apache2-dev &#xff08;三&#xff09;配置SSL访问 1. 生成私有证书 2. 新增ssl配置文件 3. 重…

ubunutu20/18/22 编译android 5相关的问题汇总-千里马framework开源代码平板编译过程

hi&#xff0c;粉丝朋友们&#xff1a; 闲鱼50块钱淘到了一个开源平板&#xff0c;注意这个平板是有源码的&#xff0c;可以进行相关的编译修改。哈哈哈&#xff0c;马哥这边就体验了一下50块钱平板是否可以拿来做framework呢&#xff1f; 哈哈&#xff0c;说好就开干了&#x…

Android13 通知栏和设置显示中添加副屏亮度条,调节副屏亮度

由于台式的Android设备&#xff0c;存在着两个屏幕显示的情况&#xff0c;故需要对Android系统开发一个可以调节副屏亮度的功能。 提交副屏亮度调节的效果如下&#xff1a; 涉及修改的文件如下&#xff1a; frameworks/base/services/core/java/com/android/server/am/Acti…

扔掉你的开发板,跟我玩Mcore-全志h616

本文转载自WhyCan Forum(哇酷开发者社区)&#xff1a; https://whycan.com/t_10024.html 作者leefei 这是一个1.69寸触摸小电视。使用全志H616芯片&#xff0c;板上硬件有mpu6050陀螺仪&#xff0c;USB转ttl调试串口&#xff0c;一个USB接口&#xff0c;WIFI&蓝牙&#x…

Promethus(普罗米修斯)安装与配置(亲测可用)

1. 普罗米修斯概述 Prometheus(是由go语言(golang)开发)是一套开源的监控&报警&时间序列数 据库的组合。适合监控docker容器。 Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包 。自2012年成立以来&#xff0c;许多公司和组织都采用了Prometheus&#…