微信小程序-页面导航

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

    }