Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序wx.switchTab的跳转传参问题

小程序wx.switchTab的跳转传参问题

作者头像
王小婷
发布于 2025-05-18 08:19:24
发布于 2025-05-18 08:19:24
12300
代码可运行
举报
文章被收录于专栏:编程微刊编程微刊
运行总次数:0
代码可运行

这篇文章demo是为了一个粉丝(实力宠粉,手动微笑,哈哈)写的,正好今天周五,时间还是比较多的,不急着回家,因为回家也是玩游戏,留在办公室里面还可以多学习一些知识。和这篇文章类似,小程序扫码成功后带着参数跳转到指定页面,不同的地方是tab页的跳转。

5640239-1f87b845bf160fc2.png
5640239-1f87b845bf160fc2.png

但是,在小程序开发文档里面,我们发现switch是不能添加参数的。

解决办法:在switch跳转之前设置一个全局变量,到下一个页面的时候,直接去获取全局变量即可。

index.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- 底部的按钮 -->
<button class='Scancode' bindtap='getScancode'>绑定车辆</button>

index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result: ''
  },

  onLoad: function () {

  },

  getScancode: function () {
    var _this = this;
    // 允许从相机和相册扫码
    wx.scanCode({
     
      success: (res) => {
        getApp().globalData.showDialog = res.result;
        //wx.navigateTo({
      wx.switchTab({
       // url: '../details/details?showDialog=' + res.result
          url: '../details/details',

        })   
      } 
    })

  }

})

要跳转的tab页面

detail.wxml

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<view class='page_row'>
  <view class="search">

    <input class='carid' placeholder=" {{showDialog}}" focus="{{focus}}" />
    <input class='carnumber' placeholder="请输入车牌号和驾驶证号码" focus="{{focus}}" />

    <button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="primary"> 绑定</button>

  </view>
  <view class='tip'>
    定位标签和车辆绑定后即可看跟踪车辆位置
  </view>
</view>

details.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Page({
  data: {
    focus: false,
    inputValue: ''
  },
  onLoad: function (options) {
   
    var showDialog = getApp().globalData.showDialog
    console.log( showDialog)
    // 生命周期函数--监听页面加载
     this.setData({
       showDialog:showDialog
     })
  }
})

app.json

5640239-505aca798be360a1.png
5640239-505aca798be360a1.png

微信小程序 页面跳转 传递参数:

https://cloud.tencent.com/developer/article/1378306

小程序扫码成功后带着参数跳转到指定页面:

