在微信小程序开发中，传递多个参数是一个高频场景，很多开发者习惯用简单的字符串拼接或data-*属性传值，但一旦参数里包含对象、数组或特殊符号，就容易踩坑。今天我们从实际业务出发，彻底讲透多种传参方式，并对比它们的适用场景与隐藏问题。

一、用data-*传多个参数：最直观但最易出错的方式

最简单的方式是直接在组件上绑定data-属性，比如：
<view data-id="100" data-name="张三" bindtap="handleTap">点击</view>
在事件处理函数中通过event.currentTarget.dataset获取：
handleTap(e) { const { id, name } = e.currentTarget.dataset; }

但问题来了：如果参数值包含中文、空格或特殊符号，比如data-name="张 三"，小程序会自动将空格转义为驼峰命名规则，实际获取的可能是dataset.name而不是dataset.张三。更隐蔽的是，当参数值是一个对象时，比如data-info="{{ {a:1, b:2} }}"，经过WXML渲染后，dataset里拿到的会变成[object Object]字符串。

实战避坑：如果参数是纯数字或简短字符串，data-*完全够用。但如果涉及复杂数据，建议用下面的方式。

二、用自定义属性传对象：优雅但需注意序列化

直接在WXML里写data-item="{{ item }}"，其中item是一个JS对象。这种做法在小程序基础库2.0以上是支持的，但要注意：
1. 对象不能太深（建议不超过3层嵌套），否则渲染性能会下降。
2. 如果对象里包含函数或undefined，会被自动剔除。
3. 在列表渲染中，如果每个item都传完整对象，会占用额外内存。

举个例子：你的商品列表里每个商品有{id, name, price, tags: ['热卖','新品']}，直接用data-item="{{ item }}"传给点击事件，在函数里就能直接拿到完整对象。这比拆成多个data-*属性清爽得多。

三、通过navigator跳转传参：URL编码与decodeURIComponent的配合

页面跳转时传参最常用：
wx.navigateTo({ url: '/pages/detail/detail?id=100&name=张三' })
在目标页面的onLoad里用options接收。

但一旦参数包含中文或特殊符号，比如name=张三&李四，URL会被截断，因为&被解析为参数分隔符。解决方案是先编码再解码：
const params = { id: 100, name: '张三&李四' }
const query = Object.keys(params).map(key => `${key}=${encodeURIComponent(params[key])}`).join('&')
wx.navigateTo({ url: `/pages/detail/detail?${query}` })
在目标页面：
const name = decodeURIComponent(options.name)

这里有个容易忽略的点：如果参数里包含JSON字符串，比如data={a:1,b:2}，直接拼接会被解析为data={a:1这样的错误。正确做法是encodeURIComponent(JSON.stringify(data))，接收时再JSON.parse(decodeURIComponent(options.data))。

四、用全局数据或缓存传参：适合超长或敏感数据

当参数超过URL长度限制（微信限制约2KB），或者参数包含敏感信息（如用户token），用navigator传参就不合适了。此时可以：
1. 存入getApp().globalData，在目标页面直接读取。
2. 存入wx.setStorageSync，目标页面用wx.getStorageSync读取。

但要注意并发问题：如果用户快速连续跳转两个页面，且两个页面都用同一个全局变量，后一个跳转可能会覆盖前一个的数据。建议用唯一标识符，比如生成一个随机key，跳转时只传这个key，目标页面根据key去全局数据里取。

举个例子：
const key = 'detail_' + Date.now()
getApp().globalData[key] = { ...大量参数 }
wx.navigateTo({ url: `/pages/detail/detail?key=${key}` })
在目标页面onLoad里：
const data = getApp().globalData[options.key]

五、组件间传参：事件机制与Properties的灵活组合

自定义组件里，父组件传多个参数给子组件，直接在properties里定义多个属性：
properties: { id: Number, name: String, info: Object }
然后在WXML里写<my-component id="{{id}}" name="{{name}}" info="{{info}}" />

这样写虽然清晰，但属性多了很冗余。一个技巧是只传一个对象属性：
子组件定义properties: { data: Object }，父组件传<my-component data="{{ {id, name, info} }}" />。注意这里用双花括号包住对象字面量，否则WXML会解析错误。

子组件要修改数据并传回父组件，用triggerEvent：
this.triggerEvent('change', { id: this.data.data.id, newName: '新名字' })
父组件监听bind:change事件，通过e.detail拿到多个参数。

六、实际场景对比：哪种方式最省心？

假设你要做一个商品详情页，需要传递商品ID、用户来源（字符串）、优惠券信息（对象）、以及一个回调函数（但函数不能传，需用事件机制）。

错误示范：把所有参数拼在URL里，结果优惠券对象变成[object Object]，用户来源里的中文乱码。

推荐方案：用全局数据加唯一key的方式。在列表页点击商品时：
const key = 'goods_' + goodsId + '_' + Date.now()
getApp().globalData[key] = { goodsId, from: '首页banner', coupon: { type: '满减', value: 20 } }
wx.navigateTo({ url: `/pages/detail/detail?key=${key}` })
详情页onLoad里取数据，并在onUnload里删除这个key，避免内存泄漏：
const data = getApp().globalData[options.key]
delete getApp().globalData[options.key]

这种方式既避免了URL长度限制，又解决了中文乱码，还能传对象，唯一代价是多写几行删除逻辑。

七、扩展：传参时的性能与安全考量

1. 不要传整个列表：比如你在列表页点击一个商品，不要把这个商品所在数组的整个对象都传过去。只需传ID，详情页根据ID重新请求数据。这样既减少内存占用，也保证数据是最新的。

2. 注意参数污染：多个页面共用一个全局数据对象时，记得用唯一key隔离。曾经有项目因为用了globalData.currentGoods做跳转传参，结果用户快速点击两个商品，后一个覆盖了前一个，导致页面显示错乱。

3. URL传参的安全隐患：如果参数里包含用户ID或订单号，用URL传参会在浏览器历史记录里留下痕迹（虽然小程序没有浏览器历史，但某些场景下仍可能被截获）。敏感数据建议走全局或缓存。

4. 组件传参的响应式陷阱：子组件properties里接收对象时，如果父组件直接修改对象的某个属性（比如this.data.item.name = '新名字'），子组件不会自动更新。必须用this.setData({ 'item.name': '新名字' })或者重新赋值整个对象。

八、一句话总结各场景的选择

简单场景（数字、短字符串）→ data-*属性
页面跳转且参数简单 → URL传参 + encodeURIComponent
页面跳转且参数复杂或敏感 → 全局数据 + 唯一key
组件传参 → properties接收对象 + triggerEvent传回
列表渲染传参 → data-item={{ item }}，但注意性能

传参没有银弹，关键是理解不同方式的边界条件。下次遇到传多个参数时，先问自己三个问题：参数里有没有中文或特殊符号？参数体积会不会超过2KB？是否需要跨页面同步修改？想清楚这三个问题，选方式就不会出错。