webApp介绍webApp介绍

1 webApp介绍

app:(native):指的是原生态APP，直接运行在操作系统上运用。

主流的移动端操作系统：

Andriod:JAVA、eclipse；苹果电脑或者windows

iOS：object-c(OC)、swift、xcode；苹果电脑

webApp：用HTML5 编写的移动web运用，依赖于浏览器（微信浏览器。QQ浏览器）。可以不加修改直接运行在Andriod/ios/pc端

优势：一套代码（Andriod，iOS,PC）到处运行

劣势：运行速度不如native app，某些底层功能缺失

微信浏览器(iOS)：UIWebView,WXWebView

 

2像素基础

（1）物理像素（physical pixel）

一个物理像素就是显示器（手机屏幕）上的最小物理单元。在操作系统上（OS）的调度上，每一个物理像素都有自己的颜色值和亮度值。

（2）设备独立像素（density-independentpixel）又称为css像素或者逻辑像素。他是浏览器使用的抽象单位，主要用来在网页上绘制内容。也就是css px 是专门为web开发者提出的一个抽象概念，也就是我们平时写的css的样式相关。也和分辨率（720*1280px）没有半毛钱关系

（3）设备像素化

设备像素比= 物理像素/设备独立像素

通过属性devicePixelRatio可以拿到像素比

window.devicePixelRatio

一般在PC端，设备像素比值是1

一般在手机端，设备像素比值是2

结论：

pc端的设计图，你量到多少，css就写多少

手机端，你量到多少，css就写一半，如果你的宽是640px ,代码里写320px

一般情况下，美工提供的效果图是640*XX（iphone5）或者750*XX（iphone6）

代码里面对应就是320px或者375px

了解：用户统计（Umengo ,腾讯统计）

3 viewport

viewPort 就是设备的屏幕用来显示我们的网页那一块区域。说白了就是，浏览器用来显示网页内容的那部分区域。

viewport不限于浏览器可视区域的大小。一般情况下，移动端的viewport都要大于浏览器的可视区域。一般情况下viewport的宽度是980px或者是1024px

获取viewport的宽度

var width = document.documentElement.clientWidth;

正是因为viewport的宽度比屏幕大，当页面内容比较多，宽度比较大的时候，需要左右滚动，上下滚动才能看完所有的信息，这个交互很不友好

JDK --)环境变量--）Tomcat8.0

CDN相关知识点

文件（静态文件）存储：七牛，oss

安装：（1）将项目移动到Tomcat下面的webApps下面-->用webstorm打开webApps下的该项目。-->双击bin/startup

 

（2）查看电脑win+R -->输入cmd --> 出现黑框框-->输入ipconfig-->查看IPV4关键字，后面的XX.XX.XX.XX

 

（3）如果没有修改Tomcat的任何配置，XX.XX.XX.XX:8080（localhost：8080）就是对应Tomcat下面的webApp的路径。

例如：webApps/wkzc/index.html 有这个文件，我想访问这个index.html，只需要写XX.XX.XX.XX：8080（localhost）/wkzc/index.html

 

接口文档：接口文档并不是一定由后台开发人员提供的，也可以有前段开发人员提供的，后台研究人员根据文档提供服务

书写接口文档软件：macdown

草料二维码Chrome插件（需要五Chrome store 市场下载，但是有墙需要注意，想办法在百度上找到）

display table布局

iconfont的使用

MVC的使用