微信小程序页面导航

微信小程序页面导航指的是页面与页面之间的互相跳转，例如页面A跳转到页面B，页面B跳转到页面C，页面C返回页面B或页面A。

在微信小程序中，页面之间的跳转类似于路由跳转，都是通过传递一个URL地址来确认跳转页面的。页面之间传递参数也是通过在URL后添加key1=value1&key2=value2…，这与网页中的路由跳转和get请求都是一致的。接收参数时，是在页面的onLoad方法中接收的。

Page({
  onLoad: function(option){
    console.log(option.query)// option.query为"？"后的内容且以对象的方式接收
  }
})

在微信小程序中存在一个页面栈的概念，例如页面A跳转到页面B，页面B跳转到页面C，相当于在页面栈中依次添加了页面A、页面B、页面C，当单击左上角的返回时，相当于从页面栈中再依次取出页面B、页面A。如图所示。页面栈只能先进后出，后进先出。

wx.navigateTo

wx.navigateTo：进入页面栈，把跳转页面置于当前页面栈的最顶部。但是不能跳转到存在tabBar的页面。

wx.navigateTo({
  url: '页面路径',
  success: funcation(){
      // 跳转成功
    },
    fail: funcation(){
      // 跳转失败
    },
    complete: funcation(){
      // 不管成功失败都会执行
    }
  })

wx.navigateBack

wx.navigateBack：跳出页面栈，关闭当前页面，与微信内置导航栏上的返回键功能一样，区别是可以通过设置“delta”一次返回多个页面，但是delta的值要小于页面栈中总页面的数量，可以通过API“getCurrentPages()”获取当前页面的页面栈。

wx.navigateBack({
  delta: number, // 返回页面数
  success: funcation(){
    // 跳转成功
  },
  fail: funcation(){
    // 跳转失败
  },
  complete: funcation(){
    // 不管成功失败都会执行
  }
})

wx.switchTab

wx.switchTab：专门用来切换tabBar，会跳转到tabBar对应的页面中，并且关闭其他非tabBar页面。

wx.switchTab({
  url: '页面路径',
  success: funcation(){
    // 跳转成功
  },
  fail: funcation(){
    // 跳转失败
  },
  complete: funcation(){
    // 不管成功失败都会执行
  }
})

wx.redirectTo

wx. redirectTo：首先把当前页面从页面栈中取出释放掉，然后把要跳转的页面添加到页面栈的最顶部，也可以理解为把页面栈最顶部的页面替换掉。但是不能跳转到存在tabBar的页面。

wx.redirectTo({
  url: '页面路径',
  success: funcation(){
    // 跳转成功
  },
  fail: funcation(){
    // 跳转失败
  },
  complete: funcation(){
    // 不管成功失败都会执行
  }
})

wx.reLaunch

wx.reLaunch：会把当前页面栈中的页面全部清空，然后把要跳转的页面添加到页面栈中。但是不能跳转到存在tabBar的页面。

wx.reLaunch ({
  url: '页面路径'，
  success: funcation(){
    // 跳转成功
  },
  fail: funcation(){
    // 跳转失败
  },
  complete: funcation(){
    // 不管成功失败都会执行
  }
})

酷客网相关文章：

• 微信小程序API
• 微信小程序画布组件canvas
• 微信小程序video视频组件
• 微信小程序audio音频组件