小程序Day31:声明式导航传参,使用?和=分隔参数
&分隔;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编码,然后再拼接到路径中。 以上就是关于小程序中声明式导航传参参数与路径之间使用的总结,希望能对大家有所帮助。如有错误或需要补充,请指正。
![](https://csdnimg.cn/release/download_crawler_static/86334737/bg5.jpg)
剩余23页未读,继续阅读
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 19
- 资源: 350
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- 利用迪杰斯特拉算法的全国交通咨询系统设计与实现
- 全国交通咨询系统C++实现源码解析
- DFT与FFT应用:信号频谱分析实验
- MATLAB图论算法实现:最小费用最大流
- MATLAB常用命令完全指南
- 共创智慧灯杆数据运营公司——抢占5G市场
- 中山农情统计分析系统项目实施与管理策略
- XX省中小学智慧校园建设实施方案
- 中山农情统计分析系统项目实施方案
- MATLAB函数详解:从Text到Size的实用指南
- 考虑速度与加速度限制的工业机器人轨迹规划与实时补偿算法
- Matlab进行统计回归分析:从单因素到双因素方差分析
- 智慧灯杆数据运营公司策划书:抢占5G市场,打造智慧城市新载体
- Photoshop基础与色彩知识:信息时代的PS认证考试全攻略
- Photoshop技能测试:核心概念与操作
- Photoshop试题与答案详解
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)