微信小程序之页面路由知识点总结

导读:本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于页面路由的相关内容,路由是指分组从源到目的地时,决定端到端路径的网络范围的进程,下面就一起来看一下,希望对大家有帮助。

微信小程序之页面路由知识点总结

【相关学习推荐:小程序学习教程】

什么是路由?

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由,根据路由规则(路径)从一个页面跳转到另一个页面的的规则。

一、哪些会触发页面跳转

  1. 小程序启动,初始化第一个页面
  2. 跳转新页面,调用wx.navigateTo 或者
  3. 页面重定向,调用wx.redirectTo 或者
  4. 页面返回,调用wx.navigateBack ,页面左上角返回按钮
  5. wx.switchTab实现tabBar页面切换

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

1

2

3

4

5

6

7

8

{

    "pages": [

        "pages/index/index",

        "pages/classification/classification",

        "pages/start/start",

        "pages/detail/detail",  

    ]

}


二、微信小程序中实现页面路由的几种方式

  1. wx.navigateTo,保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面

1

2

3

4

5

wx.navigateTo({

  url: 'pages/detail/detail',

  success: function(res) {},

  ...

})

  1. wx.redirectTo,关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

1

2

3

4

5

wx.redirectTo({

  url: 'pages/detail/detail',

  success:function(res){},

  ...

})

  1. 组件跳转方式

1

<navigator>跳转</navigator>

  1. wx.navigateBack返回上一页

1

2

3

wx.navigateBack({

    delta: 1,

})

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

  1. wx.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    app.json:

1

2

3

4

5

6

7

8

9

10

11

12

13

{

  "tabBar": {

    "list": [{

        "pagePath""pages/index/index",

        "text""首页",

    },

    {

        "pagePath""pages/car/car",

        "text""购物车",

      },

   ...

  }

}

index.js:

1

2

3

wx.switchTab({

  url: 'pages/car/car'

})

三、小程序路由实现原理

小程序路由是通过自己实现的一个栈(先进先出)来管理的。

当我们通过wx.navigateTo或者从A页面跳转到B页面时。路由栈的变化是这样的。

路由栈刚开始只存有页面A,当使用wx.navigateTo跳转后,页面B推入路由栈并展示到界面上,页面A隐藏。

当我们使用wx.navigateBack返回时

那么wx.redirectTo与wx.navigateTo有什么区别呢?

假如当前已经在二级页面B上,我们使用wx.redirectTo跳转到C页面,其过程是这样的。

如当前已经在二级页面B上,我们使用wx.redirectTo跳转到C页面,其过程是这样的。
[外链图片转存中…(img-mkPnbKug-1650431194878)]

页面B会被pop出,然后C页面再push进入栈,这个时候栈中还是只有两个页面。

你也想0元试听小码王编程课程吗?
填写信息免费预约
免责申明:以上展示内容来源于合作媒体、企业机构、网友提供或网络收集整理,版权争议与本站无关,文章涉及见解与观点不代表小码王官方立场,请读者仅做参考。本文标题:微信小程序之页面路由知识点总结,本文链接:https://www.xiaomawang.cn/help/201073.html;欢迎转载,转载请说明出处。若您认为本文侵犯了您的版权信息,或您发现该内容有任何涉及有违公德、触犯法律等违法信息,请您立即通过邮件(邮箱号: hzlixy@xiaoma.cn)联系我们及时修正或删除。
校区接待前厅
校区太空走廊
校区教室环境
校区多功能教室
小码王少儿编程体验课程免费预约