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

写小程序时，页面之间传参数是很常见的需求：从列表页点进详情要带上商品 id，活动页跳到下单页要标记来源渠道，搜索结果页继续往下走也不能把关键词丢了。这些信息如果都靠全局状态或缓存中转，代码会绕不少；直接跟在跳转链接后面传过去，会轻便很多。

比如从页面 A 跳到页面 B，要把 param1 和 param2 一起带过去。最常用的做法是直接拼在跳转路径后面：

wx.navigateTo({

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

})

等页面 B 打开后，在 onLoad 生命周期里就能拿到这些参数：

onLoad(options) {

  console.log(options.param1) // value1

  console.log(options.param2) // value2

}

onLoad 收到的 options，就是路径上带过来的查询参数。需要注意的是，它们的值都是字符串。拿到之后，可以根据这些值去请求接口、筛选数据，或者控制页面展示哪些模块。比如详情页拿到 id 后去请求商品信息，列表页拿到关键词后触发搜索，处理起来很直接。

这里有个容易踩的坑：如果目标页是 tabBar 页面，不能直接用 navigateTo 跳过去。tabBar 页面必须用 wx.switchTab 切换，而 switchTab 本身不支持在 url 后面拼查询参数。真要往 tabBar 页传值，一般会先存到全局变量或 Storage 里，切过去之后再读取。所以遇到 tabBar 页面，最好提前想好传值方式，别等跳转失败再回头改。



参数也不一定只能传简单字符串。像对象这种有结构的数据，可以先序列化再传：

const obj = { param1: 'value1', param2: 'value2' };

const query = encodeURIComponent(JSON.stringify(obj));

wx.navigateTo({

  url: '/pages/B/B?obj=' + query

});

到了页面 B，再解析还原：

onLoad(options) {

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

  console.log(obj.param1);

  console.log(obj.param2);

}

整体来看，链接带参更适合处理少量、可序列化的数据，大多数普通页面跳转场景都能覆盖。不过，如果数据量很大、结构复杂，或者多个页面要频繁共用同一份数据，还是用全局状态管理或缓存更省心，别把所有东西都堆在 URL 上。