小程序页面栈控制

    刚开始用小程序的时候没怎么在乎页面的跳转，也没仔细看文档中说的页面栈的内容。只要能跳转就行，wx.navigateTo,wx.redirectTo 这些方法一顿乱用。最后在作一个5层页面的时候跳懵了。各类重复跳页，怎么改都很差使，因而安心下来仔细看看API，发现这个路由仍是有学问的。所以分享一下，但愿对作小程序的网友也有必定的帮助。

 

页面栈 

---

  首先咱们要理解在小程序中页面的路由是小程序框架自己控制的咱们不要去手动管理， 小程序框架经过一个页面栈的设计来管理全部的界面，为了便于理解你能够看一下示意图。 

​

   如图所示小程序的页面栈最大能存放5个页面，当页面栈中的页面等于5时，在使用navigateTo这种方式是不能再跳页的。

下面咱们分析一下页面栈的变化过程，从分析中，咱们须要明白的一个重要问题就是，当客户按返回按钮的时候究竟会跳转到那个界面，这是咱们分析页面栈变化的的意义。

首先咱们在页面中调用两次navigateTO，页面栈状况以下

​

 这时显示的界面是pageC ，若是客户在此时返回则会一切正常，回退的第一个界面是pageB，而后是pageA。可是若是在pageC 界面调用  wx.redirectTo({url:'pageD'}) 则状况就会不同看，咱们先看一下跳转到pageD后页面栈的状况如何。

​

根据栈的状况，咱们能够分析出。若是使用 wx.redirectTo跳转到pageD页面，而后在回退的时候是不能再次回退到pageC的，而会直接回退到pageB。

经过上面对页面栈的分析，咱们能够看到栈的变化是会影响客户回退页面的顺序的，因此根据本身的须要合理的使用不一样的跳转方法是很是重要的。若是使用不当就会致使跳转混乱让人摸不清头脑

下面分析一种调转重复页面的状况

若是咱们的pageB页面是一个数据列表页面，好比商品列表，pageC是一个商品的编辑界面，通常咱们会经过pageB而后进如pageC对商品进行修改，修改后返回pageB。这是很常见的一个场景，可是若是使用不当机会出现以下状况

​

 如图所示栈中出现了两个相同的pageB界面，这个时候若是用户按退出键就会出现一个页面出现2次的状况，并且有一个界面的数据也是旧的数据。所以为了不这个问题，咱们应该在 PageC 页面避免将 PageB重复压入栈中，因此在pageC页面 使用wx.navigateBack({delta:1}); 进行页面回退。而数据刷新的问题则在页面的onShow函数中进行便可。

 

路由方法与页面栈变化对应关系

---

路由方式	页面栈表现	触发时机
初始化	新页面入栈	小程序打开的第一个页面
打开新页面	新页面入栈	调用 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
页面重定向	当前页面出栈，新页面入栈	调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
页面返回	页面不断出栈，直到目标返回页	调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮
Tab 切换	页面所有出栈，只留下新的 Tab 页面	调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab
重加载	页面所有出栈，只留下新的页面	调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

小程序官方路由说明  https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

 

特别注意 :

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 能够打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数能够在目标页面的onLoad中获取。