小程序路由传参的方法?

简介: 小程序路由传参的方法?

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

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

示例代码如下:

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

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

// 页面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()方法获取小程序实例,在实例中定义一个全局数据变量,在源页面设置参数值,在目标页面获取参数值即可。


示例代码如下:

// 在源页面设置参数值
const appInstance = getApp();
appInstance.globalData.id = 123;
appInstance.globalData.name = '小明';
 
// 页面A跳转到页面B
wx.navigateTo({
  url: '/pages/bPage/bPage'
});

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

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

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

相关文章
|
编解码 小程序
微信小程序11177版本开启控制台方法
微信小程序11177版本开启控制台方法
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
490 167
|
11月前
|
Web App开发 移动开发 小程序
公众号小程序H5网页像素流送UE5模型的方法分享
本文探讨了如何通过像素流送技术在小程序、公众号等平台展示复杂的3D模型(如UE5引擎开发的楼盘模型、数字孪生展厅)。该技术将GPU和CPU算力需求转移到服务器端,使用户侧无需高性能硬件即可流畅体验。通过Webrtc实现实时云渲染,确保毫秒级响应,且兼容多种浏览器。使用点量云流等产品级软件,老项目只需重新打包为EXE格式,即可轻松嵌入H5网页、小程序或公众号中,支持Unity、WebGL等多种3D应用及传统CAD模型。
360 1
|
12月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
小程序 JavaScript
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
这篇文章讲解了微信小程序中页面跳转的方法,包括使用按钮点击事件和调用方法实现跳转,以及推荐使用`this.pageRouter.navigateTo`代替`wx.navigateTo`的方式。
微信小程序中的页面跳转(通过点击按钮、调用方法的形式)
|
小程序 安全
Fiddler抓取小程序后端请求导入AppScan扫描快捷方法
【8月更文挑战第26天】这是一种利用 Fiddler 捕获小程序后端请求并导入 AppScan 进行安全扫描的方法。首先安装配置 Fiddler 并设置手机代理,通过 Fiddler 捕获请求;接着导出这些请求为 .saz 文件,并在 AppScan 中导入此文件,配置扫描参数后启动扫描以检测安全漏洞。操作时需确保有合法授权并遵循相关法规。尽管不同版本软件操作细节可能有所不同,但整体流程类似。
675 1
|
小程序 JavaScript API
小程序实现分享的三种方法
【8月更文挑战第20天】
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
613 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
334 0
在线课堂+工具组件小程序uniapp移动端源码