微信小程序学习日记 L02 路由跳转

最后更新:

以前一直都是写的 Vue,所以在刚接触小程序的时候会疑惑,小程序是否也有和 Vue 一样有路由表,但是看完开放文档之后发现没有路由表,就很疑惑。
那小程序怎么去做页面跳转的呢?

首先,虽然小程序没有路由表,但是在全局配置文件(app.json)中有 pages 信息

用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。
文件名不需要写文件后缀,框架会自动去寻找对应位置的文件进行处理。

例如默认项目中:

{
  "pages": [
    "pages/index/index", // 首页
    "pages/logs/logs" // 日志页
  ],
  "entryPagePath": "pages/index/index" // 初始页面
}

可以通过 entryPagePath 指定小程序的初始页面(首页),如果未配置则默认为 pages 数组的第一项。

📑 pages - 全局配置 | 微信开放文档

如果想要配置到底部的Tabs上,则需要在 tabBar 属性中配置
例如:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "entryPagePath": "pages/index/index",
  "tabBar": {
    "color": "#BBBBBD", // 文字默认颜色
    "selectedColor": "#040104", // 文字选中时的颜色
    "list": [ // tab 的列表
      {
        "pagePath": "pages/index/index", // 页面路径,必须在 pages 中先定义
        "text": "首页", // tab 上按钮文字
        "iconPath": "assets/img/tabbar_home.png", // icon图片路径
        "selectedIconPath": "assets/img/tabbar_home_active.png" // tab选中时icon图片路径
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "assets/img/tabbar_logo.png",
        "selectedIconPath": "assets/img/tabbar_logo_active.png"
      }
    ]
  },
}

注意:只能配置最少 2 个、最多 5 个 tab,tab 按数组的顺序排序,每个项都是一个对象

📑 tabBar - 全局配置 | 微信开放文档
📑 自定义 tabBar | 微信开放文档


页面信息配置完了,怎么进行路由呢?

小程序提供了 5 种路由操作API:

#1. wx.switchTab(Opts)

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面

#2. wx.navigateTo(Opts)

保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

  • 对应 vue-router 当中的 $router.push()

#3. wx.redirectTo(Opts)

关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

  • 对应 vue-router 当中的 $router.replace()

#4. wx.navigateBack(Opts)

关闭当前页面,返回上一页面或多级页面,如果大于现有页面数,则返回到首页。

  • 对应 vue-router 当中的 $router.back()$router.forward()$router.go(-1) 或者 $router.go(-n)

#5. wx.reLaunch(Opts)

关闭所有页面,打开到应用内的某个页面

  • 可以理解成 location.reload() ,刷新小程序并且打开指定页面

注意:小程序中页面栈最多十层

最后是疑问部分:

🎇 路由是否可以像 vue-router 一样省略 index

不可以,需要全路径

🎇 如何路由传参

需要跳转的应用内非 tabBar 的页面路径后可以用 query 的形式传递参数,如 path?key=value&key2=value2
页面中也可以在 onLoad 事件中接受参数

Page({
  onLoad: function(option){
    console.log(option.query)
  }
})

具体查看文档 wx.navigateTo(Object object) | 微信开放文档

🎇 清空路由历史

没有单独的清空跳转历史API,可以直接使用 wx.reLaunch() 来跳转到目标页面,并且同时关闭所有已经打开过的页面,就不能用 wx.navigateBack() 返回了,左上角的按钮也会变成 🏠 home

🎇 路由文档中的 EventChannel 是什么

如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道

  • 被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 EventChannel 对象;
  • wx.navigateTosuccess 回调中也包含一个 EventChannel 对象。

有点 Vue 中的父子组件通信 $emit@on ,比如说来进行数据回传:

1.先打开页面A;
2.然后选择具体信息(打开页面B);
3.选择完成确定;
4.返回页面A(接收页面B回传的数据) 的步骤。

示例代码就不复制过来了,直接看 示例代码 内的 Demo 就好了,也可以查看 📌代码片段

EventChannel | 微信开放文档
页面间通信 - Page(Object object) | 微信开放文档

本文所描述小程序最新版本 v2.17.0 (2021-04-28)