如何在小程序中使用链接跳转带参数的方法

在小程序开发中，页面间的数据传递是绕不开的基础需求。尽管全局状态管理和本地缓存能解决不少问题，但在多数场景下，通过跳转链接直接携带参数依然是最直观、最轻量的选择。不过，看似简单的链接传参，在实际业务中往往会遇到一些容易踩坑的特殊情况。

最基础的用法非常直接。假设从页面 A 跳转到页面 B，并传递 param1 和 param2，只需在 URL 后拼接 query 字符串即可：

wx.navigateTo({

  url: '/pages/B/B?param1=value1&param2=value2'

})

在目标页面 B 中，框架会在 onLoad 生命周期内自动将 URL 参数解析为对象，直接通过 options 就能获取：

onLoad(options) {

  console.log(options.param1); // 输出 value1

  console.log(options.param2); // 输出 value2



// 拿到参数后，即可请求接口或控制页面渲染

}

这种常规操作没什么难度，但真实的业务场景往往复杂得多。

第一个常见痛点是传递复杂对象。如果直接把对象拼接到 URL 里，目标页面接收到的只会是 [object Object]，因为 URL 传参本质上只能处理字符串。要通过 URL 传递对象，必须先进行序列化和编码，以避免特殊字符截断链接：

// 页面 A 发送

const myObj = { name: 'test', id: 123 };

const objStr = encodeURIComponent(JSON.stringify(myObj));

wx.navigateTo({ url: /pages/B/B?obj=${objStr} });



// 页面 B 接收

onLoad(options) {

  const myObj = JSON.parse(decodeURIComponent(options.obj));

  console.log(myObj.name); 

}

然而，如果对象层级较深或数据量较大，强行拼在 URL 里不仅代码冗长，还极易触发长度限制。对于这类复杂数据，更推荐使用微信官方提供的 EventChannel（事件通道），或者借助全局状态管理，这样代码结构会优雅得多。

另一个常见难题是向 TabBar 页面传参。如果目标页面是底部导航栏页面，使用常规的 wx.navigateTo 无法跳转，必须改用 wx.switchTab。问题在于，原生的 wx.switchTab 接口不支持在 URL 中携带 query 参数，即使强行拼接，onLoad 也无法获取。

遇到这种情况，纠结于 URL 传参意义不大，通常可以采用以下几种成熟的替代方案：

首先是利用全局变量或本地缓存。跳转前将参数存入 app.globalData 或 wx.setStorageSync，然后在 TabBar 页面的 onShow 生命周期中读取并及时清理。

其次是借助状态管理库。如果项目中使用了 MobX、Pinia 等工具，直接修改 store 中的状态，让 TabBar 页面自动响应即可。

最后是改用 wx.reLaunch。如果业务逻辑允许关闭所有页面并重新打开，reLaunch 是支持携带参数的。不过代价是页面栈会被完全清空，导致物理返回键失效。

链接传参是小程序中非常灵活的交互方式，有助于实现页面间的解耦。但在实际开发中，需要根据具体的数据类型和目标页面的属性，灵活选择最合适的传递方案。理清这些细节，能帮我们在日常业务开发中避开不少暗坑。

¡Enlace corto generado exitosamente!

Resultado de generación en lote

如何在小程序中使用链接跳转带参数的方法