微信小程序-页面导航

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

    }