小程序路由传参的方法?

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

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

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

相关推荐
吴声子夜歌5 天前
小程序——布局示例
小程序
luffy54595 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟5 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
小小王app小程序开发5 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序
一叶星殇5 天前
微信小程序请求拦截器踩坑:避免重复刷新 token
微信小程序·小程序
hello kitty w5 天前
4. 基本语法
小程序
CHU7290355 天前
探索淘宝扭蛋机小程序:创意互动与趣味体验的融合
小程序
头发还在的女程序员5 天前
【免费下载】企业能源管理系统
小程序·策略模式·能源管理
吴声子夜歌6 天前
小程序——样式与布局
小程序
hello kitty w6 天前
3.小程序方法的封装
javascript·小程序