微信小程序/uni-app tabBar 页面传参问题

先看下他们的文档

1、微信小程序

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

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

2、uni-app

https://uniapp.dcloud.net.cn/api/router.html#switchtab

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

那么问题来了,我从tabA跳转到tabB怎么传参呢?

参数工具类

其实可以通过一个全局变量,来传递参数,为了只传一次,每次获取之后就清空,避免污染数据

js 复制代码
// query-util.js
const DATA = new Map()
const KEY = 'query'

export default {
  get() {
    const value = DATA.get(KEY)
    DATA.clear()
    return value || {}
  },

  set(value) {
    DATA.set(KEY, value)
  },
}

使用方法

设置参数

js 复制代码
// PageA.js
Query.set({
  id: "id"
})

uni.switchTab({
   url: '/pages/item-detail/item-detail',
})

接收参数

js 复制代码
PageB.js
{
  // 页面首次加载
  onLoad: function (option) {
      const query = Query.get()
  },

  // 页面显示
  onShow: function () {
    const query = Query.get()
  }
}
相关推荐
Q_Q196328847540 分钟前
python+springboot+uniapp微信小程序题库系统 在线答题 题目分类 错题本管理 学习记录查询系统
spring boot·python·django·uni-app·node.js·php
百思可瑞教育2 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
不想吃饭e3 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
00后程序员张4 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
低代码布道师4 小时前
少儿舞蹈小程序(12)作品列表查询搭建
低代码·小程序
编程迪6 小时前
基于Java+Vue开发的家政服务系统源码适配H5小程序APP
小程序·家政小程序·家政系统源码·家政系统·家政源码
拼图2097 小时前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
不知名的前端专家8 小时前
uniapp原生插件 TCP Socket 使用文档
网络·tcp/ip·uni-app·netty
fakaifa9 小时前
【独立版】智创云享知识付费小程序 v5.0.23+小程序 搭建教程
小程序·uni-app·知识付费·源码下载·智创云享独立版
2501_9160074710 小时前
Transporter App 使用全流程详解:iOS 应用 ipa 上传工具、 uni-app 应用发布指南
android·ios·小程序·https·uni-app·iphone·webview