微信小程序开发笔记 – 路由导航()

路由导航

  • 路由导航1. 声明式路由导航1.1 声明式后退导航1.2 声明式导航传参2. 编程式路由导航2.1 编程式后退导航2.3 编程式导航传参
  • 1. 声明式路由导航1.1 声明式后退导航1.2 声明式导航传参
  • 1.1 声明式后退导航
  • 1.2 声明式导航传参
  • 2. 编程式路由导航2.1 编程式后退导航2.3 编程式导航传参
  • 2.1 编程式后退导航
  • 2.3 编程式导航传参

1. 声明式路由导航

navigator标签被用于声明式路由导航

  • url表示要跳转的页面地址，必须以/开头
  • open-type表示跳转的方式，如果跳转的页面为tabBar页面，该属性必须为switchTab
<navigator url="/pages/info/info">导航到info页面</navigator>

<navigator url="/pages/message/message" open-type="switchTab">
    导航到消息页面
</navigator>

1.1 声明式后退导航

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

  • open-type的值必须是navigateBack，表示要进行后退导航
  • delta的值必须是数字，表示要后退的页面数
<navigator open-type="navigateBack" delta="1">后退</navigator>

1.2 声明式导航传参

navigator组件的url属性末尾可以携带参数：

  • 参数和路径之间使用?分隔
  • 参数键和参数值用=相连
  • 不同参数用&分隔
<navigator url="/pages/info/info?name=zs&age=20">跳转到info界面</navigator>

传递参数后，可以使用onLoad函数的参数获取与调用参数

option
onLoad: function (options){
    console.log(options)
}

2. 编程式路由导航

调用方法，可以跳转到tabBar页面

wx.switchTab(Object object)

调用方法，可以跳转到非tabBar页面s

wx.navigateTo(Object object)

其中Object参数对象可选的属性列表如下：

属性 说明
url 需要跳转的tabBar页面的路径，路径后不能带参数
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（无论调用结果如何都会执行）
  • 示例代码
    – WXML

    – JS
    //导航到tabBar页面
    gotoMessage(){
    wx.switchTab({
    url:’/pages/message/message’
    })
    }

    //导航到非tabBar页面
    gotoInfo(){
    wx.navigateTo({
    url:’/pages/info/info’
    })
    }

2.1 编程式后退导航

如果要后退到上一页面或多级页面，需要调用方法，可以返回上一页面或多级页面。

wx.navigateBack(Object object)

其中Object参数对象可选的属性列表如下：

属性 说明
delta 后退的页面数，如delta大于现有页面数，则返回到首页
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（无论调用结果如何都会执行）
  • 示例代码
    – WXML

    – JS
    goBack(){
    wx.navigateBack({
    wx.navigateBack()
    })
    }

2.3 编程式导航传参

调用方法跳转页面时，也可以携带参数

wx.navigateTo(Object object)
gotoInfo(){
    wx.navigateTo({
        url:'/pages/info/info?name=ls&gender=男'
    })
}

获取、调用参数的方法与声明式导航一致

————————

路由导航

  • 路由导航1. 声明式路由导航1.1 声明式后退导航1.2 声明式导航传参2. 编程式路由导航2.1 编程式后退导航2.3 编程式导航传参
  • 1. 声明式路由导航1.1 声明式后退导航1.2 声明式导航传参
  • 1.1 声明式后退导航
  • 1.2 声明式导航传参
  • 2. 编程式路由导航2.1 编程式后退导航2.3 编程式导航传参
  • 2.1 编程式后退导航
  • 2.3 编程式导航传参

1. 声明式路由导航

navigator标签被用于声明式路由导航

  • url表示要跳转的页面地址，必须以/开头
  • open-type表示跳转的方式，如果跳转的页面为tabBar页面，该属性必须为switchTab
<navigator url="/pages/info/info">导航到info页面</navigator>

<navigator url="/pages/message/message" open-type="switchTab">
    导航到消息页面
</navigator>

1.1 声明式后退导航

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

  • open-type的值必须是navigateBack，表示要进行后退导航
  • delta的值必须是数字，表示要后退的页面数
<navigator open-type="navigateBack" delta="1">后退</navigator>

1.2 声明式导航传参

navigator组件的url属性末尾可以携带参数：

  • 参数和路径之间使用?分隔
  • 参数键和参数值用=相连
  • 不同参数用&分隔
<navigator url="/pages/info/info?name=zs&age=20">跳转到info界面</navigator>

传递参数后，可以使用onLoad函数的参数获取与调用参数

option
onLoad: function (options){
    console.log(options)
}

2. 编程式路由导航

调用方法，可以跳转到tabBar页面

wx.switchTab(Object object)

调用方法，可以跳转到非tabBar页面s

wx.navigateTo(Object object)

其中Object参数对象可选的属性列表如下：

属性 说明
url 需要跳转的tabBar页面的路径，路径后不能带参数
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（无论调用结果如何都会执行）
  • 示例代码
    – WXML

    – JS
    //导航到tabBar页面
    gotoMessage(){
    wx.switchTab({
    url:’/pages/message/message’
    })
    }

    //导航到非tabBar页面
    gotoInfo(){
    wx.navigateTo({
    url:’/pages/info/info’
    })
    }

2.1 编程式后退导航

如果要后退到上一页面或多级页面，需要调用方法，可以返回上一页面或多级页面。

wx.navigateBack(Object object)

其中Object参数对象可选的属性列表如下：

属性 说明
delta 后退的页面数，如delta大于现有页面数，则返回到首页
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（无论调用结果如何都会执行）
  • 示例代码
    – WXML

    – JS
    goBack(){
    wx.navigateBack({
    wx.navigateBack()
    })
    }

2.3 编程式导航传参

调用方法跳转页面时，也可以携带参数

wx.navigateTo(Object object)
gotoInfo(){
    wx.navigateTo({
        url:'/pages/info/info?name=ls&gender=男'
    })
}

获取、调用参数的方法与声明式导航一致