微信小程序学习日记 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.navigateTo 的 success 回调中也包含一个 EventChannel 对象。

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

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

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

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

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

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

页面信息配置完了，怎么进行路由呢？

#1. wx.switchTab(Opts)

#2. wx.navigateTo(Opts)

#3. wx.redirectTo(Opts)

#4. wx.navigateBack(Opts)

#5. wx.reLaunch(Opts)