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