微信小程序(路由传参)

news/2024/7/25 21:56:48/文章来源:https://blog.csdn.net/Syyynb/article/details/139119182

微信小程序的路由系统和其他Web应用类似,主要通过页面路径和URL参数进行页面导航和数据传递。下面详细介绍微信小程序路由的基本使用方法和相关技巧。

1. 基本页面导航

1.1 配置页面路径

在微信小程序的 app.json 文件中,需要配置小程序的页面路径。这里定义了小程序中包含的所有页面路径。

{"pages": ["pages/index/index","pages/detail/detail"]
}
1.2 使用导航 API 跳转页面

微信小程序提供了多种导航 API,可以在页面之间进行跳转。

wx.navigateTo保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页面
wx.redirectTo关闭当前页面,跳转到应用内的某个页面
wx.switchTab跳转到指定的 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch关闭所有页面,打开到应用内的某个页面

 

 

例子:使用 wx.navigateTo 跳转页面
 
wx.navigateTo({url: '/pages/detail/detail?id=123&name=John'
});

2. URL 参数传递

2.1 传递参数

在跳转页面时,可以在 URL 中附加参数,例如上面的例子中,我们在 URL 中附加了 idname 参数。

2.2 获取参数

在目标页面的 onLoad 方法中,可以通过 options 参数获取传递过来的参数:

 
Page({onLoad: function (options) {console.log(options.id);   // 输出 123console.log(options.name); // 输出 John}
});

3. 动态构建 URL 参数

有时需要传递动态生成的参数,可以通过字符串拼接或模板字符串来实现:

const id = 123;
const name = 'John';
wx.navigateTo({url: `/pages/detail/detail?id=${id}&name=${name}`
});

4. 复杂数据传递

如果需要传递复杂的数据(例如对象或数组),可以将数据转换为 JSON 字符串传递,并在目标页面进行解析。

4.1 传递 JSON 字符串
const data = {id: 123,name: 'John',items: [1, 2, 3]
};
wx.navigateTo({url: `/pages/detail/detail?data=${encodeURIComponent(JSON.stringify(data))}`
});

4.2 解析 JSON 字符串

在目标页面中,通过 decodeURIComponentJSON.parse 解析数据:

 
Page({onLoad: function (options) {const data = JSON.parse(decodeURIComponent(options.data));console.log(data.id);   // 输出 123console.log(data.name); // 输出 Johnconsole.log(data.items);// 输出 [1, 2, 3]}
});

5. 使用全局数据或本地存储

当传递的数据过大或复杂时,URL 参数可能不是最佳选择。可以使用全局数据或本地存储。

5.1 使用全局数据

app.js 中定义全局数据:

App({globalData: {userInfo: null}
});

在页面中设置和获取全局数据:

// 设置全局数据
const app = getApp();
app.globalData.userInfo = {id: 123,name: 'John'
};// 获取全局数据
Page({onLoad: function () {const app = getApp();const userInfo = app.globalData.userInfo;console.log(userInfo.id);   // 输出 123console.log(userInfo.name); // 输出 John}
});

5.2 使用本地存储

通过 wx.setStorageSync wx.getStorageSync 来存储和获取数据:

// 设置本地存储
wx.setStorageSync('userInfo', {id: 123,name: 'John'
});// 获取本地存储
Page({onLoad: function () {const userInfo = wx.getStorageSync('userInfo');console.log(userInfo.id);   // 输出 123console.log(userInfo.name); // 输出 John}
});

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

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

相关文章

Hexo博客部署到云服务器

1、本地搭建hexo 本地搭建hexo过程详见hexo官网,步骤比较详细,按照步骤搭建即可 2、hexo主题 我使用的Butterfly主题,主题配置请查看Butterfly安装文档 3、部署到云服务器 3.1、服务器环境 nginx 搭建 使用云服务商提供的远程登陆登录进…

vscode远程登录阿里云服务器【使用密钥方式--后期无需再进行密码登录】【外包需要密码】

1:windows主机上生成【私钥】【公钥】 1.1生成公钥时不设置额外密码 1.2生成公钥时设置额外密码【给外包人员使用的方法】 2:在linux服务器中添加【公钥】 3:本地vscode连接linux服务器的配置 操作流程如下 1.1本地终端中【生成免密登录…

《TCP/IP网络编程》(第十一章)进程间通信

进程间通信意味着两个不同的进程间可以交换数据,它使得不同的进程能够协同工作,实现复杂的系统功能。 1.通过管道实现进程间通信 下图是基于 管道(PIPE) 的进程间通信结构模型 管道不属于进程的资源,属于操作系统的资…

[UE5]安卓调用外置摄像头拍照(之显示画面)

目录 部分参考文献(有些有用的我没标,没放上来) 要点 总蓝图 结果 部分参考文献(有些有用的我没标,没放上来) 【UE】获取USB摄像头画面_虚幻捕获硬件摄像头-CSDN博客 UE4安卓调用摄像头拍照确保打…

【移除链表元素】python

目录 题目: 方法: 知识: 代码: 题目: 方法: 在头节点前增加一个虚拟头节点 知识: 链表中的每一个节点只包含当前值val和指向下一个next 代码: class Solution:def removeEle…

【Linux进程篇】Linux内核——程序地址空间的初构

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; 程序地址空间回顾 我们在讲C语言的时候&#xff0c;大家应该都见过这样的空间布局图&#xff1a; 为了更好的验证不同的数据在内存中的存储位置&#xff0c;下面这段代码我们可以去实验一下&#xff1a; #include<…

ChatGPT:轻松搞定论文润色,让语言更流畅

GPT从3.5一路升级到4.0&#xff0c;不仅在国外火得一塌糊涂&#xff0c;还悄悄地在我们论文润色的世界里掀起了一场革命。 首先&#xff0c;得承认&#xff0c;虽然这玩意儿是“洋货”&#xff0c;用起来可能得费点脑筋——注册个账号啦&#xff0c;买个会员啦之类的。但它对我…

SQL数据库多层嵌套 json转sql建表语句,SQL数据库里数组里对象数据怎么创建

1. uniapp sqlite 一个数组包含对象嵌套对象通过主外键方式插入数据库&#xff1a; // 假设有一个对象数组&#xff0c;对象中包含嵌套对象 const objectsArray [{parentObject: {id: 1,name: Parent 1,// 其他父对象属性},childObject: {id: 11,parentId: 1,name: Child 1 o…

Python: 使用pyotp实现OTP一次性密码验证

使用pyotp实现OTP一次性密码验证 OTP的基本原理 生成一个共享秘钥作为随机数的种子服务端通过种子计算出当前的密码客户端也通过相同的种子计算出当前的密码验证客户端生成的密码和服务端生成的密码是否匹配 服务端和客户端计算的方式一样 共享密钥 时间因子 算法 > 密…

Numba 的 CUDA 示例(1/4):踏上并行之旅

按照本系列从头开始使用 Python 学习 CUDA 编程 介绍 GPU&#xff08;图形处理单元&#xff09;&#xff0c;顾名思义&#xff0c;最初是为计算机图形学开发的。从那时起&#xff0c;它们几乎在每个需要高计算吞吐量的领域都无处不在。这一进步得益于 GPGPU&#xff08;通用 G…

关于微信小程序低功耗蓝牙ECharts实时刷新(涉及自定义缓冲区)

简单的蓝牙显示&#xff08;串口手动发数据测试&#xff09; 最近搞了这方面的东西&#xff0c;是刚刚开始接触微信小程序&#xff0c;因为是刚刚开始接触蓝牙设备&#xff0c;所以这篇文章适合既不熟悉小程序&#xff0c;又不熟悉蓝牙的新手看。 项目要求是获取到蓝牙传输过来…

JEPaaS 低代码平台 accessToTeanantInfo SQL注入漏洞复现

0x01 产品简介 JEPaaS低代码开发平台开源版 旨在帮助企业快速实现信息化和数字化转型。该平台基于可视化开发环境,让软件开发人员和业务用户通过直观的可视化界面来构建应用程序 ,而不是传统的编写代码方式。 用户可以在开发平台灵活各个图形化控件,以构建业务流程、逻辑和…

pytorch深度学习-环境搭建-2

1.1下载cudnn,解压 1.2.找到本级cuda安装路径 1.3.刚才解压文件复制到cuda安装目录 2.1 安装pytouch

Day23:Leetcode:530.二叉搜索树的最小绝对差 + 501.二叉搜索树中的众数 + 236. 二叉树的最近公共祖先

LeetCode&#xff1a;530.二叉搜索树的最小绝对差 问题描述 解决方案&#xff1a; 1.思路 中序遍历 2.代码实现 class Solution {int pre;int ans;public int getMinimumDifference(TreeNode root) {ans Integer.MAX_VALUE;pre -1;dfs(root);return ans;}public void d…

全球首例光伏电场网络攻击事件曝光

快速增长的光伏发电正面临日益严重的网络安全威胁。近日&#xff0c;日媒报道了首个针对光伏电场的网络攻击事件。 首例公开确认的光伏电网攻击 日本媒体《产经新闻》近日报道&#xff0c;黑客劫持了一个大型光伏电网中的800台远程监控设备(由工控电子制造商Contec生产的Solar…

2024HBCPC:E Breakfast II

题目描述 作为一个合格的大学生&#xff0c;你不仅需要学习成绩好&#xff0c;还需要会买包子和鸡蛋。 今天&#xff0c;又轮到你们给你的导师买早饭了&#xff01; 这一次你们一共需要给导师买 n n n 个包子和 m m m 个鸡蛋&#xff08;请注意&#xff0c;这一次可能不再只…

网关(GateWay)- 快速使用

引入依赖 <!-- gateway --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId> </dependency> 路由配置 server:port: 8088 spring:application:name: api-gatew…

Clickhouse Bitmap 类型操作总结—— Clickhouse 基础篇(四)

文章目录 创建 Bitmap 对象Bitmap 转换为整数数组计算总数&#xff08;去重&#xff09;值指定start, end 索引生成子 Bitmap指定 start 索引和数量限制生成子 Bitmap指定偏移量生成子 Bitmap是否包含指定元素两个 Bitmap 是否存在相同元素一个是否为另一个 Bitmap 的子集求最小…

25 使用MapReduce编程了解垃圾分类情况

测试数据中1表示可回收垃圾&#xff0c;2表示有害垃圾&#xff0c;4表示湿垃圾&#xff0c;8表示干垃圾。 统计数据中各类型垃圾的数量&#xff0c;分别存储可回收垃圾、有害垃圾、湿垃圾和干垃圾的统计结果。 &#xff08;存储到4个不同文件中&#xff0c;垃圾信息&#xff0…

VsCode创建Python虚拟环境

不同的项目&#xff0c;大多使用不同的版本与包&#xff0c;为每个项目创建不同的环境&#xff0c;可以防止版本等的不同而带来的影响。 Python自3.3版本之后&#xff0c;官方自带了用于创建虚拟环境的venv模块&#xff0c;以下将介绍venv模块在Python虚拟环境的用法。 1.安装相…