小程序-视图与逻辑-页面导航
页面导航
1.什么是页面导航
页面导航指的是页面之间的互相跳转。例如，浏览器中实现页面导航的方式有如下两种：
a链接，location.href。
2.小程序中实现页面跳转的两种方式
- 声明式导航
在页面上建立一个navigator导航组件，通过点击navigator组件实现页面跳转。 - 编程式导航
调用小程序的api实现页面的跳转。
页面导航-声明式导航
1.导航到tabBar页面
tabBar页面指的是被配置为tabBar的页面。
在使用navigator组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中：
url表示要跳转的页面的地址，必须以/开头。
open-type表示跳转的方式，必须为switchTap。
<navigator url="/pages/msg/msg" open-type="switchTab">跳到消息页面</navigator>
2.导航到非tabBar页面
非tabBar页面指的是没有被配置为tabBar的页面。
在使用navigator组件跳转到指定的非tabBar页面时，需要指定url属性和open-type属性，其中：
url表示要跳转的页面的地址，必须以/开头。
open-type表示跳转的方式，必须为navigator。
3.后退导航
如果要后退到上一级页面或多级页面，则需要指定open-type属性和delta属性，其中：
open-type必须为navigateBack，表示要进行后退导航。
delta的值必须是数字，表示要后退的层级。
示例代码如下：
<navigator open-type="navigateBack" delta="1">后退到刚才页面</navigator>
注意：如果是后退到上一级页面，则可以省略delta属性，因为其默认值就是1。
页面导航-编程式导航
1.导航到tabBar页面
调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下：
示例如下：
<button bindtap="toMsg">跳到msg页面-编程式导航</button>
toMsg() {wx.switchTab({url: '/pages/msg/msg',})},
2.跳转到非tabBar页面
示例代码如下：
<button bindtap="toInfo">跳到info页面-编程式导航</button>
toInfo() {wx.navigateTo({url: '/pages/info/info',})},
3.后退导航
调用wx.navigateBack(Object object)方法，可以退回到上一页面或多级页面。其中Object参数对象可选的属性列表如下：
示例：
<button bindtap="backLast">返回上一级-编程式导航</button>
backLast() {wx.navigateBack({delta: 1})},
这里的delta在同样只是1的情况下可以省略不写。
页面导航-导航传参
1.声明式导航传参
navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
- 参数与路径之间使用？分隔
- 参数键与参数值之间用=相连
- 不同参数用&分隔
示例代码如下：
<navigator url="/pages/info/info?name=zs&age=20"></navigator>
2.编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下：
<button bindtap="toInfo2">跳到info页面</button>
Info() {wx.navigateTo({url: '/pages/info/info?name=zs&age=20',})},
3.在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到，代码示例如下：
onLoad(options) {console.log(options)},
我们可以在data中设置一个query为空对象，然后在onLoad中接收到参数利用setData将收到的参数传给data，就可以在其他地方使用传来的数据。
小程序-视图与逻辑-页面导航相关推荐
- 微信小程序 小程序生命周期、页面导航/事件、WXS脚本(笔记)
文章目录 1. 页面导航 1.1 声明式导航 1.2 编程式导航 1.3 导航传参 2. 页面事件 3. 生命周期 3.1 应用生命周期 3.2 页面生命周期 4. WXS脚本 4.1 什么是WXS ...
- 微信小程序开发实战（页面导航）
@作者 : SYFStrive @博客首页 : HomePage
- 微信小程序（微信开发者工具及工程创建、小程序配置、逻辑层、模块化）
一.阶段概述 1.课程安排 课程市场:14+1 课程安排:微信小程序:5uniapp:5数据可视化:4答辩:1 2.项目展示 小u商城 数据可视化 3.阶段目标 1.培养学员能力独立完成小程序原生开发 ...
- 小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
- 小程序多个echars_小程序界面与逻辑
主要内容数据绑定.渲染.界面层数据渲染和事件处理. 一.数据绑定 1.1 渲染层和逻辑层 小程序宿主环境 我们称微信客户端给小程序所提供的环境为宿主环境.小程序借助宿主环境提供的能力,可以完成许多普通 ...
- web前端小项目个人实例_Web前端：小程序界面与逻辑项目实训
大家好,我来了!本期为大家带来的Web前端学习知识是"Web前端:小程序界面与逻辑项目实训",喜欢Web前端的小伙伴,一起看看吧! 主要内容 数据绑定 渲染 界面层数据渲染 事件处 ...
- 微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
- 小程序开发（逻辑层、视图层）
1.小程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 2.页面的.json只能设置 window 相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键 逻辑层( ...
- 微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
最新文章
- NVIDIA GPU自动调度神经网络
- uva11728alternate task所有因子
- VTK修炼之道50：图形基本操作进阶_网格模型的特征边 与 封闭性检测
- 1线程概念：线程和进程之间的关系，线程间可共享资源，线程间非共享资源，线程的优缺点
- java中使用akka手记三 cluster详例
- 第41课 蜗牛与葡萄树 《小学生C++趣味编程》
- C语言的构造函数与析构函数
- 谷歌Colab GPU达到使用量限额解决办法
- 将科学计数法的数值转化为字符
- 北京公交“十三五”将通过大数据实现线路优化
- docker php 一键部署_提升10倍生产力：IDEA远程一键部署SpringBoot到Docker
- linux客户端工具有哪些,Linux命令以及客户端工具的使用
- 演示使用Metasploit入侵Windows
- 程序员”脑筋急转弯”
- 单片机属于嵌入式系统吗？嵌入式开发要学哪些课程？
- Matlab中filter.m和filtfilt.m函数C语言实现
- （转）The Neural Network Zoo
- 量化交易有因子动物园 深度学习里有模型动物园（ModelZoo）又叫模型市场基于深度学习的增量学习，迁移学习等技术发展而来【调研】
- 货来，速抢 — 天选 2 首发评测
- python制作gif动图_短短几行Python代码制作的GIF动图