微信小程序之页面路由(九)

【未经容许，请勿以任何形式转载】
什么是路由？

咱们一般理解的路由指分组数据包从源到目的地时，决定端到端路径的网络范围的进程；

借用上面的定义，咱们能够理解小程序页面路由，根据路由规则（路径）从一个页面跳转到另外一个页面的的规则。

经过本篇文章，你能够学习到：

1. 哪些状况会触发页面跳转
2. 如何跳转页面
3. 页面传参
4. 页面栈

1、哪些状况会触发页面跳转

1. 小程序启动，初始化第一个页面
2. 打开新页面，调用 API wx.navigateTo 或使用<navigator />组件
3. 页面重定向，调用 API wx.redirectTo 或使用<navigator />组件
4. 页面返回，调用 API wx.navigateBack或用户按左上角返回按钮
5. tarbar切换

全部页面都必须在app.json中注册,例如：

{
    "pages": [
        "pages/index/index",
        "pages/logs/index"
    ]
}

2、如何跳转页面

1. 使用wx.navigateTo接口跳转,原页面保留。

wx.navigateTo({
        //目的页面地址
        url: 'pages/logs/index',
        success: function(res){},
        ...
})

1. 使用wx.redirectTo接口跳转，关闭原页面,不能返回。

wx.redirectTo({
        //目的页面地址
        url: 'pages/logs/index',
        success: function(res){},
        ...
})

3.使用组件 跳转。

<navigator url="pages/logs/index" hover-class="navigator-hover">跳转</navigator>

当该组件添加redirect属性时，等同于wx.redirectTo接口；默认redirect属性为false，等同于wx.navigateTo接口。

1. 用户点击左上角返回按钮，或调用wx.navigateBack接口返回上一页。

wx.navigateBack({
    delta: 1
})

delta为1时表示返回上一页，为2时表示上上一页，以此类推；若是dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁。

》》》页面跳转传值

其实这个很简单,形如：

url?key=value&key1=value1

通过测试，传递的参数没有被URIEncode,传递中文没有乱码。参数长度未测试。

3、如何正确使用页面跳转

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

1. 对于可逆操做，使用wx.navigateTo,好比从首页跳转到二级页面，从二级页面返回是不须要从新渲染首页
2. 对于不可逆操做，使用wx.redirectTo,好比用户登陆成功后，关闭登陆页面，不能返回到登陆界面。
3. 对于一些介绍性等不经常使用页面wx.redirectTo或wx.navigatrBack
4. 对于相似九宫格、列表项，使用 跳转
5. 不要在首页使用wx.redirectTo，这样会致使应用没法返回首页
6. 简化需求、简化流程；核心功能在两三个页面完成即是张小龙追求『小而美』的体现

4、页面栈

页面栈以栈（先进后出）的形式维护页面与页面之间的关系；
小程序提供了getCurrentPages()函数获取页面栈，第一个元素为首页，最后一个元素为当前页面。

1. 使用wx.navigateTo每新开一个页面，页面栈大小加1,直到页面栈大小为5为止；
   

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

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

1. 使用wx.redirectTo重定向
   

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

1. 使用wx.navigateBack返回
   

上图中，假如当前页面为五级页面，使用wx.navigateBack：

• 当delta为1，关闭五级页面，当前页面为四级页面，页面栈大小减1；
• 当delta为2，关闭依次五级页面和四级页面，当前页面为三级页面，页面栈大小减2；
• 以此类推，直到栈底为止，也就是首页。

以上使用wx.navigateTo、wx.redirectTo、wx.navigateBack页面出入栈操做对页面栈的影响，平时不必定用得上，可是仍是有必要了解背后的原理。

经过学习页面栈，你至少能够知道：

• 小程序运行时你能够获取到已经初始化了的页面的属性和方法
• 动态获取当前页面路径
• 页面自动跳转
• 你能够经过getCurrentPages()获取页面page对象，执行非当前页js里的方法

总结

• wx.navigateTo会增长页面栈大小，直到页面栈大小为5
• wx.redirectTo不会增长页面栈大小
• wx.navigateBack会减小页面栈大小，直到页面栈大小为1

最后，值得庆祝的是在12月17日第二届中国深商大会上马化腾透露，小程序会在春节前全面推出。