锋盈数科-知识库 Logo
首页
软件开发
计算机基础
Hello Halo
新手必读
关于本知识库
登录 →
锋盈数科-知识库 Logo
首页 软件开发 计算机基础 Hello Halo 新手必读 关于本知识库
登录
  1. 首页
  2. 软件开发
  3. 小程序
  4. 小程序页面路由传参方法

小程序页面路由传参方法

0
  • 小程序
  • 发布于 2024-09-26
  • 0 次阅读
黄健
黄健


小程序页面路由传参是小程序开发中常见的需求,它允许在不同页面之间传递和接收数据。以下是几种常见的小程序页面路由传参方法:


1. URL参数传递

这是最直接和常用的传参方式。在跳转页面时,将需要传递的参数附加在URL后面,通过?和&分隔不同的参数。在目标页面的onLoad方法中,可以通过options参数获取这些传递过来的数据。

示例代码:

// 跳转页面并传递参数  
wx.navigateTo({  
  url: '/pages/detail/detail?id=123&name=test'  
});  

// 在目标页面的onLoad方法中接收参数  
onLoad(options) {  
  console.log(options.id); // 输出: 123  
  console.log(options.name); // 输出: test  
}

2. 全局变量传递

通过小程序的全局变量(通常定义在app.js的globalData对象中)来传递参数。在跳转前,将需要传递的数据存储在全局变量中,然后在目标页面中通过getApp()方法获取全局变量并读取数据。

示例代码:

// 在app.js中定义全局变量  
App({  
  globalData: {  
    key1: 'value1',  
    key2: 'value2'  
  }  
});  

// 在跳转前设置全局变量  
getApp().globalData.key1 = 'newValue1';  

// 跳转到目标页面  
wx.navigateTo({  
  url: '/pages/targetPage/targetPage'  
});  

// 在目标页面中获取全局变量  
const app = getApp();  
onLoad() {  
  console.log(app.globalData.key1); // 输出: newValue1  
}

3. 本地存储传递

使用小程序的本地存储API(如wx.setStorageSync和wx.getStorageSync)来传递参数。在跳转前,将需要传递的数据存储在本地存储中,然后在目标页面中读取这些数据。这种方式适用于需要跨页面、跨会话持久化存储的场景。

示例代码:

// 在跳转前存储数据到本地  
wx.setStorageSync('key1', 'value1');  

// 跳转到目标页面  
wx.navigateTo({  
  url: '/pages/targetPage/targetPage'  
});  

// 在目标页面中读取本地存储的数据  
onLoad() {  
  const value1 = wx.getStorageSync('key1');  
  console.log(value1); // 输出: value1  
}

4. 通信通道(EventChannel)传递

EventChannel是wx.navigateTo接口独有的,它允许两个页面之间建立一个通信渠道,实现数据的双向传递。在跳转前,可以在当前页面通过eventChannel.emit发送数据,在目标页面通过eventChannel.on接收数据。

示例代码(略去详细实现,因为涉及较多代码和逻辑,且非所有情况都适用):

  • 在当前页面通过eventChannel.emit发送数据。
  • 在目标页面通过eventChannel.on接收数据。

5. 页面栈操作

虽然页面栈本身不直接用于传参,但你可以通过操作页面栈(如wx.navigateBack)来返回数据给上一个页面。然而,这通常不是直接传参的方式,而是结合其他机制(如全局变量、本地存储等)来实现数据的反向传递。

总结

小程序页面路由传参有多种方式,每种方式都有其适用场景。在实际开发中,应根据具体需求和场景选择合适的传参方式。URL参数传递是最简单直接的方式,适用于简单的数据传递;全局变量和本地存储适用于需要跨页面、跨会话持久化存储的场景;通信通道(EventChannel)适用于需要实现页面间双向通信的场景;而页面栈操作则更多地用于页面导航和返回逻辑的处理。

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/141685124

标签: #微信小程序 16
相关文章

微信小程序开发项目 2024-09-26 17:57

微信小程序开发项目是一个复杂而细致的过程,它涉及到从项目规划、设计、开发到测试、发布及维护等多个环节。以下是对微信小程序开发项目的详细探讨,包括项目准备、开发流程、项目架构、优化与发布等方面。 一、项目准备 1. 明确项目目标与需求 在开始微信小程序开发项目之前,首先需要明确项目的目标和需求。这包括

基于微信小程序的挂号管理系统-web管理端 2024-09-26 16:51

流量和预约挂号数可视化功能 系统具备人流量和预约挂号数的可视化功能,能够实时展示各项数据,通过图表等形式直观呈现。这有助于医疗机构快速了解服务状况,优化资源配置,提升运营效率,为患者提供更为便捷的挂号服务。 患者信息管理功能 系统提供了患者信息管理功能,患者信息管理功能全面且高效,支持患者信息的录入

基于微信小程序的挂号管理系统-小程序端 2024-09-26 16:51

微信小程序端系统功能实现 登录功能 系统登录功能中,用户只需在登录界面输入正确的用户名和密码,即可快速进入系统。登录功能还采用了先进的加密技术,保障用户信息的安全性,让用户能够放心使用。 注册功能 系统注册功中,用户仅需按照提示填写基本信息,如姓名、手机号、身份证号等,即可完成注册。系统会对输入信息

基于微信小程序的挂号管理系统-01 2024-09-26 16:51

技术:Vue 微信小程序 SpringBoot Mybatis-plus SpringMVC Mysql elementUI ECharts 原文链接: https://blog.csdn.net/qq_53568730/article/details/138139001

微信小程序-02 2024-09-26 16:51

swiper 和 swiper-item 组件的基本使用 轮播图 <!--pages/list/list.wxml--> <swiper class="swiper-container"> <swiper-item> <view class="item">A</view> </swiper-it

微信小程序开发注意事项 2024-09-26 16:51

跳转tabBar页面时,不能使用navigator标签、 wx.navigateTo、wx.redirectTo方法跳转页面,可以使用wx.switchTab(Object object)和wx.reLaunch(Object object) 延时执行 setTimeout(function(){

目录

IT 外包服务商

  • 意见投递
  • zyf6619

软件开发应用

主菜单

  • 首页
  • 软件开发
  • 计算机基础
  • Hello Halo
  • 新手必读
  • 关于本知识库
Copyright © 2024 your company All Rights Reserved. Powered by Halo.