微信小程序怎么进行页面传参

微信小程序页面传参的方式有多种,每种方式都有其特定的使用场景和优势。以下是几种常见的页面传参方式,以及它们的具体使用方法和示例:

  1. URL参数传值
    • 原理:通过在跳转链接中附加参数,在目标页面的onLoad函数中获取参数。
    • 示例:
       

      javascript复制代码

      // 源页面跳转
      wx.navigateTo({
      url: '/pages/targetPage/targetPage?name=John&age=30'
      })
      // 目标页面接收参数
      Page({
      onLoad: function(options) {
      console.log(options.name); // 输出: John
      console.log(options.age); // 输出: 30
      }
      })
    • 特点:简单直接,适用于页面间简单的数据传递。
  2. 全局变量
    • 原理:在app.js文件中定义全局变量,通过getApp().globalData在源页面设置和目标页面获取变量的值。
    • 示例:
       

      javascript复制代码

      // app.js
      App({
      globalData: {
      userInfo: null
      }
      })
      // 源页面设置全局变量
      const app = getApp();
      app.globalData.userInfo = { name: 'John', age: 30 };
      // 目标页面获取全局变量
      const app = getApp();
      console.log(app.globalData.userInfo); // 输出: { name: 'John', age: 30 }
    • 特点:适用于在整个应用中共享数据。
  3. 缓存存储
    • 原理:使用wx.setStorageSync()在源页面设置存储的值,目标页面通过wx.getStorageSync()获取值。
    • 示例:
       

      javascript复制代码

      // 源页面设置缓存
      wx.setStorageSync('userInfo', { name: 'John', age: 30 });
      // 目标页面获取缓存
      let userInfo = wx.getStorageSync('userInfo');
      console.log(userInfo); // 输出: { name: 'John', age: 30 }
    • 特点:数据持久化存储,适用于跨页面、跨会话的数据传递。
  4. 路由传参
    • 原理:使用wx.navigateTo()传递参数,目标页面通过options参数获取传递的值。
    • 示例:与URL参数传值类似,但通常用于通过编程式导航传递参数。
  5. 事件触发传参
    • 原理:通过事件绑定,在源页面触发事件传递需要的参数,目标页面通过事件对象获取传递的值。
    • 示例:通常在自定义组件间使用,通过触发自定义事件传递数据。
  6. 组件传参
    • 原理:通过自定义组件的properties属性进行父子组件间的数据传递。
    • 示例:在自定义组件的properties中定义需要传递的属性,然后在父组件中设置该属性的值。
  7. 使用通信通道(wx.navigateTo的特有功能)
    • 原理:通过wx.navigateTo打开的页面间可以通过wx.getCurrentPages()获取页面栈,并使用页面栈中的页面实例进行通信。
    • 示例:这通常用于实现页面间的复杂交互和数据传递。

总结
微信小程序页面传参的方式多样,开发者可以根据实际需求选择合适的方式。简单直接的参数传递可以使用URL参数或路由传参;需要跨页面或持久化存储的数据可以使用全局变量或缓存存储;自定义组件间的数据传递可以使用组件传参;对于复杂的页面间交互,可以使用通信通道或其他高级功能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/20463.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Day45 动态规划part05

LC1049最后一块石头重量II(未掌握) 未掌握分析:其实本题跟LC416分割等和子集类似,本质上题目的要求是尽量让石头分成重量相同的两堆,相撞之后剩下的石头最小,也就是01背包问题weight和value都是stones数组,题目可以看…

深度学习-02-创建变量的函数

深度学习-02-创建变量的函数 本文是《深度学习入门2-自製框架》 的学习笔记,记录自己学习心得,以及对重点知识的理解。如果内容对你有帮助,请支持正版,去购买正版书籍,支持正版书籍不仅是尊重作者的辛勤劳动&#xff0…

Go-Admin后台管理系统源码(GO+VUE)编译与部署

1.克隆源码: # Get backend code git clone https://github.com/go-admin-team/go-admin.git# Get the front-end code git clone https://github.com/go-admin-team/go-admin-ui.git3.下载并安装GO开发环境: 3.编译管理后台后端 # Enter the go-admin backend project cd ./…

Pytorch索引、切片、连接

