小程序路由传参的方法?

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

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); // 输出:小明

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

相关推荐
G佳伟1 小时前
‌微信小程序Webview转发页面空白问题解决方案‌
微信小程序·小程序
vx_vxbs663 小时前
【SSM电动车智能充电服务平台】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·spring cloud·小程序·php·idea
低代码布道师5 小时前
医疗小程序12出诊列表
低代码·小程序
Coder-coco6 小时前
游戏助手|游戏攻略|基于SprinBoot+vue的游戏攻略系统小程序(源码+数据库+文档)
java·vue.js·spring boot·游戏·小程序·论文·游戏助手
小小王app小程序开发20 小时前
盲盒小程序一番赏衍生玩法:魔王赏、非酋赏、狂欢赏差异化分析
小程序
2501_915106321 天前
iOS App 测试工具全景分析,构建从开发调试到线上监控的多阶段工具链体系
android·测试工具·ios·小程序·uni-app·iphone·webview
头发还在的女程序员2 天前
基于JAVA语言的短剧小程序-抖音短剧小程序
java·开发语言·小程序
2501_916007472 天前
iOS 应用性能测试的工程化流程,构建从指标采集到问题归因的多工具协同测试体系
android·ios·小程序·https·uni-app·iphone·webview
book多得2 天前
刷题专用微信小程序推荐
微信小程序·小程序
00后程序员张2 天前
iOS 抓不到包怎么办?从 HTTPS 解密、QUIC 排查到 TCP 数据流分析的完整解决方案
android·tcp/ip·ios·小程序·https·uni-app·iphone