https://cloud.tencent.com/developer/article/1378305

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱摄影,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。对于博客上面有存在疑问或者不会的问题

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
小程序扫码成功后带着参数跳转到指定页面
要扫的二维码,通过草料二维码生成的,这个网站挺好的,用起来比较简单方便,可以直接输入文字生成二维码,也可以放入链接生成二维码。
王小婷
2018/12/26
5K0
小程序扫描二维码,正则校验
demo 小程序扫码成功后带着参数跳转到指定页面 https://www.jianshu.com/p/413c5831ddd6
王小婷
2025/05/18
990
小程序扫描二维码,正则校验
demo 小程序扫码成功后带着参数跳转到指定页面 https://www.jianshu.com/p/413c5831ddd6
王小婷
2019/03/15
1.3K0
微信小程序扫一扫的功能实现
突然接到了个小程序的项目,手上的管理后台终于可以放下一段时间了 ,算了一下,今年几乎都在写管理后台的几个项目,真心没有什么特别的进步,基本都是靠着组传代码,不断的重构,复用。
王小婷
2018/12/24
3.4K0
微信小程序扫一扫的功能实现
小程序云开发全套实战教程(最全)
在学习云开发的时候将自己的学习过程记录下来了,放在了网上,收获了一波好评,今天下午在办公室没有事情,也发现之前有人在博客里面评论,你这个教程还有一半哩,可能是csdn的自动搬运功能出来一点小问题,没有搬运成功吧,这里就手动复制粘贴成为一篇了,篇幅比较长,如果有不足或者不注意写错的地方,欢迎大家提出纠正哦。
王小婷
2019/01/28
16.3K2
小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)
接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。 具体是这样的一个流程,后面会一步步的实现。
王小婷
2019/01/03
4.3K0
小程序-云点播
之前在Web端用 h5connect.js 方式点播视频,现在需要移动到微信小程序中,求大佬解决帮助,急急急.... 谢谢啦!
用户7418541
2020/06/04
4.6K0
微信小程序扫描二维码的内容,作为参数跳转填入到下一个页面input框
scan.wxml <view class="container"> <view class='imagesize'> <image class='img' bindtap='getScancode' src="{{back}}"></image> </view> <view style="display: flex;justify-content: center;">请扫描卡号</view> <!-- <view wx:if="{{result !=''}}
王小婷
2021/07/13
7660
小程序最新标准授权登录流程+逻辑
小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的知识储备和应用技
王小婷
2025/05/18
2800
小程序最新标准授权登录流程+逻辑
全栈开发工程师微信小程序-下
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
达达前端
2019/07/03
7770
全栈开发工程师微信小程序-下
微信小程序 页面跳转 传递参数
微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。 先看一下官方给出的文档:
王小婷
2025/05/18
1770
微信小程序 页面跳转 传递参数
全栈开发工程师微信小程序-中(下)
wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元.
达达前端
2019/07/03
5540
教你写一个云上Hello world小程序
该文章介绍了一种小程序的代码结构和运行逻辑,并提供了相应的示例代码。同时,文章还涉及到了小程序开发中用到的组件和云服务,以及前端代码和后端代码的编写。
贺嘉
2017/02/18
3.9K0
教你写一个云上Hello world小程序
微信小程序|扫一扫功能实现
日常生活中,需要扫描二维码的地方随处可见,而如何让小程序实现扫一扫的功能呢?这就需要对js进行一个配置。
算法与编程之美
2020/02/14
4.2K0
微信小程序|扫一扫功能实现
微信小程序快速入门开发指南(三)
          url: app.globalData.uploadfileUrl,  //后台接收上传文件的接口
初九之潜龙勿用
2024/06/20
2050
微信小程序文章详情页跳转案例
前面写了一篇小程序访问公众号文章 https://www.jianshu.com/p/55701760189a 里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳转对应id所在的文章又该怎么写?
王小婷
2025/05/18
810
微信小程序文章详情页跳转案例
小程序云开发教程三:创建第一个界面
前面说到:微信小程序云开发 初学者入门教程一(云开发环境搭建)https://www.jianshu.com/p/5df4d51125e3,开通环境,部署环境之后,现在开始创建第一个界面。
王小婷
2018/12/28
9140
微信小程序云开发数据库操作一添加记录
微信小程序云开发 初学者入门教程二-前端操作数据库模块:https://www.jianshu.com/p/fb5be2e7f507中有写到对数据库的一些简单的操作处理,这篇主要是添加记录的一个小demo:
王小婷
2025/05/18
1040
微信小程序云开发数据库操作一添加记录
微信小程序云开发数据库操作删除记录
界面里点击添加之后,打开云开发控制台,查看数据库栏目,会发现多出来一条记录,执行删除语句之后,再次打开云开发控制台,那条语句会被删除。
王小婷
2025/05/18
810
微信小程序云开发数据库操作删除记录
如何在小程序中实现扫一扫功能
扫码,是现代生活不可或缺的一部分,不管是实现共享单车开锁,还是去自动售卖机付款,都需要扫码二维码或者条形码。那么,可不可以将扫码功能集成在小程序端呢?答案是可以的,我们可以调用小程序给出的扫码APIwx.scanCode(),实现调起客户端扫码界面进行扫码。
Dust
2018/11/09
28.9K5
如何在小程序中实现扫一扫功能
相关推荐
小程序扫码成功后带着参数跳转到指定页面
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验