萝三画室

商品房网签平台-总结Part1(HTML)

发表于

最近完成了一个小项目的演示DEMO，用于商品房网上签约。平台设计两种用户角色：开发商和房地产管理部门。对于开发商用户，提供合同模板的增删改查；合同的增删改查、提交、打印；合同状态查询统计、单个楼盘统计表、用户管理功能。对于房地产管理部门，提供合同状态查询统计、合同审批、用户管理功能。项目前端采用vue + vuex + vue router + vue resource + elementUI + Less,后端采用C#调用WebService提供数据服务（内网服务）。

这一系列总结主要想整理的是，在项目过程中使用的新方法、思路、以及遇到的坑，包括HTML5、CSS、ES6、VUE四个部分。本篇是商品房网签平台项目总结的Part1-HTML，讲的是在做移动端适配时遇到的屏幕尺寸问题，以及HTML5新增的本地存储。
全部项目请戳->>>>> https://github.com/honey3go/realEstate

HTML — viewport

问题

做这个项目刚开始做移动端适配的时候就遇到了问题：明明做了媒体查询，但是页面还是没有按照期待的一样刚好填充整个屏幕，而是实际尺寸比屏幕尺寸宽了不少。后来发现，我是没搞清楚移动端的viewport概念。默认的移动端viewport宽度并不等于屏幕的宽度，通常都比屏幕宽度宽。我们来看下面这张图：
hh
布局viewport就是默认viewport，媒体查询中的宽度属性也指的是布局viewport的宽度。因此，我们的网页填充的就是这个区域，而他的宽度可能远大于屏幕宽度（此处可以简单这么理解，欲知原理，请看下一小节）。此时我们只能在可见viewport范围内看到布局viewport的一部分内容，其他部分需要横向滑动屏幕才能看到。这显然是很差的用户体验，我们的理想viewport是等于可见viewport的，这时没有横向滚动轴，用户不需要横向滑动屏幕直接可以在浏览到全部内容。

解决方法

那么如何让布局viewport的宽度=可见viewport的宽度即屏幕宽度呢？
在HTML的head标签中加入：

1
<meta name="viewport" content="width=device-width, initial-scale=1" />

它的作用是将当前的布局viewport宽度设置为屏幕宽度。其中“width=device-width”和”initial-scale=1”的作用是一样的，只是单一方法不能兼容所有浏览器的情况，两种方法配合可以完美实现。

所以到底为啥布局viewport！== 屏幕宽度？这里是原因

这里其实是物理像素和逻辑像素的问题了。

物理像素是屏幕能分辨的最小单元格，它是屏幕固有的硬件能力。同样的尺寸的屏幕，它的物理像素可能是不一致的。像素越多，显示的细节越精细，显示效果越清晰。
逻辑像素是与物理像素无关的，一个逻辑像素在任意设备屏幕上都占据相同的空间。也就是说，不同的手机，如果逻辑像素一致，那么他们的屏幕尺寸也是一致的。

可以粗暴的理解为，逻辑像素决定了屏幕尺寸大小，物理像素决定了屏幕的清晰度。这就可以理解为啥我们去商场看电视或者手机的时候，会发现同样大小的设备，清晰度会不一样了。比方说对于两个逻辑像素都是300x600的手机，一个物理像素也是300x600，一个物理像素是600x1200，那么肯定是后者清晰，因为后者相当于一个逻辑像素中包含了4个物理像素。

那么我们回头来看viewport。默认情况下，viewport的宽度是基于物理像素的宽度，也就是上面的600x1200。我们通过加入meta标签，其实就是将viewport的宽度重新定义为基于逻辑像素的宽度。

so, that’s all~

web本地存储

背景

这个项目是个单页应用，涉及到很多路由跳转的情况。项目中我们使用了带参的路由跳转并且隐藏参数，也使用了Vuex管理多个组件共享的状态。后来遇到的一个情况是多个嵌套路由传值，这样通过带参路由跳转和props显得啰嗦，Vuex又没有必要，于是我就想到了尝试使用web本地存储来传参。

web storage

HTML5新增的两种本地存储方式：localStorage 和 sessionStorage。

他们都可以将数据保存在本地，区别只是在于localStorage存储没有时间限制，sessionStorage存储基于会话，会话关闭（在浏览器中关闭窗口）的时候数据自动删除。

常用方法

localStorage和sessionStorage的方法相同，都是炒鸡简单：

  • 保存数据：localStorage.setItem(key,value);
  • 读取数据：localStorage.getItem(key);
  • 删除单个数据：localStorage.removeItem(key);
  • 删除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);

注意：存储对象的时候需要将对象转化成字符串

在web storage出现以前，本地存储使用的是cookie。但是这里就有几个问题了：

  1. cookie有长度、数量、时间、跨域限制
  2. cookie会传给服务器，而一些本地存储的数据通常是不需要与服务器交互的，这就造成了浪费并且可能影响网站性能

私认为web storage的出现就是为了解决这个问题。有了web storage，我们可以把需要跟服务器通讯的数据保存到cookie，如用户输入的用户名和密码等；不需要与服务器通讯的数据利用web storage存储，让他们各司其职。