©2020-2024 ioDraw All rights reserved
1.什么是页面导航 页面导航是指页面之间的相互跳转。 ①<a>链接 ②location.href 小程序实现页面导航的两种方式 ①
声明式导航 ·在页面上声明一个<navigator>导航组件 ·通过点击<navigator>组件实现页面跳转
在使<navigator>组件跳转到指定的tabBar页面时，需要指定url属性和open-type属性，其中： ·url表示要跳转的 页面的地址
，必须以/开头 ·open-type 表示 跳转的方式，必须为 switchTab < navigator url ="
/pages/message/message " open-type =" switchTab "></ navigator > 2.导航到非tabBar页面
非tabBar页面指的是没有被配置为tabBar的页面，写法 < navigator url =" /pages/info/info "
open-type =" navigate "> 导航到info </ navigator > 3.后退导航
如果后退到上一页面或多级页面，则需要指定open-type属性 和 delta属性，其中： ·open-type
的值必须是navigateBack,表示要进行后退导航 ·delta 的值必须是 数字，表示要后退的层级 < navigator open-type
=" navigateBack " delta = " 1 "> 上一页 </ navigator > ② 编程式导航 ·
调用小程序的导航API，实现页面的跳转 调用wx.switchTab(Object object)方法，可以跳转到 tabBar页面。其中Object
参数对象的属性列表如下： < button bindtap =" gotomessage "> 跳转到tabBar页面 </ button >
gotomessage (){
wx . switchTab ( {
url : ' /pages/message/message ',
} )
}
属性 类型 是否必选 说明
url string 是 需要跳转的tabBar页面路径，路径后不能代参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功，失败都会执行） 调用wx.navigateTo(Object
object)方法，可以跳转到非tabBar的页面。其中Object 参数对象的属性列表如下： < button bindtap =" gotoinfo ">
跳转到非tabBar页面 </ button > 绑定的js:
gotoinfo(){
wx.navigateTo({
url: '/pages/info/info'
, })
}
属性 类型 是否必选 说明
url string 是 需要跳转的非tabBar页面路径，路径后不能代参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数（调用成功，失败都会执行） 后退导航 调用wx.navigateBack(Object
object) 方法，可以返回上一页面或多级页面。其中Object 参数对象可选的属性列表如下： < button bindtap =" gotoBack
"> 后退 </ button > 绑定的js:
gotoBack (){ wx .
navigateBack ( { delta : 1
} )
}
属性 类型 默认值 是否必选 说明
delta number 1 否 返回页面数，如果delta大于现有页数，则返回到首页
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 是 接口调用结束的回调函数（调用成功，失败都会执行） 声明式导航传参： < navigator url ="
/pages/info/info?name=ww&age=18 "> 跳到info页面 </ navigator > 编程式导航传参
调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下： < button bindtap ="
gotoinfo2 "> 跳到info页面 </ button > 绑定的js:
gotoinfo2 (){
wx . navigateTo ( {
url : '
/pages/info/info?name=lilei&gender=male ', } )
}
获得参数：
在跳转到的页面的onLoad中接收导航参数： 在 .js 页面 初始化一个 query对象 data: { query:{} }
onLoad: function (options) { console.log(options); query:options
}