微信小程序(路由传参)

微信小程序的路由系统和其他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.mzph.cn/bicheng/18539.shtml

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

相关文章

哪有异地组网的工具?

不同地区的电脑与电脑、设备与设备、电脑与设备之间的信息远程通信,一直是企业和个人面临的难题。通过使用天联组网的解决方案,这个问题将迎刃而解。 天联组网解决方案 天联组网是一种可以实现不同地区之间电脑、设备及其之间的信息远程通信的解决方案。…

Trie字符串统计-java

Trie,又称前缀树或字典树,是一种有序树,用于保存关联数组,其中的键通常是字符串。 目录 前言☀ 一、Trie字符串统计☀ 二、算法思路☀ 1.Trie树定义🌙 2.变量解释🌙 3.插入操作🌙 4.Trie树查找操…

vim文本编辑器相关用法

1. 引言 Vim,一个功能强大的文本编辑器,它在程序员和系统管理员中广受欢迎。Vim是Vi的增强版,提供了一系列高级功能,包括语法高亮、代码补全、多窗口编辑等。 2. Vim的安装 Vim的安装过程在不同的Linux发行版中略有不同。以下是…

MapStruct高级用法

MapStruct高级用法 依赖注入(Using dependency injection) Mapper(componentModel SPRING) public interface SpringMapper {SpringMapper MAPPER Mappers.getMapper(SpringMapper.class);PersonDTO personDoToDTO(Person person); }public static fin…

【class18】人工智能初步----语音识别(4)

【class17】 上节课,我们学习了: 语音端点检测的相关概念,并通过代码切分和保存了音频。 本节课,我们将学习这些知识点:1. 序列到序列模型2. 循环神经网络3. 调用短语音识别接口 知其然,知其所以然 在调用语…

数组单调栈-901. 股票价格跨度、leetcode

单调栈作为一种数据结构在求解类递增、递减方面的题目中有较为广泛的应用,在以往的leetcode中所见到的相关单调栈的题目均为单一元素,今天刷到901题目时,想到了将数组元素作为单调栈中元素的方法进行求解。 题目链接及描述 901. 股票价格跨…

【c++leetcode】69. Sqrt(x)

问题入口 二分搜索 最困难的是能否意识到用二分搜索法解题。 算术平方根的区间在[1, x] 。代码如下&#xff1a; class Solution { public:int mySqrt(int x) {if (x 1 || x 0){return x;}int64_t start 1;int64_t end x;while (start < x){int64_t mid start (en…

开源模型应用落地-Gradio正确集成Fastapi-助力模型交互-实践篇(二)

一、前言 Gradio提供了直观的用户界面,当与Fastapi结合后,用户可以通过界面轻松地与模型进行交互,上传数据、获取推理结果等,使得交互性增强,提升了用户体验。 在开源大语言模型遍地开花的时代,正确的使用Gradio和Fastapi,通过两者的集成,使得模型的部署和使用过程更加…

以果决其行,只为文化的传承

从他们每一个人的身上&#xff0c;我们看到传神的东西&#xff0c;就是他们都能用结果&#xff0c;去指引自己前进的方向&#xff0c;这正是我要解读倪海厦老师的原因&#xff0c;看倪海厦2012年已经去世&#xff0c;到现在已经十几年时间了&#xff0c;但是我们看现在自学中医…

【Pandas】深入解析`pd.to_sql()`函数

【Pandas】深入解析pd.to_sql()函数 &#x1f308; 欢迎莅临我的个人主页&#x1f448;这里是我深耕Python编程、机器学习和自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;并乐于分享知识与经验的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1…

2024年第六届中青杯数学建模竞赛浅析

获取比赛资料&#xff0c;请关注gzh“小何数模”&#xff01; 本次中青杯数学建模的赛题已正式出炉&#xff0c;无论是赛题难度还是认可度&#xff0c;该比赛都是仅次于数模国赛的独一档&#xff0c;可以用于国赛前的练手训练。考虑到大家解题实属不易&#xff0c;为了帮助大家…

JavaSE:StringBuilder和StringBuffer类

1、引言 在上一篇文章中&#xff0c;我们理解了字符串的常用方法&#xff0c;细心的同学大概已经发现&#xff0c;不管是将字符串中的字符转变为大写或小写&#xff0c;或是完成字符串的替换&#xff0c;又或是去除空白字符等等&#xff0c;只要涉及到字符串的修改&#xff0c…

【PB案例学习笔记】-10 进度条使用

写在前面 这是PB案例学习笔记系列文章的第10篇&#xff0c;该系列文章适合具有一定PB基础的读者。 通过一个个由浅入深的编程实战案例学习&#xff0c;提高编程技巧&#xff0c;以保证小伙伴们能应付公司的各种开发需求。 文章中设计到的源码&#xff0c;小凡都上传到了gite…

Java用反射reflect来实例化对象: class.getDeclaredConstructor().newInstance()

Java用反射reflect来实例化对象: class.getDeclaredConstructor().newInstance() 从java9开始, class.newInstance()已过时, 被加上Deprecated强烈反对注解 SuppressWarnings("removal")CallerSensitiveDeprecated(since"9")public T newInstance()throws …

防止自动化攻击的最佳实践

防止自动化攻击的最佳实践 在当今的网络安全环境中&#xff0c;保护用户账户免受自动化攻击已成为每个网站和应用程序的重要任务。攻击者可以利用多种不同类型的自动化攻击来尝试破坏用户账户。本文将详细介绍常见的攻击类型及其防御机制&#xff0c;帮助您更好地保护用户账户…

C# ManualResetEvent的用法

在C#中&#xff0c;ManualResetEvent类是一个同步基元&#xff0c;用于控制多个线程的执行顺序。下面是一些ManualResetEvent类的常见用法&#xff1a; 等待一个事件的发生&#xff1a;可以使用ManualResetEvent的WaitOne方法来等待事件的发生。当事件被触发时&#xff0c;Wait…

adb 连接机顶盒命令

抓机顶盒日志的方法&#xff0c;使用此命令进行抓日志&#xff0c;个别无法抓日志的盒子可以使用此方法 1、安卓9.0版本查询命令 ps -ef |grep com.cm.webos.iptv 2、安卓4.4版本查询命令 ps |grep com.cm.webos.iptv 3、查询顺序&#xff1a;首先进入shell下进行操作 adb she…

C++青少年简明教程:for循环语句

C青少年简明教程&#xff1a;for循环语句 C的for循环语句是一种迭代控制语句&#xff0c;用于重复执行一段代码。 语法格式&#xff1a; for(表达式1&#xff1b;表达式2&#xff1b;表达式3) 循环体 for循环语句执行流程图&#xff1a; 不太好理解&#xff0c;请看下图&am…

VSCode配置Lua5.4安装

参考&#xff1a;VSCode 配置 Lua 开发环境(清晰明了)_lua vscode-CSDN博客 1.下载 Lua Binaries Download (sourceforge.net) 2.配置环境变量 解压放到某文件夹&#xff1a; 环境变量&#xff1a; 3.VSCode安装插件 4.配置 5.测试

Python | Leetcode Python题解之第116题填充每个节点的下一个右侧节点指针

题目&#xff1a; 题解&#xff1a; class Solution:def connect(self, root: Node) -> Node:if not root:return root# 从根节点开始leftmost rootwhile leftmost.left:# 遍历这一层节点组织成的链表&#xff0c;为下一层的节点更新 next 指针head leftmostwhile head:#…