微信小程序--页面导航

微信小程序–页面导航

1.页面导航解释

​ 页面导航指的是页面之间的相互跳转。相当于html中的a链接和location.href

2.小程序导航的2种方式

01.声明式导航

​ <navigator></navigator>导航组件

01.1 导航到tabBar页面

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

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

  ​ 代码示例：

  <navigator url="/pages/contact/contact" open-type="switchTab"> 
  	 跳转到contact--tabBar页面
  </navigator>
  

  01.2 导航到非tabBar页面，open-type必须为navigate

  <navigator url="/pages/datail/detail" open-type="navigate"> 
    跳转到detail
  </navigator>
  

  01.3 后退导航

  open-type的值必须为navigateBack

  delta表示后退级数，默认为1

  <navigator open-type="navigateBack" delta="1">
    后退一级
  </navigator>
  

02.编程式导航

​ 调用小程序的导航API，实现页面跳转

​ 参考文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

02.1 导航到tabBar页面

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1XOPTkG0-1656071049795)(E:\前端FD\md文件\images\switchTab.png)]

部分代码(wxml)：

<button bindtap="switch">跳转tabBar</button>

js(app.js已经设置好了tabBar的前提下):

switch(){
    wx.switchTab({
      url: '/pages/contact/contact'
    })
 }

02.2 导航到非tabBar页面

API: wx.navigateTo(), 属性url后可以带参数，不同参数之间&分割

<button bindtap="switch">跳转tabBar</button>

switch(){
    wx.navigateTo({
      url: '/pages/shoplist/shoplist'
    })
 }

返回一级或多级页面：

//delta 取值为几，表示返回几级页面
wx.navigateBack({
  delta: 2
})

}

返回一级或多级页面：

```js
//delta 取值为几，表示返回几级页面
wx.navigateBack({
  delta: 2
})