21.微信小程序（组件跳转、规范、层级准备）

深藏阁楼爱情的钟 2023-06-17 12:55 30阅读 0赞

# 微信小程序（组件跳转、规范、层级准备） #

# 大纲 #

（1）路由API跳转小结  
（2）hover样式  
（3）navigator导航组件跳转  
（4）路由跳转规范  
（5）页面层级准备

# 前言 #

首先简单回顾下路由API跳转:  
wx.navigateTo  
wx.navigateBack  
wx.redirectTo  
wx.switchTab  
wx.reLaunch  
![在这里插入图片描述][20191129093054148.png]

除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。

# hover样式 #

对比其他小程序列表项会发现，目前为止，点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。

![在这里插入图片描述][20191129093104786.png]

注意：虽然css的hover伪类也可以实现类似效果，但不太理想，效果粘附性太大，不建议使用。

# navigator组件跳转 #

使用组件 跳转案例：  
例如在公司信息页面跳到公司地址页

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]

wxml 页面组件navigator 跳转时，可以通过设置open-type属性指明页面跳转方式，此外还有很多其他属性

navigator 导航组件属性列表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]

navigator 导航组件属性

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]

navigator 导航组件属性—url

![在这里插入图片描述][2019112909321069.png]  
注意：官方文档写明，url为非必填项，但开发注意url必须填写，否则报错

![在这里插入图片描述][20191129093210581.png]

navigator 导航组件属性—open-type  
![在这里插入图片描述][20191129093220118.png]  
open-type取整列表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]

navigator 导航组件属性—target  
![在这里插入图片描述][20191129093230599.png]

target属性取值

![在这里插入图片描述][20191129093236127.png]

navigator 导航组件属性实现关闭小程序

target取值miniProgram和open-type取值exit可以实现关闭小程序  
![在这里插入图片描述][20191129093250321.png]  
此时便可以实现点击退出小程序。

navigator 导航组件属性—delta  
![在这里插入图片描述][20191129093308470.png]

例如：公司地址页面local设置navigate组件导航，点击返回上两页  
![在这里插入图片描述][20191129093311293.png]

#### navigator 导航组件样式相关属性 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]

### 注意：navigator-hover 默认为 \{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;\}, navigator 的子节点背景色应为透明色 ###

navigator 导航组件样式相关属性

![在这里插入图片描述][20191129093339258.png]  
![在这里插入图片描述][20191129093342176.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]

navigator 导航组件样式相关属性

![在这里插入图片描述][20191129093359760.png]  
一般使用默认值即可

# 路由跳转规范 #

页面深度限制：  
官方规定小程序最多只能有10个页面同时存在，意思是在不关闭页面的情况，最多新开10个页面，页面深度为10。

如何正确使用页面跳转？  
①对于可逆操作，使用wx.navigateTo。比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页  
②对于不可逆操作，使用wx.redirectTo。比如用户登录成功后，关闭登录页面，不能返回到登录界面。

如何正确使用页面跳转？  
③对于一些介绍性等不常用页面，可以用wx.redirectTo或wx.navigateBack  
④对于类似九宫格、列表项，使用跳转  
⑤不要在首页使用wx.redirectTo，这样会导致应用无法返回首页  
⑥简化需求、简化流程：核心功能在两三个页面完成便是张小龙追求『小而美』的体现。

# 页面层级准备 #

页面层级：  
在视图层内，小程序的每一个页面都独立运行在一个页面层级上。小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级；相对地，wx.navigateBack会销毁一个页面层级。

层级准备：  
对于每一个新的页面层级，视图层都需要进行一些额外的准备工作。在小程序启动前，微信会提前准备好一个页面层级用于展示小程序的首页。除此以外，每当一个页面层级被用于渲染页面，微信都会提前开始准备一个新的页面层级，使得每次调用wx.navigateTo都能够尽快展示一个新的页面。

准备阶段3部曲：  
页面层级的准备工作分为三个阶段。  
第一阶段是启动一个WebView，在iOS和Android系统上，操作系统启动WebView都需要一小段时间。  
第二阶段是在WebView中初始化基础库，此时还会进行一些基础库内部优化，以提升页面渲染性能。  
第三阶段是注入小程序WXML结构和WXSS样式，使小程序能在接收到页面初始数据之后马上开始渲染页面（这一阶段无法在小程序启动前执行）。

## 准备阶段3部曲： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]

注意：  
对于wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化：重新传入页面的初始数据、路径等，视图层清空当前页面层级的渲染结果，然后重新渲染页面。

# 如有问题或者疑问请留言联系小编！！！！！ #

# 感谢来访！！！！！ #

[20191129093054148.png]: https://img-blog.csdnimg.cn/20191129093054148.png
[20191129093104786.png]: https://img-blog.csdnimg.cn/20191129093104786.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129093119149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129093124425.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191129093136717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[2019112909321069.png]: https://img-blog.csdnimg.cn/2019112909321069.png
[20191129093210581.png]: https://img-blog.csdnimg.cn/20191129093210581.png
[20191129093220118.png]: https://img-blog.csdnimg.cn/20191129093220118.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191129093224890.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191129093230599.png]: https://img-blog.csdnimg.cn/20191129093230599.png
[20191129093236127.png]: https://img-blog.csdnimg.cn/20191129093236127.png
[20191129093250321.png]: https://img-blog.csdnimg.cn/20191129093250321.png
[20191129093308470.png]: https://img-blog.csdnimg.cn/20191129093308470.png
[20191129093311293.png]: https://img-blog.csdnimg.cn/20191129093311293.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191129093319989.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191129093339258.png]: https://img-blog.csdnimg.cn/20191129093339258.png
[20191129093342176.png]: https://img-blog.csdnimg.cn/20191129093342176.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191129093349271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70
[20191129093359760.png]: https://img-blog.csdnimg.cn/20191129093359760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191129093443501.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTU4Mjg0Ng==,size_16,color_FFFFFF,t_70