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

朱雀 2023-06-17 13:53 15阅读 0赞

【本节大纲】

1.  路由API跳转小结
2.  hover样式
3.  navigator导航组件跳转
4.  路由跳转规范
5.  页面层级准备  
    【前言】  
    上节介绍了一下页面栈和路由API跳转，除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。

# hover样式 #

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

.list-item-hover{ 
      background-color: #f8f8f8;
    }

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

# navigator组件跳转 #

例如我的页面跳转到设置页面

<navigator url="./first/first">设置页面（组件跳页）</navigator>

文件关系  
![在这里插入图片描述][20191129110328761.png]  
wxml 页面组件navigator 跳转时，可以通过设置open-type属性指明页面跳转方式，此外还有很多其他属性

### navigator 导航组件属性列表 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>是否必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>target</td> 
   <td>string</td> 
   <td>self</td> 
   <td>否</td> 
   <td>在哪个目标上发生跳转，默认当前小程序</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td>无</td> 
   <td>否—是必填项</td> 
   <td>当前小程序内的跳转链接</td> 
  </tr> 
  <tr> 
   <td>open-type</td> 
   <td>string</td> 
   <td>navigate</td> 
   <td>否</td> 
   <td>跳转方式</td> 
  </tr> 
  <tr> 
   <td>delta</td> 
   <td>number</td> 
   <td>1</td> 
   <td>否</td> 
   <td>当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数</td> 
  </tr> 
  <tr> 
   <td>hover-class</td> 
   <td>string</td> 
   <td>navigator-hover</td> 
   <td>否</td> 
   <td>指定点击时的样式类，当hover-class="none"时，没有点击态效果</td> 
  </tr> 
  <tr> 
   <td>hover-stop-propagation</td> 
   <td>boolean</td> 
   <td>false，true一样</td> 
   <td>否</td> 
   <td>指定是否阻止本节点的祖先节点出现点击态</td> 
  </tr> 
  <tr> 
   <td>hover-start-time</td> 
   <td>number</td> 
   <td>50</td> 
   <td>否</td> 
   <td>按住后多久出现点击态，单位毫秒</td> 
  </tr> 
  <tr> 
   <td>hover-stay-time</td> 
   <td>number</td> 
   <td>600</td> 
   <td>否</td> 
   <td>手指松开后点击态保留时间，单位毫秒</td> 
  </tr> 
 </tbody> 
</table>

> 注意：  
> ①一般使用默认值即可  
> ②官方文档写明，url为非必填项，但开发注意url必须填写，否则报错  
> ③navigator-hover 默认为 \{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;\}, navigator 的子节点背景色应为透明色

###### navigator 导航组件属性—open-type取整列表 ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>navigate</td> 
   <td>对应API中 wx.navigateTo的功能</td> 
  </tr> 
  <tr> 
   <td>redirect</td> 
   <td>对应 API中wx.redirectTo 的功能</td> 
  </tr> 
  <tr> 
   <td>switchTab</td> 
   <td>对应API中 wx.switchTab 的功能</td> 
  </tr> 
  <tr> 
   <td>reLaunch</td> 
   <td>对应 API中wx.reLaunch 的功能</td> 
  </tr> 
  <tr> 
   <td>navigateBack</td> 
   <td>对应 API中wx.navigateBack 的功能</td> 
  </tr> 
  <tr> 
   <td>exit</td> 
   <td>退出小程序，target="miniProgram"时生效</td> 
  </tr> 
 </tbody> 
</table>

###### navigator 导航组件属性—target属性取值 ######

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>self</td> 
   <td>当前小程序</td> 
  </tr> 
  <tr> 
   <td>miniProgram</td> 
   <td>其他小程序</td> 
  </tr> 
 </tbody> 
</table>

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

target取值miniProgram和open-type取值exit可以实现关闭小程序

<navigator open-type="exit" target="miniPro7/8 62gram">退出小程序</navigator>

##### navigator 导航组件属性—delta #####

例如聊天设置页面点击返回上两页

<navigator open-type="navigateBack" delta="2">返回上两页</navigator>

###### navigator 导航组件样式相关属性—hover-stop-propagation ######

<view class="area" hover-class="viewClass" hidden="{ {status}}">
    	<navigator url="first/first">点击跳页到聊天</navigator>
    </view>

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

# 路由跳转规范 #

### 页面深度限制： ###

官方规定小程序最多只能有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部曲： ###

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

页面层级准备过程图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]

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

[20191129110328761.png]: https://img-blog.csdnimg.cn/20191129110328761.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191129114310390.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191129114639710.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70