【微信小程序】在页面跳转时如何进行页面导航
1. 什么是页面导航
页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:
① a链接
② location.href
2. 小程序中实现页面导航的两种方式
① 声明式导航
⚫ 在页面上声明一个 <navigator>
导航组件
⚫ 通过点击 <navigator>
组件实现页面跳转
② 编程式导航
⚫ 调用小程序的导航 API,实现页面的跳转
1.声明式导航
1. 导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 <navigator>
组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
⚫ url 表示要跳转的页面的地址,必须以 / 开头
⚫ open-type 表示跳转的方式,必须为 switchTab
示例代码如下:
<!--pages/home/home.wxml-->
<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>
2. 导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 <navigator>
组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:
⚫ url 表示要跳转的页面的地址,必须以 / 开头
⚫ open-type 表示跳转的方式,必须为 navigate
示例代码如下:
<!--pages/home/home.wxml-->
<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>
注意:为了简便,在导航到非 tabBar 页面时,open-type=“navigate” 属性可以省略。
3. 后退导航
如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:
⚫ open-type 的值必须是 navigateBack,表示要进行后退导航
⚫ delta 的值必须是数字,表示要后退的层级
示例代码如下:
<!--pages/info/info.wxml-->
<navigator open-type="navigateBack" delta="1">后退(返回上一页)</navigator>
注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1
2.编程式导航
1. 导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:
<!--pages/home/home.wxml-->
<button bindtap="gotoMessage">跳转到消息页面</button>// pages/home/home.js//通过编程式导航跳转到tabbar页面gotoMessage(){wx.switchTab({url: '/pages/message/message',})}
2. 导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表
如下:
<!--pages/home/home.wxml-->
<button bindtap="gotoinfo">跳转到info页面</button>// pages/home/home.js//通过编程式导航跳转到info页面gotoinfo(){wx.navigateTo({url:"/pages/info/info"})},
3. 后退导航
调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的
属性列表如下:
<!--pages/info/info.wxml-->
<button bindtap="goback">后退</button>// pages/info/info.jsgoback(){wx.navigateBack()},
3.导航传参
1. 声明式导航传参
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数:
⚫ 参数与路径之间使用 ? 分隔
⚫ 参数键与参数值用 = 相连
⚫ 不同参数用 & 分隔
代码示例如下:
<!--pages/home/home.wxml-->
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
2. 编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数,代码示例如下:
<!--pages/home/home.wxml-->
<view bindtap="gotoinfo">跳转到info页面</view>//通过编程式导航跳转到info页面gotoinfo(){wx.navigateTo({url:"/pages/info/info?name=zs&gender='男'"})},
3. 在 onLoad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:
// pages/info/info.js
Page({data: {query:{}},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(options);this.setData({query:options})},
【微信小程序】在页面跳转时如何进行页面导航相关推荐
- 解决微信小程序使用switchTab跳转后页面不刷新的问题
解决微信小程序使用switchTab跳转后页面不刷新的问题 参考文章: (1)解决微信小程序使用switchTab跳转后页面不刷新的问题 (2)https://www.cnblogs.com/mmyk ...
- 微信小程序之自动跳转页面
微信小程序之自动跳转页面: 页面.wxml文件中定义桌面的程序: <scroll-view> < image src="../../images/first.png&quo ...
- Android APP跳转微信小程序和APP跳转支付宝小程序传参
Android APP跳转微信小程序和APP跳转支付宝小程序传参 微信开放文档链接 MINIPROGRAM_TYPE_PREVIEW:体验版. MINIPROGRAM_TYPE_TEST:开发版 MI ...
- 跳一跳 微信小程序中的跳一跳相信大家都玩过。emmm???只学习不玩游戏?那就吃亏了...好好读题理解吧 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游
3 跳一跳 微信小程序中的跳一跳相信大家都玩过.emmm???只学习不玩游戏?那就吃亏了-好好读题理解吧. 简化后的跳一跳规则如下:玩家每次从当前方块跳到下一个方块,如果没有跳到下一个方块上则游戏结束 ...
- 小程序 navigator 无法跳转 tabBar上的页面
小程序 navigator 无法跳转 tabBar上的页面 解决方法一: navigator 的 open-type 设置为 switchTab 解决方法二: 使用 wx.switchTab({ ur ...
- 微信小程序image图片预览时不显示(后缀问题!)
微信小程序image图片预览时不显示(后缀问题!) ".PNG"是不行滴!!! ".png"才可以!!! 刚刚用了两张图片是截下来的,后缀是".PNG ...
- 微信小程序(第十九章)- 用户评价页面实现
微信小程序(第十九章)- 用户评价页面实现 页面结构的实现 页面样式实现 五角星实现 页面结构的实现 代码如下: <!--用户评价--> <view id="reviewV ...
- 会员卡券领取 小程序_微信小程序会员卡开发跳坑
微信小程序会员卡开发跳坑 最近看好多人问,小程序里面怎么显示会员卡,然客户领取后,去对应店铺核销. 本身以为会很简单,最后费了好大心思才找到对应文档. 会员卡是见过微信最差的文档了,没说明参数从哪里获 ...
- 微信小程序分享海报/卡片 生成时一直加载可能存在的问题
微信小程序分享海报/卡片 生成时一直加载可能存在的问题 很多时候,开发者在调试小程序的分享图时,总是会遇到不能正常生成的问题,这里面还是有许多的坑.这一次就把我个人所知道的问题分享一下. 第一种情况: ...
- 微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
最新文章
- 「数据结构」图基础篇
- 电商的「穿衣AI」用得好,剁手根本停不了 | CVPR 2020
- c语言链表缓冲区,求助! 链表和scanf()缓冲区问题
- RocketMQ的Consumer详解之重复消息的解决方案
- 用Mesos分布式架构进行工作
- php 多线程上传,PHP CURL 多线程操作代码实例
- 中国到底需要多少博士点?
- 电脑广告弹窗多?安利一下:程序员常用 7 款Chrome去广告插件
- Java开发命名规范
- 对比transform中的世界参数和自身参数
- Springboot结合Redis实现分布式定时任务
- 汽车电工及电子技术基础【3】
- 来,给产品狗起个正儿八经的名字!
- 赛百味的中英文菜单对照
- 学生管理系统IPO图_玩不起了?海底捞取消大学生69折优惠,海底捞:暂不会调整...
- 第五章、DOS基本命令与批处理(千峰网络安全300课时笔记)
- 微信公众平台开发(2)--微信认证流程图文详解
- PYTHON地理出图配色及旁门左道
- CSS选择器和层叠性
- 【JAVA】easyexcel 导出excel文件带多个图片