单页面应用和多页面应用
作为一个面向uniapp的多端开发人员,我简单的谈一谈自己对单页面应用和多页面应用的理解。1、单页面应用以一个简单的uniapp应用(没有使用hybrid)为例,它只有一个html页面。打包后,其他的vue、nvue页面都会转成css文件和js文件。运行时,首先会加载所有的css、js文件,所以首次加载速度会有点慢,之后的页面切换仅是一种append/remove的增删或者show/hide的显隐
作为一个使用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页面的应用。
个人见解,欢迎指正!
有点误人子弟的感觉,有一篇我觉得很好的文章:
更多推荐
所有评论(0)