微信小程序|微信小程序 （组件跳转、规范、层级准备）
路由API跳转小结
hover样式
navigator导航组件跳转
路由跳转规范
页面层级准备
路由API跳转小结
wx.navigateTo
wx.navigateBack
wx.redirectTo
wx.switchTab
wx.reLaunch
DOM的API：document.createElement
除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转
hover样式
点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。
文章图片
文章图片
文章图片
注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用。
navigator组件跳转
例如在公司信息页面跳到公司地址页
文章图片
从mine页面跳转到about页面
文章图片
文章图片
wxml 页面组件navigator 跳转时，可以通过设置open-type属性指明页面跳转方式
navigator 导航组件属性—open-type
文章图片
open-type取整列表
文章图片
相当于wx.navigateTo
文章图片
获取了两层页面栈
文章图片
相当于wx.redirectTo
文章图片
获取了一层页面栈
文章图片
退出小程序
文章图片
点击关闭并不会退出小程序，因为模拟器模拟不了关闭，需要到真机上测试
文章图片
delta属性
文章图片
文章图片
返回上两页
文章图片
hover-class属性
当hover-class="none"时，没有点击态效果
文章图片
文章图片
当hover-class等于navigator-hover是默认样式
注意：navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1);
opacity: 0.7;
}, navigator 的子节点背景色应为透明色
文章图片
文章图片
hover-start-time属性
按住后多久出现点击态，单位毫秒
默认值50
文章图片
1秒后出现点击态
文章图片
hover-stay-time属性
手指松开后点击态保留时间，单位毫秒
默认值600
文章图片
点击态维持6秒
文章图片
navigator 导航组件属性—url
**注意：**url为非必填项，但开发注意url必须填写，否则报错
文章图片
报错
文章图片
navigator 导航组件样式相关属性
false是默认值
true和false效果一样
不写也可以
文章图片
文章图片
文章图片
这样不会影响到父级
文章图片
文章图片
一般用默认值即可
路由跳转规范
页面深度限制：
官方规定小程序最多只能有10个页面同时存在，意思是在不关闭页面的情况，最多新开10个页面，页面深度为10。
如何正确使用页面跳转？
1.对于可逆操作，使用wx.navigateTo。比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
2.对于不可逆操作，使用wx.redirectTo。比如用户登录成功后，关闭登录页面，不能返回到登录界面。
3.对于一些介绍性等不常用页面，可以用wx.redirectTo或wx.navigateBack
4.对于类似九宫格、列表项，使用跳转
5.不要在首页使用wx.redirectTo，这样会导致应用无法返回首页
6.简化需求、简化流程：核心功能在两三个页面完成便是张小龙追求『小而美』的体现。
页面层级：
在视图层内，小程序的每一个页面都独立运行在一个页面层级上**。小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；相对地，wx.navigateBack会销毁一个页面层级。**
层级准备：
对于每一个新的页面层级，视图层都需要进行一些额外的准备工作。在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页。除此以外，每当一个页面层级被用于渲染页面，微信都会提前开始准备一个新的页面层级，使得每次调用wx.navigateTo都能够尽快展示一个新的页面。
准备阶段3部曲：
页面层级的准备工作分为三个阶段。
第一阶段是启动一个WebView，在iOS和Android系统上，操作系统启动WebView都需要一小段时间。
第二阶段是在WebView中初始化基础库，此时还会进行一些基础库内部优化，以提升页面渲染性能。
第三阶段是注入小程序WXML结构和WXSS样式，使小程序能在接收到页面初始数据之后马上开始渲染页面（这一阶段无法在小程序启动前执行）。
【微信小程序|微信小程序 （组件跳转、规范、层级准备）】页面层级准备过程图
文章图片
注意：
对于wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化：重新传入页面的初始数据、路径等，视图层清空当前页面层级的渲染结果，然后重新渲染页面。
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）