微信小程序/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()
  }
}
相关推荐
ModyQyW6 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
HERR_QQ14 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
耶啵奶膘20 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
racerun1 天前
小程序导航设置更多内容的实现方法
小程序
说私域1 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6681 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳1 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序