WEBAPP开发教程webApp开发-职坐标

WEBAPP开发教程webApp开发

凌雪 2018-11-08 来源：网络阅读 1275 评论 0

摘要：本文将带你了解WEBAPP开发教程webApp开发，希望本文对大家学WEBAPP有所帮助。

本文将带你了解WEBAPP开发教程webApp开发，希望本文对大家学WEBAPP有所帮助。

1 webApp介绍

App（native原生态的）：指的是原生态app直接运行在操作系统上运行。
主流的移动端操作系统：
Andriod：Java eclipse
iOS：object-c（oc）、swift：xcode：苹果电脑
webApp：用HTML5编写的移动web运用，依赖于浏览器（微信浏览器、qq浏览器），可以不加修改，直接运行在Android、iOS、pc端。
优势：一套代码到处运行（跨平台运行，兼容性）
劣势：运行速度不如native App ，某些底层功能缺失。
微信浏览器（iOS）：UIWebView   WXWebview
2像素基础
1)物理像素（physical pixel）
一个物理像素就是显示器上的最小物理显示单元。在操作系统（os）的调度下，每一个物理像素都有自己的颜色值和亮度值。
2）设备独立像素（density-independent pixel）又称为css像素或者逻辑像素。他是浏览器使用的抽象单位，主要用来在网页上绘制内容，也就是css px是专门为web开发者提出的一个抽象概念，也就是我们平时写的css 的样式相关。也分辩率（720*1280px）没有关系。
3）设备像素比（简称dpr）
      设备像素比=物理像素/设备独立像素
一般在pc端，设备像素比值是1
一般在移动端，设备像素比值是2
结论：美工设计图 pc端的设计图，你量到多少，css就写多少
手机端，你量到多少，css写一半，比如你宽度是640 代码就写320px
一般情况下，美工提供的效果图是640px*xx（iPhone5）或者750px*xx（iphone6）
代码里面对应就是320px或者375px。
用户统计（umeng，腾讯统计）
通过window.devicePixelRatio来获取设备像素比

3 viewport
Viewport（视口）就是设备的屏幕上用来显示我们的网页的哪一块区域，也就是浏览器用来显示网页内容的那部分区域。
Viewport不限于浏览器可视区域的大小。一般情况下，移动端viewport都大于浏览器的可视区域。一般情况下viewport的宽度是980px或者1024px
获取viewport的宽度：document.documentElement.clientWidth；
开发环境：
jdk
Tomcat 8.0
Cdn：
文件（静态文件）存储：七牛、OSS
1）将项目移动到tonmcat下面webapps下面——》用webstorm打开webapps下面该项目。--》点击bin/startup.bat启动Tomcat
2）查看电脑ip win+r
—》输入cmd
——>出现命令框——》输入ipconfig》查看ipv4关键字，后面的ip
3）、如果有没修改tomcar的任何配置，（//localhost:8080）就是对应Tomcat下面的webapps的路径。

正是因为viewport的宽度比屏幕的宽度大，当页面内容比较多，宽度比较大的时候，需要左右滚动，上下滚动才能看完所有的信息，这个交互很不友好的，
4 meta
我们可以通过meta标签，对viewport进行控制
一般我们的设置之后想要的效果
1）viewport的宽度==屏幕的宽度
2）同时不允许用户手动缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

属性名称

作用

width

设置viewport的宽度device-width

initial-scale

初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale

允许用户缩放到的最大比例。

minimum-scale

允许用户缩放到的最小比例。

height

一般不设置。

5 rem
Rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
Rem的特点：
默认情况lrem==16px当然，这和浏览器默认字体相关。（坑：cheome最小字体是12px）。
设定了HTML标签的font-size，1rem对应的值自动变化。1rem==font-size的值。
Rem的使用：
动态设置html元素的font-size，即可实现一个元素(div,p//)高度、宽度、字体等动态变化。
2）动态设置html元素font-size的方法：css媒体查询、js；
3）测试效果图得到的是xxpx，我们需要装换成rem
     代码里写具体的px，然后将代码上次到指定网点//www.520ued.com/tools/rem
Sass函数
@function pxToRem($px) { @return $px /23.4 * 1rem; }

6 Flex
一、Flex布局是什么？
在之前我们的布局方式：dipayl+position+float，这种方式布局基本可以解决所有的布局，但是，对于一些特殊布局实现起来却不容易，比如垂直方向居中。
Flex的弹性布局，用来为盒子模型提供最大的灵活性。
所有的元素都可以设置为flex布局
注意：如果使用了flex布局，所有的子元素float、clear、vertical-align等属性将失效。

二、容器的属性
只要一个元素设置为flex布局，该元素我们成为flex容器，它所在的所有子元素将成为容器成员，也成为flex项目。
也就是，一个大的div，嵌套这2个小的div，如果大的div设置了flex布局
大的叫容器，小的叫项目。
2.1 flex-direction
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
  flex-direction: row | row-reverse | column | column-reverse;}

它可能有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2.2 flex-wrap
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;}
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row
nowrap。
.box
{
  flex-flow: <flex-direction> ||
<flex-wrap>;}

2.4 justify-content
justify-content属性定义了项目在主轴上的对齐方式。
.box
{
  justify-content: flex-start | flex-end | center | space-between | space-around;}
}

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.5 align-item
align-items属性定义项目在交叉轴上如何对齐。
.box {
  align-items: flex-start | flex-end | center | baseline | stretch;}

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

2.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

三、项目的属性
3.1 order
3.2 flex-grow
3.3 flex-shrink

四、综合小案例
草料二维码chrome插件。
7 touch
一、什么是触摸事件？
触摸事件是移动端浏览器特有的HTML5事件，他和pc的端鼠标类似，同时由于一些事件存在一定的延迟，比如click事件有300毫秒的延迟时，这个延迟很影响用户体验。所有那。Touch事件就出现了，为了解决移动端特有事件。

二、常用触摸事件
注意：触摸事件有很多，但是目前很多事件只有部分浏览器支持，我们只学习几个。
解决click事件延迟

事件名称

描述

touchstart

开始触摸的时候触发，也就是手指放到屏幕的一刻

touchmove

手指开始移动的时候触发，而且是一直触发，。也就意味的

touchend

　Event 对象存在的touch相关属性
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
　　每个Touch对象包含的属性如下。
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触目的DOM节点目标。