微信小程序开发系列（三十一）·页面跳转API（wx.navigateTo、wx. redirectTo、wx.switchTab、wx.reLaunch、wx.naviga）以及如何进行参数传递

目录

1.  声明式导航：navigator 组件

2.  编程式导航：使用小程序提供的API

2.1  页面跳转

2.1.1  wx.navigateTo

2.1.2  wx. redirectTo

2.1.3  wx.switchTab

2.1.4  wx.reLaunch

2.1.5  wx.navigateBack

2.2  参数传递

2.2.1  wx.navigateTo

2.2.2  wx. redirectTo

2.2.3  wx.switchTab

2.2.4  wx.reLaunch

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

参考：

微信小程序开发系列（十一）·小程序页面的跳转设置以及参数传递-CSDN博客

        找到cart.wxml文件，创建五个按钮，并给其分别添加事件：

        找到cart.js文件，在page中分别将事件列出：

        保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面。

        找到navigateTo()将其更改为：

        点击“navigateTo”，可以进行页面的跳转：

        将普通页面更改为“tabBar”页面，这里使用的是分类页面：

        点击后发现无法跳转：

        关闭（销毁）当前页面，跳转到应用中其他页面，不能跳转到tabBar页面

        找到redirectTo()将其更改为：

        点击“navigateTo”，我们会发现页面发生跳转，并且不能再返回上一页面，只能返回主页面：

        更改为tabBar页面：

        会发现不能跳转：

        保留当前页面，跳转到 tabBar 页面，不能跳转到应用中其他页面。

        找到switchTab()将其更改为：

        点击switchTab可以看到其发生了跳转：

        更改代码：

        此时点击未发生跳转：

        关闭所有页面，然后跳转到应用中某一个页面。

        更改reLaunch()代码：

        点击reLaunch：

        可以发现，发生页面跳转：

需要注意的是由于删除所有页面所以无法返回上一页面

        更改为tabBar页面：

        点击按键也能发生跳转：

        关闭当前页面，返回上一页或者返回多级页面，默认返回上一页。

        找到cart.wxml将创建的navigateBack按键剪切：

        找到list.wxml文件，粘贴：

         找到cart.js将创建的navigateBack()剪切：

        找到list.js文件，粘贴：

        将navigateBack()更改为：

        根据上图四个按键的功能，随机找一个能进入list页面的按钮，点击：

        点击上图按钮就可以返回上一页。

        如何返回多级页面呢？首先，将navigateBack()更改为：

        点击就能返回多级页面。

        路径后可以带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔，例如：path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。

        找到navigateTo()对url进行更改：

        点击上图按钮，找到“页面参数”，可以看到传递的参数：

        也可以在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。

        找到list.js文件，添加 onLoad 钩子函数：

         点击按钮后会发现接收到的参数子啊console显示：

        找到redirectTo()更改url：

        找到switchTab()更改url：

        我们会发现此时点击按钮，并不能传递参数：

        那是因为wx.switchTab不能再路径后面跟参数。

        找到reLaunch()更改url：

        点击按钮：

        普通页面亦是如此。

微信小程序开发_时光の尘的博客-CSDN博客