当前位置: 首页 > 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;还应具备预见并处理可能发…...

基于算法竞赛的c++编程(28)结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)

【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

前端打包工具简单介绍

前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry&#xff08;入口&#xff09; 指定应用的起点文件&#xff0c;比如 src/index.js。 Module&#xff08;模块&#xff09; Webpack 把项目当作模块图&#xff0c;模块可以是 JS、CSS、图片等…...

关于 ffmpeg设置摄像头报错“Could not set video options” 的解决方法

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/148515355 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...