当前位置: 首页 > news >正文

微信小程序如何实现页面传参和页面传递多个参数

前言

只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。

下面时多个参数页面传参的方式

let love=JSON.stringify(this.data.totle);let you=JSON.stringify(this.data.totleId)let csdn=JSON.stringify(this.data.totlePrice)wx.navigateTo({url: '/pages/fly/fly?totle='+love+'&totleid='+you+'&totleprice='+csdn,})

 

路径传递

通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’。

案例:A页面带参数跳转到B页面
A页面跳转代码

goB(){wx.navigateTo({url: '/pages/B/index?id=value',})},

B页面接收代码

onLoad: function (options) {console.log('id', options.id)
}

上面的案例是字符串参数,但是很多情况下需要传递对象,如下方代码。

Page({data: {userInfo:{name:'cym',age:16}},goB(){wx.navigateTo({url: '/pages/B/index?id='+this.data.userInfo,})},
})

如果使用上面同样的方式结构,输出的结果是:[object Object]

这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递,再到接收页面通过JSON.parse解析使用。

A页面跳转代码

 goB(){let userStr = JSON.stringify(this.data.userInfo)wx.navigateTo({url: '/pages/B/index?id='+userStr,})}

B页面接收代码

onLoad: function (options) {console.log('id', JSON.parse(options.id))}

全局变量

通过App全局对象存放全局变量。

app.js代码

App({// 存放对象的全局变量globalData:{},
})

A页面跳转代码

// 获取App对象
const app = getApp()
Page({/*** 页面的初始数据*/data: {userInfo: {name: 'cym',age: 16}},goB() {app.globalData.userInfo = this.data.userInfowx.navigateTo({url: '/pages/B/index',})},
})

B页面接收代码

// 获取全局对象const app = getApp()
Page({onLoad: function (options) {console.log(app.globalData.userInfo)}
})

存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内测中,每次小程序销毁就没有了。

数据缓存

通过存储到数据缓存中。

A页面跳转代码

goB() {wx.setStorageSync('userInfo', this.data.userInfo)wx.navigateTo({url: '/pages/B/index',})}

B页面接收代码

onLoad: function (options) {let userInfo = wx.getStorageSync('userInfo', this.data.userInfo)console.log(userInfo)}

存放在数据缓存里面,可以被多个页面使用,直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中,除非清楚数据缓存或者删除小程序否则一直存在。

事件通信

通过事件通信通道。

A页面跳转代码

