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

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

声明式导航：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 区域看到打印的信息，如下：

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

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

网站公告

今日签到

热门文章

最新发布