微信小程序之页面路由理解 - 刘世涛6192

公告

什么是路由？

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

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

通过本篇文章，你可以学习到：

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

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

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

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接口。
4. 用户点击左上角返回按钮，或调用wx.navigateBack接口返回上一页。

wx.navigateBack({
    delta: 1
})

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

其实这个很简单,形如：

url?key=value&key1=value1

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

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

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

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

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

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

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

通过学习页面栈，你至少可以知道：

总结

posted on 2020-07-06 16:18 刘世涛6192 阅读(588) 评论(0) 编辑收藏举报

刷新页面返回顶部