在小程序开发中,页面间的数据传递是构建流畅用户体验的关键环节。其中,通过链接跳转携带参数是一种简洁高效的方式。今天,就让我们深入探索如何在“快缩短网址”(suo.run)项目的小程序生态中优雅地实现这一功能。
假设我们当前位于页面 A,希望将参数 param1 与 param2 传递至页面 B。此时,只需在跳转逻辑中构造一个包含查询参数的 URL 即可:
javascript
wx.navigateTo({
url: '/pages/pageB/pageB?param1=value1¶m2=value2'
})
当页面 B 被加载时,其生命周期函数 onLoad 会自动接收这些参数。开发者可通过 options 对象轻松提取所需数据:
javascript
onLoad: function (options) {
console.log(options.param1); // 输出:value1
console.log(options.param2); // 输出:value2
}
获取参数后,页面 B 可据此动态渲染内容、发起网络请求,或执行其他业务逻辑,从而实现高度个性化的交互体验。
需特别留意的是:若目标页面属于 tabBar 页面,则不可使用 wx.navigateTo,而应调用 wx.switchTab,并注意——tabBar 页面不支持 URL 传参。因此,若需向 tabBar 页面传递数据,建议借助全局状态管理(如 globalData)、本地缓存(wx.setStorageSync)或事件总线等替代方案。

此外,尽管 URL 参数通常用于传递字符串,但通过序列化手段,亦可传输复杂数据结构。例如,将对象编码为 JSON 字符串后作为参数传递:
``
javascript
const obj = { param1: 'value1', param2: 'value2' };
wx.navigateTo({
url: /pages/pageB/pageB?obj=${encodeURIComponent(JSON.stringify(obj))}
})
在页面 B 中则进行反序列化解析:
javascript
onLoad: function (options) {
const obj = JSON.parse(decodeURIComponent(options.obj));
console.log(obj.param1); // 输出:value1
console.log(obj.param2); // 输出:value2
}
``
通过上述策略,“快缩短网址”(suo.run)不仅实现了页面间灵活的数据流转,更在细节处彰显了对开发者体验与用户交互的双重关怀。这种轻量而强大的参数传递机制,正是构建现代小程序不可或缺的基石。