微信小程序之导航

导航：导航指的是页面之间的互相跳转

tabBar 页面：被配置为 tabBar的页面

声明式导航

实现：在页面上声明一个 <navigator> 导航组件，通过点击 <navigator> 组件实现页面跳转

导航到 tabBar 页面

在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定的 url 属性和 open-type 属性

注：

• url 表示要跳转到页面的地址，必须以 “/” 开头，以页面名称为结尾（没有后缀）
• open-type 表示跳转的方式，必须为 switchTab 

<navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator>

导航到非 tabBar 页面

在使用 <navigator> 组件跳转到指定的非 tabBar 页面时，需要指定的 url 属性和 open-type 属性

注：

• url 表示要跳转到页面的地址，必须以 “/” 开头，以页面名称为结尾（没有后缀）
• open-type 表示跳转的方式，必须为 navigate

<navigator url="/pages/main/main" open-type="navigate">跳转到主页</navigator>

后退导航

 后退到上一页或多级页面时，则需要指定 open-type 属性和 delta 属性

• open-type 表示要进行后退导航（值必须是 navigateBack ）
• delta 表示要后退的层级（值为整数）

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

编程式导航

实现：通过触摸事件，调用小程序的导航 API，实现页面的跳转

导航到 tabBar 页面

在事件中调用 wx..switchTab(Object object) 或 wx.reLaunch(Object object) 方法，可以跳转到 tabBar 页面

object 的参数 （注：url 属性是必填）

• url 需要跳转的 tabBar 页面的路径（switchTab 方法路径中不能带参数）
• success 接口调用成功的回调函数
• fail 接口调用失败的回调函数
• complete 接口调用结束的回调函数（一定会执行的函数）

// 页面
<button bind:tap="gohome" type="primary">跳转首页</button>
// 触摸事件方法
gohome() {
    wx.switchTab({
      url: '../home/home',
      success: () => {
        console.log("跳转成功");
      },
      fail: () => {
        console.log("跳转失败");
      },
      complete: () => {
        console.log("执行");
      }
    })
  }

导航到非 tabBar 页面

在事件中调用 wx..navigateTo(Object object) 方法，可以跳转到非 tabBar 页面

object 的参数 （注：url 属性是必填）

• url 需要跳转的 tabBar 页面的路径
• success 接口调用成功的回调函数
• fail 接口调用失败的回调函数
• complete 接口调用结束的回调函数（一定会执行的函数）

// 页面
<button bind:tap="gomain" type="primary">跳转主页</button>
// 触摸事件方法
gomain() {
    wx.navigateTo({
      url: '../main/main',
      success: () => {
        console.log("跳转成功");
      },
      fail: () => {
        console.log("跳转失败");
      },
      complete: () => {
        console.log("执行");
      }
    })
  },

后退导航

在事件中调用 wx.navigateBack(Object object) 方法，可以返回上一页或多级页面

object 的参数

• delta 返回的页面数，如果 delta 大于现有页面数，则返回到首页
• success 接口调用成功的回调函数
• fail 接口调用失败的回调函数
• complete 接口调用结束的回调函数（一定会执行的函数）

// 页面
<button bind:tap="goback" type="primary">返回上一层</button>
// 触摸事件方法
  goback() {
    wx.navigateBack({
      delta:1,
      success: () => {
        console.log("后退成功");
      },
      fail: () => {
        console.log("后退失败");
      },
      complete: () => {
        console.log("执行");
      }
    });
  },

导航的传参

声明式导航传参

在路径的后面直接携带参数

• 参数与路径之间用 “?” 分隔
• 参数名与参数值用 “=” 相连
• 不同的参数用 “&” 分隔

注：open-type 属性值为 switchTab 不能传参

<navigator url="../main/main?id=1&name='张三'" open-type="navigate">跳转到主页</navigator>

编程式导航传参

在事件中调用 wx..navigateTo(Object object) 或 wx.reLaunch(Object object) 方法跳转页面时，可以在路径中携带参数

注：reLaunch 方法可以给 tabBar 页面传参，也可以给 非 tabBar 页面传参

// 页面
<button bind:tap="gohome" type="primary">跳转tabBar页</button>
<button bind:tap="gomain" type="primary">跳转非tabBar页</button> 
hohome() {
 wx.reLaunch({
         url: '../home/home?id=1&name="张三"',
      success: () => {
        console.log("跳转成功");
      },
      fail: () => {
        console.log("跳转失败");
      },
      complete: () => {
        console.log("执行");
      }
    })
},
gomain() {
    wx.navigateTo({
      url: '../main/main?id=1&name="张三"',
      success: () => {
        console.log("跳转成功");
      },
      fail: () => {
        console.log("跳转失败");
      },
      complete: () => {
        console.log("执行");
      }
    })
  }

接收导航参数

通过声明式导航传参或编程式传参所携带的参数，可以在 onLoad 函数中直接获取到数据

  onLoad(options) {
    console.log("主页接收参数", options);
  },