小程序API —— 54 路由与通信 - 编程式导航

在小程序中实现页面的跳转，有两种方式：

• 声明式导航：navigator 组件
• 编程式导航：使用小程序提供的 API

编程式导航 API 提供了五个常用的 API 方法：

• wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面；
• wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面；
• wx.switchTab()：跳转到 tabBar 页面，路径后不能带参数；
• wx.reLaunch()：关闭所有页面，打开到应用内的某个页面；
• wx.navigateBack()：关闭当前页面，返回上一页面或者多级页面；

在使用编程式导航进行页面切换时，可以在路径后面加上参数，参数和路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数使用 & 分隔，例如：path?key=value&key2=value2，参数需要在跳转到页面的 onLoad 钩子函数中通过形参进行接收；

下面使用微信开发者工具演示一下如何使用这五个常用的 API 方法，同时演示一下如何传递参数：

• 演示 wx.navigateTo 用法：

  • 在 pages/cate/cate.wxml 中添加按钮代码，如下：

    <button plain type="warn" bind:tap="navigateTo">navigateTo</button>
    <button plain type="primary" bind:tap="redirectTo">redirectTo</button>
    <button plain type="warn" bind:tap="switchTab">switchTab</button>
    <button plain type="primary" bind:tap="reLaunch">reLaunch</button>
    <button plain type="warn" bind:tap="navigateBack">navigateBack</button>
    

  • 在 pages/cate.cate.js 中添加跳转代码，如下：

    Page({navigateTo(){// 保留当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.navigateTo({url: '/pages/list/list',})}})
    

  • 点击渲染，然后点击 navigateTo 按钮，可以看到跳转到 /pages/list/list 页面的效果，如下：

    

  • 页面左上角有一个返回按钮，点击该按钮可以返回上一页，如下：

    

  • 接着把跳转 url 修改为 tabBar 路由，比如修改到 cate 分类页面，如下：

    Page({navigateTo(){// 保留当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.navigateTo({url: '/pages/lcate/cate',})}})
    

  • 这时候点击跳转按钮，可以发现无法跳转，因为 wx.navigateTo 无法跳转到 tabBar 页面；

• 演示 wx.redirectTo用法：
  • 在 pages/cate/cate.js 中添加跳转逻辑，如下所示：

    Page({redirectTo(){// 关闭（销毁）当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.redirectTo({url: '/pages/list/list',})}
    })
    

  • 点击渲染，然后点击 redirectTo 按钮，可以看到跳转到 /pages/list/list 页面的效果，如下：
    
  • 小程序跳转到 list 页面后，会把原页面销毁 ，可以看到当前页面左上角没有返回上一页箭头；
  • 接着将跳转到 list 页面修改为跳转到 tabBar 的 cate 页面，如下：

    Page({redirectTo(){// 关闭（销毁）当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.redirectTo({url: '/pages/cate/cate',})}
    })
    

  • 这时候点击跳转按钮，可以发现无法跳转，因为 wx.redirectTo无法跳转到 tabBar 页面；
    
• 演示 wx.switchTab用法：
  • 在 pages/cate.cate.js 中添加跳转到 cart tabBar 的代码，如下：

    Page({switchTab(){// 跳转到 tabBar 页面，不能跳转到非 tabBar 页面，路径后面不能传递参数wx.switchTab({url: '/pages/cart/cart',})}
    })
    

  • 点击渲染，然后点击 switchTab按钮，可以看到跳转到 /pages/cart/cart 页面的效果，如下：
    
  • 注意 switchTab 不能切换到 tabBar 页面，这里我们设置跳转到非 tabBar 页面，如下：

    Page({switchTab(){// 跳转到 tabBar 页面，不能跳转到非 tabBar 页面，路径后面不能传递参数wx.switchTab({url: '/pages/list/list',})}
    })
    

  • 点击渲染，然后点击 switchTab 按钮，可以发现无法正常跳转到 list 页面；
• 演示 wx.reLaunch用法：
  • 在 pages/cate/cate.js 中添加跳转到 list 页面的代码，如下：

    Page({reLaunch(){// 关闭所有页面，跳转到应用中的某一个页面wx.reLaunch({url: '/pages/list/list',})}
    })
    

  • 点击 reLaunch 跳转按钮，可以发现跳转到 list 页面，如下所示：
    
  • 接着在 pages/cate/cate.js 中添加跳转到 cart tarBar 页面的代码，如下所示：

    Page({reLaunch(){// 关闭所有页面，跳转到应用中的某一个页面wx.reLaunch({url: '/pages/cart/cart',})}
    })
    

  • 点击渲染，然后点击 reLaunch 按钮，可以看到跳转到 cart 的 tarBar 页面，如下所示：
    
• 演示 wx.navigateBack用法：
  • 在 pages/list/list.wxml 中添加按钮样式，如下所示：

    <button plain type="warn" bind:tap="navigateBack">navigateBack</button>
    

  • 在 pages/list/list.js 中添加跳转逻辑，如下所示：

    Page({navigateBack(){// 关闭当前页面，返回上一页或者返回多级页面// 默认返回上一页wx.navigateBack({// 通过 delta 决定返回几级页面// 1 表示返回上一级页面，2 表示返回上二级页面delta: 1})}
    })
    

  • 在 pages/cate/cate.js 中的 navigateTo 添加跳转到 list 页面的代码，如下：

      navigateTo(){// 保留当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.navigateTo({url: '/pages/list/list',})}
    

  • 点击渲染，在 cate 页面点击 navigateTo 按钮，跳转到 list 页面，如下：
    
  • 点击 list 页面的 navigateBack 的按钮，可以发现返回到 cate 页面，如下所示：
    
• 下面演示如何在路径中添加参数

  • 在 navigateTo API 中演示，如下所示，在 pages/cate/cate.js 文件中添加如下代码：

    Page({navigateTo(){// 保留当前页面，跳转到应用中其它页面，不能跳转到 tabBar 页面wx.navigateTo({url: '/pages/list/list?id=1&name=tom',})}
    })
    

  • 点击渲染，然后调整左下角，使路径参数可见，如下：

    

  • 如果 list 页面需要接收参数，需要在 pages/list/list.js 文件中使用 unLoad 钩子函数，onLoad 方法有一个形参 options，打印 options 即可打印路径参数，代码如下：

    // pages/list/list.js
    Page({navigateBack(){// 关闭当前页面，返回上一页或者返回多级页面// 默认返回上一页wx.navigateBack({// 通过 delta 决定返回几级页面// 1 表示返回上一级页面，2 表示返回上二级页面delta: 1})},onLoad(options){console.log(options)}
    })
    

  • 点击 cate 页面的 navigateTo 按钮进入到 list 页面，即可在 console 区域看到打印的信息，如下：

    

参考视频：尚硅谷微信小程序开发教程