小程序 – 页面导航

简介

页面导航指的是页面之间的相互跳转。小程序页面导航分为声明式导航和编程式导航

声明式导航

导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。

在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url  属性和 open-type  属性

<navigator url="/pages/Message/Message" open-type="switchTab">导航到TabBar标签页</navigator>

url 表示要跳转的页面的地址，必须以 /  开头

open-type  表示跳转的方式，必须为 switchTab

导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。

在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定 url  属性和 open-type  属性

<navigator url="/pages/Message/Message" open-type="navigate">导航到非TabBar标签页</navigator>

也可以省略 open-type="navigate" ,

<navigator url="/pages/Message/Message" >导航到非TabBar标签页</navigator>

url  表示要跳转的页面的地址，必须以 /  开头

open-type  表示跳转的方式，必须为 navigate

后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type  属性和 delta  属性

open-type  的值必须是navigateBack ，表示要进行后退导航

delta 的值必须是数字，表示要后退的层级

<navigator open-type="navigateBack" delta="1">返回到深度为1的页面</navigator>

delta 指返回深度，delta="2" 将返回上两页，delta 默认为 1,可以省略

<navigator open-type="navigateBack">返回上一页</navigator>

导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

参数与路径之间使用 ? 分隔

参数键与参数值用 = 相连

不同参数用 & 分隔

<navigator url="/pages/User/User?username=zx&age=20" open-type="switchTab">声明式导航到User页</navigator>

接收导航参数

在 onLoad( options )  方法中，options 则为接收的参数

  onLoad(options) {
    console.log(options)
    //  options { username:'zx', age:'20' }
  },

编程式导航

导航到 tabBar 页面

调用 wx.switchTab(Object object)  方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：

// wxml:页面结构
<button bindtap="navToSwitchTap">导航到tabBar标签页</button>

// js: 通过编程式导航，导航到 Message 页
Page({
  navToSwitchTap(){
    wx.switchTab({
      url: '/pages/Message/Message',
    })
  }
})

导航到非 tabBar 页面

调用 wx.navigateTo(Object object)  方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：

// wxml:页面结构
<button bindtap="navToNavigate">导航到非tabBar标签页</button>

// js: 通过编程式导航，导航到 Info 页
Page({
  navToNavigate(){
    wx.navigateTo({
      url: '/pages/Info/Info',
    })
  }
})

后退导航

调用 wx.navigateBack(Object object)  方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：

<button bindtap="gotoBack">返回上一页</button>

Page({
  gotoBack(){
    wx.navigateBack({
      delta: 1,
    })
  }
})

也可以省略 delta

<button bindtap="gotoBack">返回上一页</button>

Page({
  gotoBack(){
    wx.navigateBack()
  }
})

导航传参

调用 wx.navigateTo(Object object)  方法跳转页面时，也可以携带参数，代码示例如下：

<button bindtap="navToNavigate">编程导航到非tabBar标签页</button>

// js: 通过编程式导航，导航到 User 页
Page({
  navToNavigate(){
    wx.navigateTo({
      url: '/pages/User/User?username=zx&age=20',
    })
  }
})

接收导航参数

在 onLoad( options )  方法中，options 则为接收的参数

  onLoad(options) {
    console.log(options)
    //  options { username:'zx', age:'20' }
  },