wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

原创已于 2022-06-16 14:23:23 修改 · 632 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序

于 2022-04-11 11:38:58 首次发布

微信小程序笔记专栏收录该内容

11 篇文章

订阅专栏

本文介绍了微信小程序中各种页面跳转方法，如wx.navigateTo、wx.redirectTo、wx.switchTab和wx.reLaunch，并重点讲解了如何处理非tabBar页面之间的层级管理和返回上一页面的封装方法。遇到跳转问题时，排查路径包括页面注册、URL正确性和目标页面类型。

 methods: {
    // 事件
    async getTest() {
      // 保留当前页面，跳转到应用内的某个页面，不破坏当前页序在当前页面进行跳转，可以返回原页面。
      // 对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使        用。
      wx.navigateTo({
        url: '../test/test'
      })
      
      // 关闭当前页面，跳转到应用内的某个页面。
      // 可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
      wx.redirectTo({
        url: '../test/test'
      })
      
      // 先关闭其他所有tabBar页面，跳转到tabBar页面
      // 不可以传递参数
      wx.switchTab({
        url: '../test/test'
      })

    // 实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。
    // 使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
      wx.reLaunch({
        url: '../test/test'
      })

解决页面层级封装的方法

 methods: {
    // 事件
    async getTest() {
    // 关闭当前页面， 返回上一页面或多级页面
    // 可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只        有 delta，表示要返回的页面数。
    // 若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。
   
     let pages = getCurrentPages()   //获取当前页⾯js⾥⾯的pages⾥的所有信息。
     let prevPage = pages[pages.length - 2]  //返回上一个页面
     //  prevPage 是获取上一个页面的js里面的pages的所有信息。-2是上一个页面，-3是上上个页面以此类推。
     prevPage.$vm.xuanCityid = this.xuanCityid  //传递参数
     this.$navigator.navigateBack()
    }
  }

注意：如果上述跳转遇到wx.navigateTo/wx.redirectTo 跳转失败或无效的问题

在微信小程序开发过程中，如果你出现了在其他地方可以正常跳转，但是此时就是不行，不知道为什么。可能是这几个原因：

1.你的页面在app.json文件中注册了吗？
2.你的url地址写对了吗，目录层级没错吗?
3.你要跳转到的页面是非tabBar的页面吗？如果是tabBar页面，恭喜你，找到问题了。 wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转，要跳转到tabBar页面，需要使用wx.switchTab