摘要:本文主要介绍了微信小程序的页面导航相关知识,包括定义、实现方式、导航传参等内容。具体如下:
(1)导航方式
声明式导航:通过在页面上声明<navigator>
导航组件,可实现页面间跳转,包括跳转到 tabBar 页面、非 tabBar 页面和后退导航。
编程式导航:调用小程序的导航 API,如wx.switchTab()
、wx.navigateTo()
、wx.navigateBack()
等方法进行页面跳转。
(2)导航传参
传参方式:声明式导航可在url
后携带参数,编程式导航可在调用方法时传递参数。
接收参数:在目标页面的onLoad
事件中通过options参数接收导航传递的参数。
通过掌握这些页面导航知识,开发者能够更好地构建功能完整、交互流畅的小程序应用。
微信小程序_14_页面导航
- 一、页面导航概述
- 1.定义
- 2.实现方式
- 二、声明式导航
- 1.导航到 tabBar 页面
- 2.导航到非 tabBar 页面
- 3.后退导航
- 三、编程式导航
- 1.导航到 tabBar 页面
- 2.导航到非 tabBar 页面
- 3.后退导航
- 四、导航传参
- 1.声明式导航传参
- 2.编程式导航传参
- 3.在 onLoad 中接收导航参数
- 五、总结
一、页面导航概述
1.定义
页面导航指的是页面之间的相互跳转,是小程序开发中重要的功能之一。
2.实现方式
- 声明式导航:在页面上声明
<navigator>
导航组件,通过点击组件实现页面跳转。 - 编程式导航:调用小程序的导航 API,实现页面的跳转。
二、声明式导航
1.导航到 tabBar 页面
- 实现方式:在
<navigator>
组件中,设置url
属性和open-type
属性,url
表示要跳转的页面的地址,必须以/
开头;open-type
表示跳转的方式,必须为switchTab
。 - 示例代码
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
2.导航到非 tabBar 页面
- 实现方式:同样在
<navigator>
组件中,设置url
属性和open-type
属性,url
表示要跳转的页面的地址,必须以/
开头;open-type
表示跳转的方式,必须为navigate
。 - 示例代码
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
- 简化方式:为了简便,在导航到非 tabBar 页面时,
pen-type="navigate"
属性可以省略。
3.后退导航
- 实现方式:在
<navigator>
组件中,设置open-type
属性和delta
属性,open-type
的值必须是navigateBack
,表示要进行后退导航;delta
的值必须是数字,表示要后退的层级。