微信小程序（页面栈和API跳转）

数据操作限制

针对上节所讲的程序注册器与页面注册器，简单做下补充，即页面数据data的操作限制
（1）直接修改Page实例的this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。
（2）由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024KB；
（3）不要把data中任意一项的value设为undefined，否则可能会引起一些不可预料的bug。
一个小程序拥有多个页面，且部分页面可能是互相嵌套的


“myself我的”页面代码案例

<view class="list-area">
  <block wx:for="{{myselfList}}" wx:key="tap">
   <view class="list-item" bindtap="{{item.tap}}">
     <image src="{{item.iconUrl}}"></image>
     <text>{{item.title}}</text>
     <view class="list-item-btn"></view>
   </view>
   </block>
</view>

 myselfList:[
      {
        iconUrl:'/img/i .png',
        title:'关于我们',
        tap:'aboutOurFn'
      }
    ]
  },
//关于我们
  aboutOurFn(){
    wx.navigateTo({
      url: 'aap/aap'
    })
  },

/* pages/test/test.wxss */
.list-area{
  width: 100%;
  height: auto
}
.list-item{
  width: 100%;
  height: 85rpx;
  display: flex;
  align-items: center;
  border-bottom: solid 1px rgba(217,217,217,.4);
  padding-left: 30rpx;
}
.list-item image{
  width: 40rpx;
  height: 40rpx;
}
.list-item text{
  color: #7f8389;
  font-size: 32rpx;
  flex-grow: 1;
  margin-left: 30rpx;
}
.list-item-btn{
  width: 50rpx;
  color: #d9d9d9;
  height: 56rpx;
  margin-right: 20rpx;
  text-align: center;
  position: relative;
}
.list-item-btn::after{
  display: inline-block;
  content: '';
  width: 16rpx;
  height: 16rpx;
  position: absolute;
  top: 18rpx;
  left: 0;
  border: solid 3rpx #d9d9d9;
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
}

页面栈

页面层级可能会有三层或者更多层，我们把这样的一个页面层级称为页面栈。

第一个元素为首页，最后一个元素为当前页面

分析：
为了方便理解，我们这样描述页面栈：[ pageA, pageB, pageC ]，其中pageA在最底下，pageC在最顶部，也就是用户所看到的界面

结合上面案例，比如当前正在浏览公司地址页面local，文件结构如下

则myself为PageA在最底部，local为PageC在最顶部，即当前浏览页
页面栈最大层级限制

注意：
刚开始开发小程序时，限制页面栈的最大层级为5层，后来接收到很多反馈，于是放大了限制，将其扩充到10层。
所以目前在编写的时候，小程序宿主环境限制页面栈的最大层级为10层 ，也就是当页面栈到达10层之后就没有办法再推入新的页面了。

页面跳转-路由

接下来结合上边[ pageA, pageB, pageC ]页面栈描述以下几个和导航相关的API
（1）wx.navigateTo
（2）wx.navigateBack
（3）wx.redirectTo
（4）wx.switchTab
（5）wx.reLaunch
（1）wx.navigateTo

描述：打开新页面，将原来的页面保留在页面栈中。在跳入到下一个页面的时候，目标页面同时进入页面栈中，在这种情况下点击手机的返回按钮才可以跳转到上一个页面。即保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回;

案例：wx.navigateTo({ url: ‘pageD’ }) 可以往当前页面栈多推入一个 pageD，此时页面栈变成 [ pageA, pageB, pageC, pageD ]
（1）wx.navigateTo —页面栈[pageA]变为[pageA,pageB]


（1）wx.navigateTo

假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。

页面跳转-获取页面栈

拓展：获取获取当前的页面栈

语法：getCurrentPages()
作用：可通过 getCurrentPages() 获取当前的页面栈
（1）wx.navigateTo 验证页面栈同页叠加
接下来验证下上述导图

（1）wx.navigateTo 验证页面栈同页叠加
接着上面验证，点击公司地址跳到公司地址页面，此时再在公司地址页面中添加跳页按钮，利用wx.navigateTo方法跳到公司信息页面

（1）wx.navigateTo验证页面栈状态独立
跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮

<view class="area" hidden="{{status}}"></view>
<button bindtap="hideArea">点击隐藏</button>

status:false
 //点击隐藏
  hideArea(){
    this.setData({
      status:true
    })
  },

（1）wx.navigateTo验证页面栈状态独立
跟验证页面栈同页叠加步骤类似，在公司信息页面添加操作按钮
页面栈为4层pageD时，在公司信息页面点击隐藏，隐藏红色区域。之后点击返回按钮，再次返回到pageB，会发现该页面栈红色区域为显示状态。

pageD

pageD

pageB
（1）wx.navigateTo验证页面栈最大10层限制


（2）wx.navigateBack

描述：关闭当前页面，返回上一页面或多级页面。
可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

案例：退出当前页面栈的最顶层页面，即退出当前页面pageD，此时页面栈变成 [ pageA, pageB, pageC ]


（2）页面栈[pageA,pageB,pageC]变为[pageA,pageB]


拓展：案例：获取获取当前的页面栈
例如在local.js中获取当前页面栈



拓展：结合页面栈返回到上一页或多级页面
wx.navigateBack可以结合delta参数实现多级退回
①退回到上一页

②退回到上两页

拓展：③结合页面栈返回pageA基层页面栈首页

假如当前页面为五级页面，使用wx.navigateBack：
①当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；
②当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；
以此类推，直到栈底为止，也就是首页。
（2）wx.navigateBack

（3）wx.redirectTo
描述：关闭当前页面，跳转到应用内的某个页面。页面重定向，将页面重新定向到一个目标页面，并不能返回到上一个页面。

案例：wx.redirectTo({ url: ‘pageE’ }) 是替换当前页变成pageE，此时页面栈变成 [ pageA, pageB, pageE ]，当页面栈到达10层没法再新增的时候，往往就是使用redirectTo这个API进行页面跳转
（3）wx.redirectTo

假如使用wx.redirectTo从四级页面重定向到二级页面，此时会将关闭四级页面，并使用二级页面替换四级页面，但两个页面状态是独立的。此时的页面栈大小不变
注意：wx.redirectTo和wx.navigateTo的区别。
（3）wx.redirectTo

当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的10层页面栈。这时应该考虑选择 wx.redirectTo。
wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。
优缺点：这样的跳转可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。

验证方法与验证wx.navigateTo跳页API类似
（4）wx.switchTab

描述：Tab切换，跳转的页面必须是app.json 中 tabBar 配置的页面。跳转到tabBar页面同时关闭其他非tabBar页面
注意：wx.navigateTo和wx.redirectTo只能打开非tabBar页面，switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面
小程序提供了原生的Tabbar支持，我们可以在app.json声明tabBar字段来定义Tabbar页
（5）wx. reLaunch

描述：关闭所有页面，打开到应用内的某个页面。即重新启动， 可以打开任意页面。wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面（此时页面栈变为[pageA]仅仅1层）。
案例：wx. reLaunch({ url: ‘pageH’ }) 重启小程序，此时会关闭页面栈所有页面，打开pageH页面。
（6） 跳转tabBar页面
对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。
其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
小结：
wx.navigateTo为打开新页面，会增加页面栈大小，直到页面栈大小为10
wx.redirectTo为页面重定向，不会增加页面栈大小
wx.navigateBack为页面回退，会减少页面栈大小，直到页面栈大小为1
wx.switchTab为跳转tabBar页面专用API
wx. reLaunch为重新启动，关闭所有页面，可以打开任意页面

路由+生命周期

Tab 切换对应的生命周期
案例：以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面

Tab 切换对应的生命周期