【小程序】声明式和编程式导航传参

简介: 【小程序】声明式和编程式导航传参

声明式导航

1. 导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必须以 / 开头open-type 表示跳转的方式,必须为 switchTab 示例代码如下:


8ac970a25fbf492785029393c85dea4d.png

2. 导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。 在使用 <navigator> 组件跳转到普通的非tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必须以 / 开头 open-type 表示跳转的方式,必须为 navigate 示例代码如下:  

8d3df4edcdc743eaacc1c6a97279cdc3.png

注意:为了简便,在导航到非 tabBar 页面时,open-type="navigate" 属性可以省略。

3. 后退导航


如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:  open-type的值必须是 navigateBack,表示要进行后退导航  delta 的值必须是数字,表示要后退的层级 示例代码如下:


cf4aded599f741f582e35a9f23d02730.png


注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。

编程式导航

1. 导航到 tabBar 页面


调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:

7039fbf62ecf46dba8398fdf166c3684.png


示例代码如下:


01649ac14f0f4cf185e3d30b37d25ca0.png


2. 导航到非 tabBar 页面

调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下:

8d9a132713b24a46afbc4514f1be8107.png

示例代码如下:

1f7ff40d57134fad97262cf863dcfe97.png

3. 后退导航

调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下:

 

65cf215dd94449929d6d4b765dca936a.png


示例代码如下:


33522cba11364a88b253c60606177d46.png


导航传参

1. 声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:  参数与路径之间使用 ? 分隔

参数键与参数值用 = 相连  

不同参数用 & 分隔

代码示例如下:

c7f35047cff644c885f8b2275eddbaf5.png


2. 编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数,代码示例如下:

75f269e377564e4488c3dd521da4742d.png


3. 在 onLoad 中接收导航参数


通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:

095be3d44bbd4ea7a48b9eb6a9f3bf53.png





相关文章
|
3月前
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
2月前
|
小程序
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
【微信小程序】-- 页面导航 -- 编程式导航(二十三)
|
1月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
11 0
|
2月前
|
小程序 JavaScript
【微信小程序】-- 页面导航 -- 导航传参(二十四)
【微信小程序】-- 页面导航 -- 导航传参(二十四)
|
2月前
|
小程序 API
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
|
3月前
|
前端开发 小程序 JavaScript
小程序页面导航全家桶:navigateTo、redirectTo、switchTab等方法一网打尽,快速掌握不同场景下的最佳应用!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
5月前
|
小程序
小程序与uniapp如何进行传参
小程序与uniapp如何进行传参
90 0
|
5月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
5月前
|
存储 小程序 JavaScript
微信小程序(十二)小程序页面跳转及传参
Bindtap传参的问题解决了,那么跳页的时候,也需要传递参数,毕竟,从文章列表页,跳到文章详情页,是需要文章id的。 小程序这部分到是提供了不少的方法,大概整理了一下。
139 0
|
5月前
|
小程序 JavaScript 前端开发
微信小程序(十一)小程序bindtap传参
文章列表页跳文章详情页的时候,我发现了一个问题,bindtap绑定的事件不能直接写:bindtap=jumpToArticle(item.id); 这样写不行,会报错:
46 0