单页面应用和多页面应用

作为一个使用uniapp开发的，我简单的使用uniapp应用谈一谈自己对单页面应用和多页面应用的理解。

1、单页面应用

以一个简单的uniapp应用（没有使用hybrid）为例，它只有一个html页面。

打包后，其他的vue、nvue页面都会转成css文件和js文件。

运行时，首先会加载所有的css、js文件，所以首次加载速度会有点慢，之后的页面切换仅是一种append/remove的增删或者show/hide的显隐控制，因此页面切换速度快、页面间切换流畅。

除此之外，页面之间数据传递方便、转场动画可以很炫酷，组件式开发可复用性高、代码冗余少。

但是，不利于搜索引擎优化（SEO），因为百度等搜索引擎在页面排名的时候，要根据页面的内容才能给网页权重进行网页排名。搜索引擎是可以识别html内容的，但是无法识别js文件，因此不利于搜索引擎优化。但是据说这个问题可以从服务器端解决，咱也不是很清楚。

这个简单的uniapp应用就是一个单页面应用。

2、多页面应用

以一个复杂点的的uniapp应用（使用了hybrid）为例，它除了上面描述的一个html页面之外，

在hybrid文件夹下，可以自定义多个html页面，虽然这个html页面也可以使用vue、elementUI啊，但必须自行封装在以.html后缀结束的html页面中。

一个直观的感受就是，观察本地打包后的文件包，hybrid下的html文件打包出来后仍旧是html文件，vue页面都是js文件。

在没有切换到hybrid文件夹下的html页面时，里面的html页面并不会渲染，其中的css文件和js文件也不会加载。当切换到时，才会开始加载，因此，html页面之间的切换，如果加载的文件较大/多，页面切换加载会很慢，这段空白的渲染时间，通常放一个loading来增加与用户的交互。

html页面之间的数据传递，通常有2中方法：

一是url传参，即将参数拼接在url上传递；

二是本地存储，像localstorage、cookie等。localStorage：5M或者更大，永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除或者js代码清除，因此用作持久数据，不参与和服务器的通信。cookie：一个大小不超过4K的小型文本数据，一般由服务器生成，可以设置失效时间，若设置了失效时间，cookie就会存放在硬盘里，过期才失效，若没有设置时间，关闭浏览器cookie失效，每次http请求，header都携带cookie。

简单的理解，单页面应用就是只有一个html页面的应用；多页面应用就是有多个html页面的应用。

个人见解，欢迎指正！

有点误人子弟的感觉，有一篇我觉得很好的文章：

什么是单页面应用（SPA）和多页面应用（MPA）_hanruikai的博客-CSDN博客_什么是多页面应用背景最初我们的应用都是多页面应用，多页面应用就是每次客户单请求都返回一个新的页面。在互联网初期，这个问题并没有带来很差的用户体验，但是随着移动互联网的发展以及用户的体验，开发者开始考虑，为什么我们每次只更改了页面的一部分数据，却要更新整个页面呢？所有的反思促使了技术的进步。我们是不是可以第一次加载全部的页面内容，以后的更新，仅仅更新变化的数据，答案是可以的，这就是单页面应用SPA。下图是总体上比较单页面应用和多页面应用的流程：从上图可以看到：多页面应用:每次请求服务端都.https://blog.csdn.net/hanruikai/article/details/112232592?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_title~default-0-112232592-blog-124856182.pc_relevant_default&spm=1001.2101.3001.4242.1&utm_relevant_index=3