goB() {wx.navigateTo({url: '/pages/B/index',success:(res)=>{// 发送一个事件res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })}})}

B页面接收代码

onLoad: function (options) {//	获取所有打开的EventChannel事件const eventChannel = this.getOpenerEventChannel();// 监听 index页面定义的 toB 事件eventChannel.on('toB', (res) => {console.log(res.userInfo) })}

总结

大家可以针对具体业务场景来进行选择合适自己的传参方式。

相关文章:

微信小程序如何实现页面传参和页面传递多个参数

前言 只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 4 种页面方法。 下面时多个参数页面传参的方式 let loveJSON.stringify(this.data.totle);let youJSON.stringify(this.data.totleId)let csdnJSON.stringify(this.data.totleP…...

ChatGPT⼊门到精通(3):ChatGPT 原理

OpenAI在2022年11⽉份发布ChatGPT,强⼤的⽂字对话、创意写作能⼒,全球掀起了⼀ 波AI浪潮。本⽂对ChatGPT的技术原理、厉害之处、可能的落地⽅向等⽅⾯进⾏了全⾯ 的解析,看完后会对ChatGPT有更深⼊的了解。 ⼀、前⾔ 2022年11⽉30⽇&#x…...

nginx配置keepalive长连接

nginx之keepalive详解与其配置_keepalive_timeout_恒者走天下的博客-CSDN博客 为什么要有keepalive? 因为每次建立tcp都要建立三次握手,消耗时间较长,所以为了减少tcp建立连接需要的时间,就可以设置keep_alive长连接。 nginx中keep_alive对…...

Thread.enumerate方法

Thread.enumerate方法的作用是将当前线程所对应的的线程组包含的所有线程放入一个数组 参见源码注释 /*** Copies into the specified array every active thread in the current* threads thread group and its subgroups. This method simply* invokes the {@link java.lan…...

* 号靠近数据类型,和靠近变量名, 号靠近数据类型,和靠近变量名,有什么区别

文章目录 一、int* age 和 int *age,* 号靠近数据类型,和靠近变量名,有什么区别:1. int* age:2. int *age: 二、int& age 和 int &age,& 号靠近数据类型,和靠近变量名,有什么区别&a…...

为了做好农业,拼多多请来顶尖农业专家当独立董事

8月29日,拼多多发布截至6月30日的2023年第二季度业绩报告。财报显示,拼多多集团今年第二季度收入为523亿元,同比增长66%,远超市场预期。 财报发布的同时,拼多多还宣布,其董事会已聘任荷兰瓦赫宁根大学终身…...

Linux服务器安装部署MongoDB数据库 – 【无公网IP远程连接】

文章目录 前言1.配置Mongodb源2.安装MongoDB数据库3.局域网连接测试4.安装cpolar内网穿透5.配置公网访问地址6.公网远程连接7.固定连接公网地址8.使用固定公网地址连接 前言 MongoDB是一个基于分布式文件存储的数据库。由 C 语言编写,旨在为 WEB 应用提供可扩展的高…...

Python+PIL+qrcode实现二维码自由—普通二维码+彩色二维码+logo二维码+动态二维码(附完整代码)

有时候我们需要自己制作一个二维码,然后进行打印下来,或者说在二维码中提前写上一段话比如搞笑的话,然后印在衣服上,然后穿出去玩!的🤣 那么今天我们分享一下制作二维码的几种方式: 哎&#x…...

【Spring Data JPA】JPA 常用查询函数

文章目录 前言函数查询表格 前言 函数查询的表格参考了官网的 2.7.3 版本的文档,JPA 的这种函数式查询方法改动不大,如果想知道更多的复杂查询,可以参考这篇文章 【Spring Data JPA】基于 JpaRepository 增删改查 官方文档地址 Spring Data…...

Visual Studio 2022的MFC框架——AfxWinMain全局对象和InitInstance函数

我是荔园微风,作为一名在IT界整整25年的老兵,今天我们来重新审视一下Visual Studio 2022下开发工具的MFC框架知识。 在看这篇帖子前,请先看我的另一篇帖子《Visual Studio 2022的MFC框架——应用程序向导》。 当程序调用了CWinApp类的构造…...

【网络】多路转接——poll | epoll

🐱作者:一只大喵咪1201 🐱专栏:《网络》 🔥格言:你只管努力,剩下的交给时间! 书接上文五种IO模型 | select。 poll | epoll 🍧poll🧁认识接口🧁简…...

音视频 ffmpeg命令视频录制(Windows)

先安装dshow软件 Screen Capturer Recorder, 项目地址:https://sourceforge.net/projects/screencapturer/files/ 然后查看可用设备名字:ffmpeg -list_devices true -f dshow -i dummy [dshow 0509d6c0] DirectShow video devices (some ma…...

【拾枝杂谈】从游戏开发的角度来谈谈原神4.0更新

君兮_的个人主页 勤时当勉励 岁月不待人 C/C 游戏开发 Hello,米娜桑们,这里是君兮_,结合最近的学习内容和以后自己的目标,今天又开了杂谈这个新坑,分享一下我在学习游戏开发的成长和自己的游戏理解,当然现在还是一枚…...

QT设置mainwindow的窗口title

QT设置mainwindow的窗口title 在QT程序中,通常会有**aaaa-[bbbbbbb]**这种形式的title,对于刚上手qt的程序员同学,可能会简单的以为修改这种title,就是使用setWindowTitle这个接口,其实只对了一半,这种形式…...

SaaS多租户系统架构设计

前言:多租户是SaaS(Software-as-a-Service)下的一个概念,意思为软件即服务,即通过网络提供软件服务。SaaS平台供应商将应用软件统一部署在自己的服务器上,客户可以根据工作的实际需求,通过互联网…...

Java自定义捕获异常

需求分析 ElectricalCustomerVO electricalCustomerVO new ElectricalCustomerVO(); electricalCustomerVO.setElcNumber(chatRecordsLog.getDeviceNumber()); List<ElectricalCustomerVO> electricalCustomerlist electricalCustomerMapper.selectElectricalCustomer…...

力扣--数组类题目27. 移除元素

给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 示例 1&#xff1a; 输入&#xff1a;nums [3,2,2,3], val 3 输出&#xff1a;2, nums [2,2] 解释&#xff1a;函数应该返回新的长度 2, 并且 n…...

实际并行workers数量不等于postgresql.conf中设置的max_parallel_workers_per_gather数量

1 前言 本文件的源码来自PostgreSQL 14.5&#xff0c;其它版本略有不同 PostgreSQL的并行workers是由compute_parallel_worker函数决定的&#xff0c;compute_parallel_worker是估算扫描所需的并行工作线程数&#xff0c;并不是您在postgresql.conf中设置的max_parallel_work…...

java定位问题工具

一、使用 JDK 自带工具查看 JVM 情况 在我的机器上运行 ls 命令&#xff0c;可以看到 JDK 8 提供了非常多的工具或程序&#xff1a; 接下来&#xff0c;我会与你介绍些常用的监控工具。你也可以先通过下面这张图了解下各种工具的基本作用&#xff1a; 为了测试这些工具&#x…...

【Java】基础入门 (十六)--- 异常

1.异常 1.1 异常概述 异常是指程序在运行过程中出现的非正常的情况&#xff0c;如用户输入错误、除数为零、文件不存在、数组下标越界等。由于异常情况再程序运行过程中是难以避免的&#xff0c;一个良好的应用程序除了满足基本功能要求外&#xff0c;还应具备预见并处理可能发…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...