微信小程序 页面导航、传参、接收参数
页面导航指的是页面之间的相互跳转,在微信小程序中,页面导航分为如下两种:
1、声明式导航:
在页面上声明一个<navigator>导航组件
通过点击<navigator>导航组件来实现页面跳转
举例:如何使用<navigator>组件跳转tabBar页面?
在使用<navigator>组件跳转tabBar页面式,必须指明url和open-type属性
- url表示要跳转的页面地址,必须以 / 开头
- open-type表示跳转的方式,必须为switchTab
<navigator url="/pages/message/message"
open-type="switchTab">导航到首页</navigator>
举例:如何使用<navigator>组件跳转非tabBar页面?
非tabBar页面指的是没有配置在tabBar节点中的页面
与跳转到tabBar页面唯一的不同是open-type必须为navigate
<navigator url="/pages/info/info"
open-type="navigate">导航到信息</navigator>
注意:为了方便,在跳转到非tabBar页面时,open-type可以省略。
还有一种导航叫后退导航,后退到上一级或多级页面,需要指定open-type和delta属性
- open-type必须指定为navigateBack,表示要进行后退导航
- delta是整数数字,表示要后退的级数
<navigator open-type="navigateBack" delta="1">后退</navigator>
注意:为了方便,如果只是后退到上一个页面,delta可以省略,默认为1
2、编程式导航:
调用小程序的导航API,实现页面跳转
举例:如何使用编程式导航导航到tabBar页面?
在wxml页面
<button bindtap="gotoMessage">编程式跳转tab</button>
对应的js文件调用wx.switchTab:
gotoMessage(){wx.switchTab({url: '/pages/message/message',})}
举例:如何使用编程式导航导航到非tabBar页面?
调用wx.navigateTo(Object object),可以跳转到非tabBar页面
在wxml文件中
<button bindtap="gotoMessageNoTab">编程式跳转非tab</button>
对应的.js文件:
gotoMessageNoTab(){wx.navigateTo({url: '/pages/info/info',})}
编程式导航进行后退导航,调用wx.navicateBack(Object object),可以返回上一级页面或者多级页面,需要指明delta,默认为1,比较简单,此处不粘贴代码了。
3、如何使用页面传参和接收参数
- 声明式导航传参
<navicator>的url中可以携带参数
- 参数与路径之间使用?间隔
- 参数键值之间使用=连接
- 不同的参数之间使用&符号连接
<navigator url="/pages/info/info?name=啊宝&age=23"
open-type="navigate">导航到信息</navigator>
在info页面的.js文件中,使用options接收参数
onLoad(options) {console.log(options)this.setData({query:options})}
- 编程式导航传参
gotoMessageNoTab(){wx.navigateTo({url: '/pages/info/info?name=三大爷&age=50',})}
参数接收方式与上述相同
有问题,下方留言,欢迎沟通交流。
微信小程序 页面导航、传参、接收参数相关推荐
- uni-app 微信小程序 分享功能 传参 接收 与 调试
uni-app 微信小程序 功能 传参 接收 与 调试 当使用微信小程序进行分享好友功能时,怎样能够联调,查看是否接收到参数,并在被分享人点进来的时候逻辑处理是否正确. 1.分享功能实现 分享给朋友 ...
- 微信小程序页面之间传参,发表说说
getCurrentPages() 函数用于获取当前页面栈的实例,以数组的形式按栈的顺序输出.第一个元素为首页,最后一个元素为当前页. 1.页面结构 2.页面a.wxml <view wx:fo ...
- 原生微信小程序跳转传参 : [非TabBar跳转传参] 和 [TabBar跳转传参]
一般常用的微信小程序跳转分为两种 1.非TabBar跳转 2.TabBar跳转 1.非TabBar跳转 非TabBar页面的跳转通常使用wx.navigateTo来跳转页面,在链接后面加 ? 传参,如 ...
- 微信小程序uni.switchTab传参获取不到;小程序跳转到tabBar页并传参;uni-app微信小程序获取tabBar页面参数失败;uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
- 微信小程序-页面导航
1.什么是页面导航 页面导航是指页面之间的相互跳转. ①<a>链接 ②location.href 小程序实现页面导航的两种方式 ① 声明式导航 ·在页面上声明一个<navig ...
- 小程序页面间传参的五种方式
文章目录 前言 1.使用globalData 2.使用storage 3.使用url 3.1 api跳转 3.2 组件跳转 4.使用通信通道 5.使用页面栈 总结 前言 由于经常需要进行页面间传参且各 ...
- 微信小程序使用formdata传参上传图片
先看下接口 方法: 需要自己写formdata,因为小程序中不支持formdata传参 建立一个formdata文件夹,以及两个子文件 index.js import mimeMap from ' ...
- 微信小程序自定义组件传参
组件传参 1.父组件通过属性的方式给子组件传参 2.子组件通过事件的方式向父组件传参 父组件给子组件传参: 1.父组件中,在组件标签名中,将属性名和要传递的数据进行绑定,用于传递数据 2..在自定义组 ...
- 微信小程序组件的传参
# 父子关系 1.父向子传参 // 子组件:通过 properties 声明要从父组件中接收的数据 // 组件的属性列表 properties:{ tabId:String } // 父组件:通 ...
最新文章
- 小白学python买什么书-终于明白小白学习python怎么学
- 用INFORMATION_SCHEMA逻辑MySQL的索引
- 基于用户评价的评分模型
- Lunar New Year and a Wander
- 则执行C语言语句unsigned,部分C语言题目
- 中英文对照 —— 英语语法与文法概念
- 傅里叶变换的终极解释下
- [.NET] EF LINQ 按时间对数据分类汇总
- 解决新版 Edge 浏览器无法使用 IDM 的问题
- 科学计算机求年金,科普如何科学使用普通计算器(CPA考试小技巧)
- 曹雪芹诗歌中的鸿蒙,红楼一梦开辟相痴鸿蒙诗歌
- 基于微博平台的python爬虫数据采集,非常简单的小案例!
- 性价比高一点的蓝牙耳机有哪几款?高性价比蓝牙耳机推荐
- FPD-LINK网上搜集的相关资料链接(持续更新)
- watch:{} 与 this.$watch() 一样
- 修改KindEditor上传图片数量和大小
- 第3章-21 判断回文字符串 (15分) PTA-python 题解 浙大版《Python 程序设计》题目集
- jupyter notebook内核挂了
- oracle 48101 block,oracle数据库的一次异常起停处理。
- R2S:年轻人的第一台软路由
热门文章
- P2455 [SDOI2006]线性方程组
- 描写火车站场景_描写火车站的句子_优美语句
- STM32跳入HardFault Handler中断分析
- Tello无人机版之使用Scratch2和ROS进行机器人图形化编程学习
- HTML文字样式显示闪烁,怎么纯用css代码使文字展示闪动效果?(代码示例)
- 特斯拉产业的几个问题
- 小功能_httpPacket解码
- 2022施工员-市政方向-通用基础(施工员)题库及答案
- scrapy 学习笔记1 爬取 www.dmoz.org 网站信息
- bzoj2534 Uva10829L-gap字符串(SA+lcp同bzoj2119)