文章目录 1.torch.cat()2.torch.column_stack()3.torch.gather()4.torch.hstack()5.torch.vstack()6.torch.index_select()7.torch.masked_select()8.torch.reshape9.torch.stack()10.torch.where()11.torch.tile()12.torch.take()13.torch.scatter() 1.torch.cat() torch.cat(…

SQLServer2022创建表及字段增加备注

SQLServer2022创建表及字段增加备注,导入Oracle12c示例数据库HR schema下的表及数据。在SQL Server中,可以使用系统视图sys.extended_properties来查看表或字段的描述 官方文档地址 https://learn.microsoft.com/en-us/sql/ssms/visual-db-tools/column…

基于排队理论的客户结账等待时间MATLAB模拟仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 排队系统的组成 4.2 基本概念 4.3 常见的排队模型 5.完整程序 1.程序功能描述 基于排队理论的客户结账等待时间MATLAB模拟仿真,分析平均队长,平均等待时长&…

【FPGA约束】介绍set_property CLOCK_DEDICATED_ROUTE BACKBONE

在 Xilinx Vivado 设计套件中,使用 set_property 命令配合 CLOCK_DEDICATED_ROUTE 属性和 BACKBONE 值是为了指定时钟信号的布线策略。 set_property CLOCK_DEDICATED_ROUTE BACKBONE 这条命令的含义如下: set_property: 这是 Vivado 中用于设置属性的…

智慧交通视频AI监控识别解决方案

背景分析 随着社会的进步和科技的不断发展,互联网技术和AI视觉分析技术日益成熟,为传统交通监控领域带来了新的发展机遇。AI视觉分析技术的引入,不仅提升了交通监控的智能化和自动化水平,还显著减轻了交管部门的工作负担&#xf…

雷卯解析AECQ101与AECQ200

AEC(汽车电子委员会)推出了AECQ101和AECQ200这两项行业标准,作为汽车电子元件的“品质通行证”。上海雷卯已率先申请AECQ101证书。 鉴于有些客户不清楚AECQ101和AECQ200的区别,哪些供应商应该提供什么类别证书。本文将带您解析这…

本地知识库开源框架Fastgpt、MaxKB产品体验

本地知识库开源框架Fastgpt、MaxKB产品体验 背景fastgpt简介知识库共享部署 MaxKB总结 背景 上一篇体验了Quivr、QAnything两个开源知识库模型框架,这次介绍两款小众但是体验比较好的产品。 fastgpt 简介 FastGPT 是一个基于 LLM 大语言模型的知识库问答系统&am…

第四范式Q1业务进展:驰而不息 用科技锻造不朽价值

5月28日,第四范式发布今年前三个月的核心业务进展,公司坚持科技创新,业务稳步拓展,用人工智能为千行万业贡献价值。 今年前三个月,公司总收入人民币8.3亿元,同比增长28.5%,毛利润人民币3.4亿元&…

oc中synchronized的实现原理

在Objective-C(OC)中,synchronized的实现原理主要是基于对象锁(monitor lock)的机制来确保线程安全的。以下是对synchronized实现原理的详细解释: 1. 对象锁(Monitor Lock) 概念&…

python猜数字游戏

猜数字游戏 计算机随机产生一个1~100的随机数,人输入自己猜的数字, 计算机给出对应的提示“大一点”,”小一点“或”恭喜你猜对了“,直到猜中为止。 如果猜的次数超过7次,计算机温馨提示“智商余额明显不足” import …

如何在 JavaScript 中检查空字符串、未定义和 null 值?

在 JavaScript 编程中,遇到空字符串、未定义(undefined)或 null 值是相对常见的情况。为了确保代码的鲁棒性与稳定性,我们需要准确地识别这些值。本文将详细探讨识别空字符串、未定义和 null 值的方法,同时讨论其区别和应用场景。 什么是 “空字符串”、“未定义” 和 “…

SLAM精度评估—evo

evo是一款用于SLAM轨迹精度的评估工具。核心功能是(1)能够绘制(传感器运动)轨迹,(2)评估估计轨迹与真值(ground truth)的误差。evo支持多种数据集的轨迹格式(TUM、KITT、…

【Python】Python变量和函数的命名规范

基本原理 Python是一种广泛使用的高级编程语言,以其简洁性和可读性而闻名。在Python中,良好的命名规范对于编写清晰、易于维护的代码至关重要。Python社区遵循一套约定俗成的命名规范,这些规范有助于开发者之间的协作,并使代码更…

用户购物性别模型标签(USG)之决策树模型

一、USG模型引入: 首先了解一下,如何通过大数据来确定用户的真实性别, 经常谈论的用户精细化运营,到底是什么? 简单来讲,就是将网站的每个用户标签化,制作一个属于用户自己的网络身份证。然后,运营人员 通…

D3D 顶点格式学习

之前D3D画三角形的代码中有这一句, device.VertexFormat CustomVertex.TransformedColored.Format; 这是设置顶点格式; 画出的三角形如下, 顶点格式是描述一个三维模型的顶点信息的格式;可以包含以下内容, 位置…

Python3 笔记:每天一个函数——str.join()

join() :连接字符串数组。将字符串、元组、列表中的元素以指定的字符(分隔符)连接生成一个新的字符串。 语法:sep.join(seq) 参数说明: sep:分隔符。可以为空。 seq:要连接的元素序列、字符串…

Xcode设置cocoapods库的最低兼容版本

目录 前言 1.使用cocoapods遇到的问题 2.解决办法 1.用法解释 1. config.build_settings: 2.IPHONEOS_DEPLOYMENT_TARGET 2.使用实例 3.注意事项 1.一致性 2.pod版本 前言 这篇文章主要是介绍如何设置cocoapods三方库如何设置最低兼容的版本。 1.使用cocoapods遇到的…