微信小程序的页面导航跳转

声明式导航

1.导航到非tabBar页面

非tabBar页面指的是没有被当作tabBar进行切换的页面。

示例代码：

<navigator url='pages/info/info' > 点击跳转</navigator>

 上述代码使用url属性置顶要跳转到的页面路径，其中页面路径应该以/开头，且路径必须提前在app.json的pages 节点下声明，才能实现正常的跳转。

 

2.导航到tabBar页面

tabBar页面指的是被当作tabBar进行页面切换的页面。如果navigator组件单纯使用url属性，无法导航到tabBar页面，需要结合open-type属性进行导航。

<navigator url="/pages/home/home" open-type="switchTab">点击跳转</navigator>

 

3.后退导航

如果要后退到上一页面或多级页面，需要把open-type设置为navigateBack， 同时使用delta属性指定后退的层数。

<navigator open-type="navigateBack" delta="1">返回上一页面</navigator>

 

---

编程式导航

1.导航到非tabBar页面

通过wx.navigateTO（Object）方法，可以跳转到应用内的某个页面，但不能跳转到tabBar页面上。其中Object参数对象的属性列表如下。

url： string，必填，需要跳转的应用非tabBar路径，路径后面可以携带参数参数与路径之间？分隔，参数键与值用=相连，不同参数用&分隔。

success: function，选填，接口调用成功的回调函数。

fail： function，选填，接口调用失败的回调函数。

complate： function，选填，接口调用结束的回调函数，调用成功和失败都会执行。

<view><button bindtap="btn">logs</button></view>

btn: function () {
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  }

 

2.导航到tabBar页面

通过wx.switchTab（Object, Object）方法，可以跳转到tabBar页面，并关闭其他所有非tabBar页面，其中Object参数对象的属性如下：

url： string，必填，需要跳转的应用非tabBar路径，路径后面可以携带参数参数与路径之间？分隔，参数键与值用=相连，不同参数用&分隔。

success: function，选填，接口调用成功的回调函数。

fail： function，选填，接口调用失败的回调函数。

complate： function，选填，接口调用结束的回调函数，调用成功和失败都会执行。

 

3.后退导航

通过wx.navigateBack(Object) 方法，关闭当前页面，返回上一页面或多级页面参数如下：

delta： number，必填，返回的页面数，如果delta大于现有页面数，则返回首页

success: function，选填，接口调用成功的回调函数。

fail： function，选填，接口调用失败的回调函数。

complate： function，选填，接口调用结束的回调函数，调用成功和失败都会执行。

 

---

 

导航传参：

小程序中url传参与html 一样，可以在地址后面传递参数。

 

接收参数：

不论是声明式导航还是编程式导航，最终导航到的页面可以在onLoad生命周期函数中接收传递过来的参数。

onLoad: function (options) {

  　　console.log(options)

}

 

自定义编译模式快速传参：

小程序每次修改代码并编译后，会默认从首页进入，但是在开发阶段，我们经常会针对特定页面进行开发，为了方便编译后直接进入对应页面，可以配置自定义编译模式，步骤如下：
1.点击工具栏的普通编译，下拉菜单，

2. 单击下拉菜单的添加编译模式选项

3. 在弹出的自定义编译条件窗口，按需添加模式名称，启动页面，启动参数。