嘉定网站设计公司网站程序哪个好
在小程序中实现页面的跳转，有两种方式：
- 声明式导航：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 页面；
- 在 pages/cate/cate.js 中添加跳转逻辑，如下所示：
- 演示 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 页面；
- 在 pages/cate.cate.js 中添加跳转到 cart tabBar 的代码，如下：
- 演示 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 页面，如下所示：
- 在 pages/cate/cate.js 中添加跳转到 list 页面的代码，如下：
- 演示 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 页面，如下所示：
- 在 pages/list/list.wxml 中添加按钮样式，如下所示：
- 下面演示如何在路径中添加参数
-
在 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 区域看到打印的信息，如下：
-
参考视频：尚硅谷微信小程序开发教程