微信小程序开发系列（三十一）·页面跳转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

---

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

1.  声明式导航：navigator 组件

参考：

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

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

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

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

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

 
Page({ 
  navigateTo(){
 
  },
 
  redirectTo(){
 
  },
 
  switchTab(){
 
  },
 
  reLaunch(){
 
  },
 
  navigateBack(){
    
  }
})
 
 

2.1  页面跳转

2.1.1  wx.navigateTo

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

        找到navigateTo()将其更改为：

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

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

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

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

        点击后发现无法跳转：

2.1.2  wx. redirectTo

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

        找到redirectTo()将其更改为：

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

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

        更改为tabBar页面：

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

        会发现不能跳转：

2.1.3  wx.switchTab

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

        找到switchTab()将其更改为：

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

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

        更改代码：

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

        此时点击未发生跳转：

2.1.4  wx.reLaunch

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

        更改reLaunch()代码：

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

        点击reLaunch：

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

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

        更改为tabBar页面：

  reLaunch(){
    // 关闭所有页面，然后跳转到应用中某一个页面
    wx.reLaunch({
      // 普通页面
      // url:'/pages/list/list'
 
      // tabBar页面
      url:'/pages/cate/cate'
    })
  },

        点击按键也能发生跳转：

2.1.5  wx.navigateBack

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

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

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

        找到list.wxml文件，粘贴：

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

  navigateBack(){
 
  }

        找到list.js文件，粘贴：

        将navigateBack()更改为：

Page({
  navigateBack(){
    // 关闭当前页面，返回上一页或者返回多级页面，默认返回上一页
    wx.navigateBack()
  }
})

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

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

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

Page({
  navigateBack(){
    // 关闭当前页面，返回上一页或者返回多级页面，默认返回上一页
    wx.navigateBack({
      // 返回几级写几
      delta: 1
    })
  }
})

        点击就能返回多级页面。

2.2  参数传递

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

2.2.1  wx.navigateTo

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

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

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

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

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

Page({
  navigateBack(){
    // 关闭当前页面，返回上一页或者返回多级页面，默认返回上一页
    wx.navigateBack({
      // 返回几级写几
      delta: 1
    })
  },
 
  onLoad(options){
    console.log(options)
  }
})

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

2.2.2  wx. redirectTo

        找到redirectTo()更改url：

  redirectTo(){
    // 关闭（销毁）当前页面，跳转到应用中其他页面，不能跳转到tabBar页面
    wx. redirectTo({
      // 普通页面
      url:'/pages/list/list?id=1&name=tom'
 
      // tabBar页面
      // url:'/pages/cate/cate'
    })
  },

2.2.3  wx.switchTab

        找到switchTab()更改url：

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

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

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

2.2.4  wx.reLaunch

        找到reLaunch()更改url：

  reLaunch(){
    // 关闭所有页面，然后跳转到应用中某一个页面
    wx.reLaunch({
      // 普通页面
      // url:'/pages/list/list'
 
      // tabBar页面
      url:'/pages/cate/cate?id=1&name=tom'
    })
  }

        点击按钮：

        普通页面亦是如此。

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