小程序Day31:声明式导航传参,使用?和=分隔参数
下载需积分: 0 | PDF格式 | 1.09MB |
更新于2024-01-20
| 130 浏览量 | 举报
&分隔;Urlencoding编码"。
今天是小程序学习的第31天,我们要讨论的内容是声明式导航传参参数与路径之间的使用方法。在小程序开发中,有时我们需要在页面之间传递参数,这样才能实现一些交互和数据传输的功能。
在小程序中,声明式导航是一种非常常见和方便的页面跳转方式。它可以通过在标签中设置属性来进行页面跳转,并且可以将参数传递到目标页面。
首先,我们需要了解参数与路径之间的分隔符。在小程序中,路径和参数之间使用问号(?)进行分隔。例如,如果我们要跳转到目标页面,并传递参数id=1,可以这样设置路径:
```html
<navigator url="pages/target/index?id=1">跳转到目标页面</navigator>
```
在目标页面中,我们可以通过获取路径参数来使用传递的参数值。为了方便处理参数,小程序提供了一个全局对象`getCurrentPages`,通过它我们可以获取到当前页面栈的实例,以便获取页面路径和参数。
在目标页面的逻辑代码中,我们可以使用以下方式获取参数:
```javascript
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1]; // 获取当前页面栈的最后一个页面
const options = currentPage.options; // 获取页面参数对象
console.log(options.id); // 输出传递的id参数的值
```
在以上代码中,我们通过`getCurrentPages`获取当前页面栈的实例,并通过`pages.length - 1`获取到当前页面的实例。然后,我们可以通过`currentPage.options`获取到传递的参数对象,进而获取具体的参数值。
需要注意的是,小程序中的参数传递是通过Urlencoding编码的。Urlencoding是一种将特殊字符转换为%xx格式的编码方式,以便在URL中传输。所以,如果我们的参数值包含特殊字符或中文,需要先对其进行Urlencoding编码,然后再传递。
小程序提供了一个全局的方法`encodeURIComponent`来进行Urlencoding编码。我们可以在传递参数之前,对参数值进行编码,然后再拼接到路径中。例如:
```javascript
let id = 1;
let name = "小明";
let url = `pages/target/index?id=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`;
console.log(url); // 输出 pages/target/index?id=1&name=%E5%B0%8F%E6%98%8E
```
在以上代码中,我们使用了模板字符串来拼接路径,并在参数值前调用`encodeURIComponent`进行编码,然后拼接到路径中。
总结来说,小程序中的声明式导航传参,参数与路径之间使用问号(?)分隔,参数键与参数值用等号(=)相连,不同的参数之间使用和号(&)进行分隔。在目标页面中,我们可以通过`getCurrentPages`获取到当前页面栈的实例,然后通过`currentPage.options`获取到传递的参数对象,进而获取具体的参数值。
在传递参数时,如果参数值包含特殊字符或中文,需要先使用`encodeURIComponent`进行Urlencoding编码,然后再拼接到路径中。
以上就是关于小程序中声明式导航传参参数与路径之间使用的总结,希望能对大家有所帮助。如有错误或需要补充,请指正。
相关推荐





87 浏览量

97 浏览量



94 浏览量

160 浏览量

Jaihwoe
- 粉丝: 21
最新资源
- 乘风多用户PHP统计系统v4.1:源码与项目实践指南
- Vue.js拖放组件:vue-smooth-dnd的封装与应用
- WPF图片浏览器开发教程与源码分享
- 泰坦尼克号获救预测:分享完整版机器学习训练测试数据
- 深入理解雅克比和高斯赛德尔迭代法在C++中的实现
- 脉冲序列调制与跳周期调制相结合的Buck变换器研究
- 探索OpenCV中的PCA人脸检测技术
- Oracle分区技术:表、索引与索引分区深入解析
- Windows 64位SVN客户端下载安装指南
- SSM与Shiro整合的实践案例分析
- 全局滑模控制Buck变换器设计及其仿真分析
- 1602液晶动态显示实现源码及使用教程下载
- Struts2、Hibernate与Spring整合在线音乐平台源码解析
- 掌握.NET Reflector 8.2.0.42:反编译及源码调试技巧
- 掌握grunt-buddha-xiaofangmoon插件的入门指南
- 定频滑模控制在Buck变换器设计中的应用