扫描二维码 上传二维码
选择防红平台类型,避免链接被拦截
选择允许访问的平台类型

小程序链接跳转带参数方法详解与实战示例

小程序页面间的数据流转是开发中的高频需求,URL传参作为最基础的通信手段,其用法远比表面看起来更具技巧性。

基础传参的完整链路

从页面A跳转到页面B时,参数直接拼接在路径后方:

wx.navigateTo({
url: '/pages/b/detail?category=electronics&sort=price_asc'
})


页面B通过onLoad的生命周期钩子接收:

onLoad(options) {
const { category, sort } = options
// 发起数据请求或渲染差异化UI
}


这里有个细节:所有参数值都会被序列化为字符串。若传数字123,接收端拿到的是"123",需要手动类型转换。

TabBar页面的特殊处理

当目标页面属于底部导航栏时,navigateTo会失效,必须换用switchTab

wx.switchTab({
url: '/pages/home/index?refresh=true'
})


switchTab不支持直接带参数——这是官方设计的限制。变通方案是在跳转前将数据写入全局状态或本地缓存,目标页面onShow时读取。

复杂数据的传递策略

对象或数组不能直接塞进URL,需要借助encodeURIComponent

const params = { filters: [{ key: 'brand', value: 'Apple' }] }
wx.navigateTo({
url: /pages/list/result?query=${encodeURIComponent(JSON.stringify(params))}
})




接收端反向解析:



onLoad(options) {
const query = JSON.parse(decodeURIComponent(options.query))
}




需注意URL长度限制,过量数据应考虑wx.setStorage或全局状态管理。

参数校验与容错



生产环境中建议对参数做防御性处理:

onLoad(options) {
const id = options.id || ''
if (!id) {
wx.showToast({ title: '参数缺失', icon: 'none' })
return
}
this.fetchDetail(id)
}


这种传参机制虽然原始,但胜在无需额外依赖,适合轻量级场景。对于深层嵌套的页面栈或频繁双向通信,可评估EventChannel或状态管理方案的投入产出比。