《微信小程序-基础篇》带你了解小程序的路由系统（一）_后台能否决定微信小程序路由

大家好，这是小程序系列的第四篇文章，前两篇我们分享了关于小程序基本知识，地址如下：
1.《微信小程序-基础篇》初识微信小程序
2.《微信小程序-基础篇》带你快速了解小程序的基础语法
3.《微信小程序-基础篇》什么是组件化以及如何封装小程序组件
这一篇文章分享的是关于路由系统的一些基本知识，因为我们知道，路由跳转，接口请求，事件系统等等是构成一个完整前端，或者说小程序的基础功能，只有知道了这些，我们才能开发一个完整的小程序，包含完整的操作逻辑在里面；
介绍完基础以后会实际同步开发一个微信小程序的项目并开源，项目的主题暂定是原神的资料站~~~
–
最后，求关注，求收藏，求点赞，谢谢～

前言

在上一章节中我们先是通过一个场景描述了解了在前端领域中组件化开发的好处，之后分享了在小程序中如何进行组件化开发做了一个大致的介绍，通过学习我们知道，组件化开发已经深入到了我们前端的日常开发中，不管是页面的构建还是需求的变更又或者是BUG的修复，在组件化的影响下都有不小的便利～
而本章节，我们主要介绍的是 关于小程序的路由系统，耐心看完，你一定有所搜获～

阅读对象与难度

本文难度属于：初级，通过本文，你可以了解到什么是路由系统，什么是前端路由，小程序的路由系统，并且如何在小程序中如何定义一个路由地址，以及如和进行路由地址的定向跳转，携带参数跳转到指定的路由界面（该功能下一篇介绍），打通各个页面之间的联系；

路由系统

什么是路由

先来说说这个名词吧，可能有小伙伴刚开始接触前端，对前端的一些名词还不够了解，在解释之前，我先反问一个小问题：你认为任何一个网站或小程序是只有一个页面吗？答案肯定是 否定的，那既然有多个页面，那如果要从A页面去打开B页面，怎么办？这个其实就是路由系统的，放到Vue当中就是对于Vue-Router；
路由的概念其实来自于后端，而我们现在说的很多其实都是纯前端路由，就比如上面说到的Vue-Router，路由描述的是 地址与界面之间的映射关系，其实说穿了，就是一种对应关系，当我们输入某个地址时，路由系统可以通过这个地址找到对应的UI，在UI层表现在用户端的效果就是当我们点击按钮后页面跳转到指定的页面，其实就是按钮的点击事件的指向了某个指定的页面地址；
可能在 WEB端 更容易理解一点吧，毕竟浏览器是带网址输入的，可以更好的理解一下什么是路由，看张图先：

根据上面的解释，浏览器的地址栏中的地址会对应一个UI界面，这种对应关系是单向的，也就是当我们改变这个地址的同时，界面也会同时刷新（当然，要是两个地址调用的是同一个UI界面，那么这是另外一回事…不是BUG）

前端路由

这一节其实本不应该记录在这篇博客里，说来惭愧，因为我在查询小程序的路由系统时没有查到小程序的路由到底是前端路由还是后端路由，所以分享其实不大合适，希望有认真分析过小程序的小伙伴假如知道的话求个告知；
那么为什么会分享这个，因为 我个人猜测小程序是前端路由，所以感觉还是有必要分享一下前端路由，那么 什么是前端路由呢 ？我们知道路由的概念是由后端兴起的，简单的说就是地址栏中的地址会有后台返回它对应的UI界面及操作逻辑给到用户，这会有一个什么问题呢，问题就是 后台服务器的压力特别大：
举个例子：当1个用户在浏览某个界面的时候，跳转到一个新页面，那么此时后台服务器会将该页面的内容返回给用户的浏览器，这个没什么问题，那假如有1万个用户同时打开新页面呢，如果是10万个呢，这个对服务器以及服务器的带宽有非常高的要求，成本压力非常大，那换成前端路由呢，看个图吧？

应该能明白一点了吧，和后端路由不同的是，前端路由在一开始服务器会将 整web应用发送给前台，这也就是为什么小程序一开始加载会有点慢，我猜测它是前端路由的原因，会过来说，前端路由的意思就是说，不同的url地址的对应交由前端自己来判断，不需要经过后台计算了，当用户首次打开这个站点的时候，一股脑的，全部的界面 一次性发送到前台 ，要给用户展示哪个，完全取决于前台对于路由系统的定义，这种在我们前端领域，称之为单页应用，最常见的框架就是Vue，React等等，这么做好处非常的明显：

1. 后台服务器的压力大幅减小，界面由于已经完全给到前台了，因此，跳转啊，切换啊，隐藏啊完全区域与用户的操作，换句话说就是将一部分性能，带宽上的压力转嫁到了客户机上；
2. 用户体验极速提升，当然这里的提升指的是除去首次加载之外，要知道，由于所有的界面已经在前端存储了，那么用户操作切换界面的时候，那当然都是秒回的，相比后台；

缺点也很明显：

1. 首次加载很慢，有一首次加载的时候服务器会一次性将所有程序代码、资源发送给前台，这意味着需要传输很多东西，这也就代表着用户首次打开需要等待一会，直至所有资源发送完毕；
2. 安全性，这个为什么会被单独说到，其实也是因为所有代码和界面都已经被存储在前台，很多时候用户是有角色标识的，前端路由会导致所有的界面其实都是可以被获取到的，只是说这些代码你由于打包的关系无法被分辨识别而已；
3. 不容易被SEO，这个可能会很奇怪，怎么说呢，就是单页应用由于在一个页面里完全承载了所有的操作界面，用着是快，但是对爬虫来说非常不友好，这也就导致了百度啊这些搜索引擎对你的网站收录的信息不够多…直接导致了用户在百度里搜到的概率较低，当然，这种不是没有解决方案，只是说在这一领域天生比后端路由来的吃亏；

小程序的路由系统

终于回到主题了，小程序的路由系统，用官方的原话就是：在小程序中所有页面的路由全部由框架进行管理，具体官网地址在这里：微信小程序的页面路由，有兴趣的小伙伴可以看看；

什么意思呢，就是说，小程序的路由系统官方给我们做好了，照着官网的示例跟着用就行了，大概就是这个意思；

API

官方提供的API，一共有几个，如下

基础用法

由于篇幅的关系，这一章节就简单的说一下怎么使用吧，具体的下一章节我们在详细介绍，以wx.navigateTo为例，就是当某个事件，比如点击事件触发改了该方法而已

<view bindtap="bindViewTap" >点击我</view>
1

//index.js
Page({
  data: {

  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {},
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上方代码为例，我们给一个view标签绑定了一个点击事件，当我们点击“点击我”这个区域时，会触发bindViewTap这个函数，这个函数执行了navigateTo这个路由跳转的API，API会直接将小程序的页面跳转至logs这个页面，挺简单的吧；

小结

通过本文知道了什么是路由系统，并且我们知道了路由系统分为前端路由和后端路由，同时我们也知道了前端路由的优点和缺点，最后我们由于篇幅原因简单的说了一下小程序的路由系统，并且简单的描述了一下用法；
下一篇将重点介绍小程序中的各个API是怎么使用的，同时路由跳转该如何携带参数等等；