微信小程序开发教程-页面跳转-编程式导航高级部分 作者:马育民 • 2026-06-21 15:09 • 阅读:10008 # 页面参数传递 ### 基础参数传递(字符串/数字,通用所有跳转) 跳转页:url拼接参数 ```javascript wx.navigateTo({ url: `/pages/detail/detail?id=1001&name=手机&price=3999` }) ``` 接收页:在onLoad生命周期中通过options接收 ```javascript Page({ onLoad(options) { console.log('商品ID:', options.id) console.log('商品名称:', options.name) } }) ``` ### 复杂对象传递(url传参失效解决方案) 问题:url无法直接传递对象,直接拼接会出现参数丢失、格式错乱 解决方案:JSON\.stringify序列化 \+ encodeURIComponent编码 ```javascript // 跳转页 const goodsInfo = { id:1001, name:"手机", list:[1,2,3] } wx.navigateTo({ url: `/pages/detail/detail?goods=${encodeURIComponent(JSON.stringify(goodsInfo))}` }) // 接收页 onLoad(options) { const goods = JSON.parse(decodeURIComponent(options.goods)) console.log('完整商品对象', goods) } ``` ### 页面双向通信(EventChannel,返回页面传值) 适用场景:从B页面选择内容,返回A页面带回数据,替代全局变量 ```javascript // A页面:跳转并监听返回数据 wx.navigateTo({ url: '/pages/select/select', success: (res) => { // 获取事件通道 const channel = res.eventChannel // 监听B页面传回的数据 channel.on('sendDataBack', (data) => { console.log('B页面返回的数据', data) }) } }) // B页面:返回时发送数据 const eventChannel = this.getOpenerEventChannel() eventChannel.emit('sendDataBack', {value: '我是返回的内容'}) // 执行返回 wx.navigateBack() ``` --- ### 路由使用场景选型(开发直接抄) | 业务场景 | 推荐路由API | | --- | --- | | 列表打开详情、新开弹窗页面 | wx\.navigateTo | | 登录/启动页跳转首页,禁止返回 | wx\.redirectTo | | 自定义返回按钮、返回多层页面 | wx\.navigateBack | | 底部Tab栏相互切换 | wx\.switchTab | | 退出登录、强制清空所有页面 | wx\.reLaunch | --- # 高频坑点避坑指南(90%新手都会错) ### 坑1:navigateTo/redirectTo 无法跳转Tab页面 ✅ 正确做法:Tab页面只能使用 **switchTab / reLaunch** 跳转 ### 坑2:switchTab 不能携带url参数 ✅ 解决方案:Tab页面数据通过全局变量app\.js、缓存storage获取 ### 坑3:页面栈超过10层跳转失败 ✅ 解决方案:频繁跳转页面使用redirectTo替换页面,减少页面栈堆积 ### 坑4:直接传递JSON对象导致参数丢失 ✅ 解决方案:必须搭配encodeURIComponent和decodeURIComponent编码解码 ### 坑5:redirectTo/reLaunch跳转后,无法返回之前页面 ✅ 业务注意:登录、引导页这类无需返回的页面再使用,详情页不要乱用 原文出处:http://malaoshi.top/show_1GW3XNsuw02q.html