微信小程序开发---页面导航

目录

一、页面导航的概念

二、页面导航的实现

(1)声明式导航

1、概念

2、导航到tabBar页面

3、导航非tabBar页面

4、后退导航

(2)编程式导航

1、导航到tabBar页面

2、导航到非tabBar页面

3、后退导航

三、导航传参

(1)声明式导航传参

(2)编程式导航传参

(3)在onLoad中接收导航参数


一、页面导航的概念

页面导航指的是页面之间的相互跳转。在小程序中有两种方式实现页面导航。

(1)声明式导航

(2)编程式导航

二、页面导航的实现

(1)声明式导航

1、概念

在页面上声明一个navigator导航组件,通过点击该组件实现页面跳转

2、导航到tabBar页面

在使用navigator组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

url表示要跳转的页面地址,必须以/开头

open-type表示跳转的方式,必须为switchTab

javascript 复制代码
<navigator url="/pages/message/message" open-type="switchTab">消息页面</navigator>

3、导航非tabBar页面

在使用navigator组件跳转到指定的非tabBar页面时,需要指定url属性和open-type属性,其中:

url表示要跳转的页面地址,必须以/开头

open-type表示跳转的方式,必须为navigate,注意在导航到非tabBar页面时,open-type="navigate"属性可以省略

javascript 复制代码
<navigator url="/pages/test/test" open-type="navigate">到测试</navigator>

4、后退导航

如果想要后退到上一页面或者多级页面,则需要指定open-type属性和delta属性,其中:

open-type的值必须是navigateBack,表示要进行后退导航

delta的值必须是数字,表示后退的层级,默认值是1

javascript 复制代码
<navigator open-type="navigateBack" delta="1">返回</navigator>

(2)编程式导航

调用小程序的导航API,实现页面的跳转

1、导航到tabBar页面

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

javascript 复制代码
属性       类型     是否必选   说明  
url       string      是      需要跳转的tabBar页面路径,路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)
javascript 复制代码
<button bind:tap="handl">到消息页面</button>

//js文件
 handl(e){
   wx.switchTab({
     url: '/pages/message/message',
   })
  },

2、导航到非tabBar页面

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

javascript 复制代码
属性       类型     是否必选   说明  
url       string      是      需要跳转的非tabBar页面路径,路径后不能带参数 
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)

3、后退导航

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

javascript 复制代码
属性       类型     是否必选     说明  
delta     number      否      返回的页面数,如果delta大于现有的页面数,则返回首页,默认是1
success   function    否      接口调用成功的回调函数
fail      function    否      接口调用失败的回调函数
complete  function    否      接口调用结束的回调函数(不管成功还是失败都会执行)
javascript 复制代码
handl(e){
   wx.navigateBack()
  },

三、导航传参

(1)声明式导航传参

navigator组件的url属性用来指定路径,路径后面带着参数,如下:

javascript 复制代码
<navigator url="/pages/test/test?name=as&age=10">到消息</navigator>

这里我发现跳转到tanbBar页面时无法携带参数的

(2)编程式导航传参

javascript 复制代码
handl(e){
    wx.navigateTo({
      url: '/pages/test/test?name=gq&age=100',
    })
  },

这里我发现跳转到tabBar页面时无法携带参数的,甚至可能会报错

(3)在onLoad中接收导航参数

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

javascript 复制代码
 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
     console.log(options)
  },
相关推荐
知识分享小能手8 小时前
uni-app 入门学习教程,从入门到精通,uni-app 企业项目实战:鲁嗑瓜子项目开发知识点(9)
前端·javascript·学习·微信小程序·小程序·uni-app·vue
知识分享小能手8 小时前
uni-app 入门学习教程,从入门到精通,uni-app中uCharts组件学习((8)
vue.js·学习·ui·微信小程序·小程序·uni-app·echarts
社会底层无业大学生11 小时前
uniapp微信小程序简单表格展示
微信小程序·小程序·uni-app·vue·1024程序员节
從南走到北11 小时前
JAVA无人自助共享系统台球室源码自助开台约球交友系统源码小程序
java·微信·微信小程序·小程序·1024程序员节
2501_9159184114 小时前
iOS 26 查看电池容量与健康状态 多工具组合的工程实践
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090616 小时前
iOS 架构设计全解析 从MVC到MVVM与使用 开心上架 跨平台发布 免Mac
android·ios·小程序·https·uni-app·iphone·webview
2501_916008891 天前
Web 前端开发常用工具推荐与团队实践分享
android·前端·ios·小程序·uni-app·iphone·webview
2501_915921431 天前
“HTTPS 个人化”实战,个人站点与设备调试的部署、验证与抓包排查方法
网络协议·http·ios·小程序·https·uni-app·iphone
菜鸟una1 天前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
韩立学长1 天前
【开题答辩实录分享】以《租房小程序的设计和实现》为例进行答辩实录分享
java·spring boot·小程序