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

回顾下路由API跳转:
wx.navigateTo
wx.navigateBack
wx.redirectTo
wx.switchTab
wx.reLaunch
除了使用路由API进行页面跳转外，小程序宿主环境也提供了导航组件navigator进行页面跳转。

hover样式
点击跳页时，点击栏没有背景样式，类似于css的hover事件，小程序如果想给元素添加触屏点击样式，可以给元素添加hover-class属性。



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

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

<!--pages/mine/mine.wxml-->
<navigator  url="about/local/local">公司信息</navigator>

文件关系：（路径问题）

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

<navigator  open-type="navigate"  url="about/local/local">公司信息</navigator>

navigator 导航组件属性：

navigator 导航组件属性—url：

注意：官方文档写明，url为非必填项，但开发注意url必须填写，否则报错

navigator 导航组件属性—open-type

open-type取整列表：

navigator 导航组件属性—target：

target属性取值：

navigator 导航组件属性实现关闭小程序：
target取值miniProgram和open-type取值exit可以实现关闭小程序

<navigator target="miniProgram" open-type="exit">退出小程序</navigator>

此时便可以实现点击退出小程序。

navigator 导航组件属性—delta

公司地址页面local设置navigate组件导航，点击返回上两页

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

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

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

<view class="parent" hover-class="parentHover">
  <navigator 
  hover-class="child" 
  hover-stop-propagation="true"
  open-type="navigate" 
  url="about/local/local">公司信息</navigator>
</view>

.parent{
  width: 100%;
  height: 300rpx;
  background: lightcyan;
}
.child{
  background: palevioletred;
}
.parentHover{
  background: gold;
}

加上 hover-stop-propagation="true"效果如下：

navigator 导航组件样式相关属性：（使用默认即可）

<view class="parent" hover-class="parentHover">
  <navigator 
  hover-stop-propagation="true"
  hover-stay-time="60" 
  hover-start-time="10" 
  hover-class="child" 
  open-type="navigate" 
  url="about/local/local">公司信息</navigator>
</view>

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