微信小程序中使用路由

 
 

  
  
本章我们主要谈一谈页面之间的路由怎么使用

  
  
路由方式

  
  
对于路由的触发方式以及页面生命周期函数如下:

  
  
路由方式
触发时机
路由前页面
路由后页面
初始化
小程序打开的第一个页面
 
onLoad, onSHow
打开新页面
调用
 API wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
onHide
onLoad, onShow
页面重定向
调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
onUnload
onLoad, onShow
页面返回
调用
 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮
onUnload
onShow
Tab 切换
调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/>
 或用户切换 Tab
 
各种情况请参考下表
重启动
调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>
onUnload
onLoad, onShow

  
  
页面跳转触发的生命周期，其实还是存在问题的，并非官方所说的那样。

  
  
SwitchTab的跳转BUG
首页跳转到子页面后，在子页面上使用：
<navigator type='switchTab' url="/pages/index/index" >
    <view>跳转首页</button>
</navigator>
这种方式有问题，解决的办法是通过JS来实现跳转，代码如下：
<view class="weui-btn-area">
             <button class="weui-btn" bindtap="backIndex" type="default">返回主页</button> 
            </view>
跳转成功后，重新调用onload方法，JS代码如下：
backIndex:function(){
    wx.switchTab({
      url: '/pages/index/index',
      success: function (e) {
        var page = getCurrentPages().pop();
        if (page == undefined || page == null) return;
        page.onLoad();
      }
    })
  }

友情提醒：页面路由的其他基础知识请看官方文档 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/route.html

  
  
页面栈
  
  
页面栈以栈（先进后出）的形式维护页面与页面之间的关系；小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面。
1、使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止；
  
  

  
  

   
   
   
   

   
   

    
    1.png
   
   
  
  
  
  

  
  
2、使用wx.navigateTo重复打开界面
  
  

  
  

   
   
   
   

   
   

    
    2.png
   
   
  
  
  
  
上图中，假如使用wx.navigateTo从四级页面跳转到二级页面，此时会在页面栈顶添加一个与二级页面初始状态一样的界面，但两个页面状态是独立的。页面栈大小会加1，如果页面栈大小为5，则wx.navigateTo无效
  
  
使用wx.redirectTo重定向
  
  

   
   
   
   

   
   

    
    3.png
   
   
  
  
  
  

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

   
   
   
   

   
   

    
    4.png
   
   
  
  
  
  

  
  
上图中，假如当前页面为五级页面，使用wx.navigateBack：
  
  
当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；
当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；
以此类推，直到栈底为止，也就是首页。
以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操作对页面栈的影响，平时不一定用得上，但是还是有必要了解背后的原理。
  
  
通过学习页面栈，你至少可以知道：
  
  
小程序运行时你可以获取到已经初始化了的页面的属性和方法
动态获取当前页面路径
页面自动跳转
你可以通过getCurrentPages()获取页面page对象，执行非当前页js里的方法
  
  
总结
  
  
1、wx.navigateTo会增加页面栈大小，直到页面栈大小为5
2、wx.redirectTo不会增加页面栈大小
3、wx.navigateBack会减少页面栈大小，直到页面栈大小为1
 
 

作者：陈楠酒肆
链接：http://www.jianshu.com/p/951d7caa44d5
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。