站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-05-27 [网络编程]作者:fabuyuan 浏览:6 次

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

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

什么是路由?

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

一、哪些会触发页面跳转

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

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

{
    "pages": [
        "pages/index/index",
        "pages/classification/classification",
        "pages/start/start",
        "pages/detail/detail",  
    ]
}

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

  1. wx.navigateTo保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面
wx.navigateTo({
  url: 'pages/detail/detail',
  success: function(res) {},
  ...
})
  1. wx.redirectTo,关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面
wx.redirectTo({
  url: 'pages/detail/detail',
  success:function(res){},
  ...
})
  1. <navigator />组件跳转方式
<navigator url=pages/detail/detail">跳转</navigator>
  1. wx.navigateBack返回上一页
wx.navigateBack({
	delta: 1,
})

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

  1. wx.switchTab跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
    app.json:
{
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
    },
    {
        "pagePath": "pages/car/car",
        "text": "购物车",
      },
   ...
  }
}

index.js:

wx.switchTab({
  url: 'pages/car/car'
})

三、小程序路由实现原理

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

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

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

当我们使用wx.navigateBack返回时

那么wx.redirectTowx.navigateTo有什么区别呢?

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

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

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

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

以上就是微信小程序之页面路由知识点总结的详细内容,更多请关注站长家园其它相关文章!

本文标签:  微信小程序

转载请注明来源:微信小程序之页面路由知识点总结

本文永久链接地址:https://www.adminjie.com/post/12843.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • mysql怎么对列求和

      mysql怎么对列求和

      在mysql中,可以使用SUM()函数来对列求和;SUM()是一个求总和的函数,可以返回指定列值的总和,语法“SELECTSUM(DISTINCT列名)F...

    • linux系统是哪个公司开发的

      linux系统是哪个公司开发的

      linux系统并不是由哪个公司开发的,最早是由“LinusTorvalds”个人编写了内核开发实现的;linux是一个操作系统,不属于任何公司是完全开放的,将...

    • linux是开源的吗

      linux是开源的吗

      linux是开源的。linux是一种自由和开放源代码的类UNIX操作系统,该操作系统的内核在加上用户空间的应用程序之后就成了linux操作系统,开源指的就是将源...

    • ios基于linux还是unix

      ios基于linux还是unix

      IOS是基于UNIX开发的;IOS实际上是Darwin的ARM变体,源自BSD,类UNIX内核,以及Apple本身的Mach内核扩展系统,这些与linux是完全...

    • mysql怎么查询第一条数据

      mysql怎么查询第一条数据

      在mysql中,可以使用SELECT语句配合LIMIT子句来查询第一条数据,语法为“SELECT*|字段名列表FROM表名LIMIT0,1;”。LIM...

    热门文章