小程序路由传参的方法?

小程序路由传参的方法有两种:

1.通过URL参数传递:可以在跳转页面时在URL中携带参数,目标页面可以通过获取URL参数来使用。使用wx.navigateTowx.redirectTo方法进行页面跳转,并在URL中添加参数。

示例代码如下:

html 复制代码
// 页面A跳转到页面B,并传递参数
wx.navigateTo({
  url: '/pages/bPage/bPage?id=123&name=小明'
});

在页面B中,可以通过getCurrentPages方法获取当前页面栈,并从栈顶获取参数:

html 复制代码
// 页面B获取参数
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const options = currentPage.options; // 获取URL参数

console.log(options.id);   // 输出:123
console.log(options.name); // 输出:小明

2.使用全局数据存储:可以将参数存储在全局数据中,在目标页面中直接获取和使用。通过getApp()方法获取小程序实例,在实例中定义一个全局数据变量,在源页面设置参数值,在目标页面获取参数值即可。

示例代码如下:

html 复制代码
// 在源页面设置参数值
const appInstance = getApp();
appInstance.globalData.id = 123;
appInstance.globalData.name = '小明';

// 页面A跳转到页面B
wx.navigateTo({
  url: '/pages/bPage/bPage'
});

在页面B中,可以通过getApp()方法获取小程序实例,并直接从全局数据中获取参数值:

html 复制代码
// 页面B获取参数
const appInstance = getApp();
console.log(appInstance.globalData.id);   // 输出:123
console.log(appInstance.globalData.name); // 输出:小明

以上是两种常见的小程序路由传参方法,可以根据具体需求选择使用。

相关推荐
克里斯蒂亚诺更新6 小时前
微信小程序使用vant4 weapp自定义菜单 但是弹出层却被菜单遮挡的解决办法
微信小程序·小程序·notepad++
小羊Yveesss10 小时前
2026年微信小程序制作工具怎么选?
微信小程序·小程序
河北清兮网络科技11 小时前
深度解析:2026石家庄短视频APP开发真实成本、隐性开销与避坑方案
大数据·小程序·app·短剧app·广告联盟
微擎应用12 小时前
宠物门店系统 - 连锁宠物医院多门店小程序+公众号双端管理系统
小程序·宠物
2501_9159214313 小时前
uni-app 上架 iOS 的完整流程(无需依赖 Mac)
android·macos·ios·小程序·uni-app·iphone·webview
前端 贾公子13 小时前
使用 wxappUnpacker 工具进行 MAC 微信小程序反编译
macos·微信小程序·小程序
CRMEB系统商城1 天前
CRMEB多商户系统(Java)v2.3公测版发布
java·开发语言·人工智能·小程序·开源·php
嫂子的姐夫1 天前
050-wx小程序合肥住房
爬虫·python·小程序·逆向
Geek_Vison2 天前
政务一网通APP如何引入AI能力,通过一个AI助手就能够调用所有的功能,实现对话即办事
人工智能·ai·小程序·uni-app·小程序容器
黄华SJ520it2 天前
跨境分销小程序:全球市场新机遇
小程序·系统开发