微信小程序知识点整理(五)——页面导航

一、声明式导航

官方文档：页面路由

1. 导航到非 tabBar 页面

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

<navigator url="/pages/home/home">跳转到home页面</navigator>
<!-- <navigator url="../home/home">跳转到home页面</navigator> -->

• 注意事项

  • url 属性设置需要跳转的路径
  • 页面路径应该以/开头(根路径的方式)，也可以使用相对路径
  • 路径必须提前在 app.json 的 pages 节点下声明

2. 导航到 tabBar 页面

navigator组件单纯使用 url 属性，无法导航到 tabBar 页面，必须需要结合 open-type 属性进行导航。

<navigator url="/pages/tabMessage/tabMessage" open-type="switchTab">跳转到消息tab页面</navigator>

3. 后退导航

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

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

<navigator open-type='navigateBack' delta='2'> 返回上上一页 </navigator>

二、编程式导航

官方文档：路由

1. 导航到非 tabBar 页面

官方文档：wx.navigateTo

通过 wx.navigateTo(Object object) 方法，可以跳转到应用内的某个页面。
但是不能跳到 tabBar 页面。

// 触发点击事件 跳转到非导航页面
btnHandle: function () {
  wx.navigateTo({
    url: '/pages/about/about',
    success: function () {
      console.log('Hello about')
    }
  })
},

2. 导航到 tabBar 页面

官方文档：wx.switchTab

通过 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面

// 跳转到导航页面
  btnHandle2() {
    wx.switchTab({
      url: '/pages/tabHome/tabHome',
      success: function() {
        console.log('hello,tabHome')
      }
    })
  },

3. 后退导航

官方文档：wx.navigateBack

通过 wx.navigateBack(Object object)方法，关闭当前页面，返回上一页面或多级页面。

  btnHandle3() {
    wx.navigateBack({
      delta:1
    })
  },

三、导航传参

1. 声明式导航传参

navigator 组件的 url 属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

<navigator url="/pages/about/about?age=18&name=shuji">跳转到 about 页面</navigator>

2. 编程式导航传参

wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。

// 跳转到 tabBar 页面
tabBarHandle: function () {
  wx.switchTab({
    url: '/pages/person/person?age=18&name=shuji',
    success: function() {
      console.log('Hello Person')
    }
  })
},

3. 接受传递的参数

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

onLoad: function (options) {
    // 打印传递出来的参数
    console.log(options)
  },

4. 导航栏自定义编译模式快速传参

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

  • 单击工具栏上的“普通编译”下拉菜单
  • 单击下拉菜单中的“添加编译模式”选项
  • 在弹出的“自定义编译条件窗口”，按需添加模式名称、启用页面、启动参数、进入场景等。

搭配文章：微信小程序里的路由函数解析