作为一个使用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

Logo

前往低代码交流专区

更多推荐