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

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

声明式导航

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





相关文章
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
80 0
|
1月前
|
小程序 IDE 开发工具
Python编程--个人信息修改小程序
Python编程--个人信息修改小程序
|
2月前
|
人工智能 小程序 API
文字转语音神器+Python编程搞定语音报时小程序
文字转语音神器+Python编程搞定语音报时小程序
|
2月前
|
人工智能 小程序 API
ChatTTS+Python编程搞定语音报时小程序
ChatTTS+Python编程搞定语音报时小程序
|
2月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
1月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
|
2月前
|
人工智能 小程序 API
ChatTTS+Python编程实现语音报时小程序
ChatTTS+Python编程实现语音报时小程序
|
3月前
|
存储 小程序 物联网
园区导航小程序:轻量级设计,打造高效智慧园区
随着园区的规模不断扩大,功能区划分日益复杂,导致访客和新员工在没有有效导航的情况下容易迷路。传统APP导航虽能解决部分问题,但其下载安装繁琐、占用手机内存大、且非高频使用导致的闲置,让许多用户望而却步。园区导航小程序的出现,以其无需下载、即用即走的特性,为访客提供一个便捷、高效的导航体验。
101 0
园区导航小程序:轻量级设计,打造高效智慧园区
|
4月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
337 0
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
46 0

热门文章

最新文章