微信小程序中路由跳转的方式有哪些?区别?

这篇具有很好参考价值的文章主要介绍了微信小程序中路由跳转的方式有哪些?区别?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

面试官:说说微信小程序中路由跳转的方式有哪些?区别?

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

一、是什么

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能

在微信小程序中,每个页面可以看成是一个 pageModelpageModel 全部以栈的形式进行管理

二、有哪些

常见的微信小程序页面跳转方式有如下:

  • wx.navigateTo(Object)
  • wx.redirectTo(Object)
  • wx.switchTab(Object)
  • wx.navigateBack(Object)
  • wx.reLaunch(Object)

wx.navigateTo(Object)

wx.navigateTo()用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面

对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用

参数表如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

流程图如下:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

wx.redirectTo(Object)

重定向,当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 10 层页面栈的情况下,我们应该考虑选择 wx.redirectTo

wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面

这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间

参数表如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

流程图如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

wx.switchTab(Object)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

参数表如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

wx.navigateBack(Object)

wx.navigateBack() 用于关闭当前页面,并返回上一页面或多级页面,开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层则设置对象的delta属性即可

参数表如下:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

wx.reLaunch(Object)

关闭所有页面,打开到应用内的某个页面,返回的时候跳到首页

流程图如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

参数表如下所示:

微信小程序中路由跳转的方式有哪些?区别?,面试系列,wx小程序,微信小程序,小程序

三、总结

关于上述五种跳转方式,做下总结:

  • navigateTo 保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页
  • redirectTo 关闭当前页面,跳转到应用内的某个页面
  • switchTab 跳转到 tabBar 页面,同时关闭其他非 tabBar 页面
  • navigateBack 返回上一页面
  • reLanch 关闭所有页面,打开到应用内的某个页面

其中关于它们的页面栈的关系如下:

  • avigateTo 新页面入栈

  • redirectTo 当前页面出栈,新页面入栈

  • navigateBack 页面不断出栈,直到目标返回页,新页面入栈

  • switchTab 页面全部出栈,只留下新的 Tab 页面

  • reLanch 页面全部出栈,只留下新的页面

参考文献

  • https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html

更多前端资源==> GitHub文章来源地址https://www.toymoban.com/news/detail-789885.html

到了这里,关于微信小程序中路由跳转的方式有哪些?区别?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序有关跳转的API

    小程序可以通过以下API进行跳转: 1. `wx.navigateTo(options)`:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。 2. `wx.redirectTo(options)`:关闭当前页面,跳转到应用内的某个页面。 3. `wx.reLaunch(options)`:关闭所有页面,打开应用内的某个页面。 4. `wx.

    2024年02月03日
    浏览(40)
  • 微信小程序之间是如何跳转的,并携带参数

    要实现小程序之间的跳转,需要使用小程序的跳转 API。具体步骤如下:         1、在原小程序中,使用  wx.navigateToMiniProgram  API 跳转到目标小程序。         2、在目标小程序中,接收参数并进行处理。在目标小程序中,可以使用wx.getLaunchOptionsSync API获取原始启动参

    2024年02月16日
    浏览(49)
  • 微信小程序和H5之间相互跳转的几种情况

    直接通过web-view内嵌的方式,有且只有这一种方式。 H5内嵌在小程序的web-view中,想要打开小程序自身的页面,可通过 wx.miniProgram.navigateTo 方法,参考链接:web-view | 微信开放文档 (qq.com) H5在非小程序环境中,微信浏览器或者手机自带浏览器打开时,想要跳转到小程序,可通过

    2024年02月11日
    浏览(49)
  • 常见路由跳转的几种方式

    常见的路由跳转有以下四种: 1. router-link to=\\\"跳转路径\\\"  也可,如 2. this.$router.push() 跳转到指定的url,并在history中添加记录(即,点击回退,会退回上一个页面) 。 html中,如: 3. this.$router.replace() 跳转到指定的url, 但不会在history记录(即,点击回退 退回到上上个页) 4

    2024年02月10日
    浏览(43)
  • Vue路由跳转的五种方式

    路由跳转有两种形式:声明式导航、编程式导航 1. router-link 声明式 prop= :to=“…” 相当与 router.push(…) router-link中链接如果是’ / \\\'开始,就是从根路由开始 如果开始不带 ’ / \\\',则是从当前路由开始 例子 2. this.$router.push() 可追溯 编程式 router.push(…)//该方法的参数可以是一个

    2024年02月05日
    浏览(40)
  • Vue路由跳转的几种方式

    跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面。 用法同上,但是跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面,上一个记录是不存在的。 浏览器在解析时,将它解析成一个类似于a标签。 router-link:可以一个组

    2024年02月06日
    浏览(53)
  • uniapp路由跳转的六种方式

    uniapp官方文档详解: 一、uni.navigateTo保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 注意: 页面跳转路径有层级限制,不能无限制跳转新页面 跳转到 tabBar 页面只能使用 switchTab 跳转 二、uni.redirectTo关闭当前页面,跳转到应用内的某个页面。

    2024年02月11日
    浏览(45)
  • vue中路由跳转的几种方式

    2、第二种也是比较常见的,使用标签跳转: 3、第三种是使用replace跳转: 4、第四种是使用go方式跳转:

    2024年02月11日
    浏览(57)
  • 【vue3】vue3路由跳转的方式

    如 : 有无this都行 $router.push(\\\'/plantduce\\\') this.$router.push(\\\'/plantduce\\\') vue3 || vue2 路由参考 useRouter 与 useRoute 都可以。

    2024年02月06日
    浏览(42)
  • 小程序(uniapp)页面的跳转方式有哪些,他们之间的区别是什么?

    1、uni.navigateTo: 保留当前页面,跳转到应用的某个页面,使用 uni.navigateBack 可以返回原页面。这种方式类似于网页的超链接跳转。 2、uni.redirectTo: 关闭当前页面,跳转大应用内的某个页面。这种方式类似于网页的重定向。 3、uni.switchTab: 跳转到tabBar页面,并关闭其他所有非ta

    2024年02月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包