微信小程序（路由及组件跳页传参）

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

一·hover样式

小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。

  
    
      
      {{item.info}}
      
      
  

/* ......wxss */
.mineListHover{
  background: #dbd7d7;
}

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

二·navigator组件跳转

猫~

navigator 导航组件属性列表

上2页

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

navigator 导航组件属性—open-type

跳转

navigator 导航组件属性–-target

关闭小程序—target取值miniProgram和open-type取值exit

猫~

navigator 导航组件属性—delta

点击返回上俩页

navigator 导航组件属性—hover-stop-propagation

-------wxml----------

  动物档案

--------wxss---------
.parent{
  width: 100%;
  height:300rpx;
  background: gray;
}
.child{
  width:100%;
  height:100rpx;
  background: green;
}
.parentHover{
  background: red;
}
.childHover{
  background: purple;
}

动物档案

三·路由跳转规范

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

如何正确使用页面跳转？
①对于可逆操作，使用wx.navigateTo。比如从首页跳转到二级页面，从二级页面返回是不需要重新渲染首页
②对于不可逆操作，使用wx.redirectTo。比如用户登录成功后，关闭登录页面，不能返回到登录界面。
③对于一些介绍性等不常用页面，可以用wx.redirectTo或wx.navigateBack
④对于类似九宫格、列表项，使用跳转。
⑤不要在首页使用wx.redirectTo，这样会导致应用无法返回首页
⑥简化需求、简化流程：核心功能在两三个页面完成便是张小龙追求『小而美』的体现。

四·页面层级准备

1）在视图层内，小程序的每一个页面都独立运行在一个页面层级上。
2）小程序启动时仅有一个页面层级，每次调用wx.navigateTo，都会创建一个新的页面层级。
3）wx.navigateBack会销毁一个页面层级。
4）wx.redirectTo，这个调用不会打开一个新的页面层级，而是将当前页面层级重新初始化：

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