By

移动的类库

code block:

swiper.js

1.下载swiper.js，
2.其中文网站非常详细介绍了其使用方法

swipe.js

1.下载swipe.js
2.html结构要求有三层结构，

注意结构的要求还有对应的CSS样式

fastclick.js

在移动设备上为了提升click的响应速度，我们选择了使用Zepto事件封装的tap来进行模拟，但是这会带来一个副作用，这个副作用就是“点透”，(自行查阅)
从上可以看出Zepto.js有不完善的地方，并且我们有时也希望我们的移动版页面在PC端上也可用，但是PC端是不支持touch事件的，这时我们面临的问题是即提升click在移动设备上的响应速度，又不能使用Zepto.js的tap事件，这时fastclick可以解决这个问题。

  1. 下载fastclick
  2. 引入lib目录下的fastclick.js
  3. 设用方法即可，
1
2
3
4
5
6
7
8
9
10
$('.demo').on('click', function () {
        alert('不会得到快速响应');
    });
    // 引入引插件可以解决click延时问题
    // 代表的含义是body元素以内所有被添加了
    // click事件元素，都会得到快速响应
    // FastClick.attach(document.body);
    // 代表的含义是只有在.box元素以内的click事件
    // 会得到一个快速响应
    FastClick.attach(document.querySelector('.box'));

isSroll.js

一个可以实现客户端原生滚动效果的类库。

1.下载iScroll
2.build目录下提供了不同版本的iScroll，可根据情况选择使用
3.html要求有3层结构

注意：下载下来会有文档，直接查看文档就可以了

By

css预处理器–less

介绍

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，并且你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更简洁，适应性更强，代码更直观等诸多好处。
常见的CSS预处理器有：LESS、SASS、Stylus等
其使用方法大致相同，我们在这里以LESS为例进行学习

less

安装

  1. 安装Nodejs环境 Node Package Manager (验证 node -v npm -v)
  2. 打开控制台（cmd），执行npm install -g less (验证 lessc -v)
  3. 执行 npm install -g less-plugin-clean-css
  4. 命令行编译 lessc path/xxx.less path/xxx.css

编译

一般都会借助于编辑器插件来完成编译任务，以sublime_text为例

  1. ctrl+shit+p打开命令面板
  2. 输入install package然后回车
  3. 安装 LESS、lessc、Less2Css三个插件
  4. alt+s快捷键即可实现编译

语法

  1. 变量

格式：@变量名: 值，定义完成后可以重复使用
code block:

1
2
3
4
5
6
7
@color: red;//可以重复的使用
    .nav{
        backgroundColor:@color;
    }
    .header{
        background:@color;
    }

  1. 混合编程

我们可以像使用函数一样来使用CSS、

1
2
3
4
5
.box-sizing(){
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

1
2
3
.box{
    .box-sizing;//调用函数；
}
  1. 嵌套可以非常方便的管理我们的CSS层级关系
1
2
3
4
5
6
.header{
    color:red;
    .nav{
        .....
    }
}

浏览器中使用

我们可以引入一个less.js文件，实现实时的解析，而不必每次修改都要编译，最后完成所有开发任务后，再通过编辑器编译成css文件。

  1. 下载 然后引入less.js
  2. 引入xx.less文件，如：
    1
    <link rel="stylesheet/less" type="text/css" href="styles.less" />

注意：rel属性必须指定成stylesheet/less，并且styles.less要先于less.js引入。
必须以服务器方式访问，可以放到study目录下，或者webstrom自带服务器功能，或者我们的 ghostlab调试工具的服务器。

By

调试工具

code block:

  1. 模拟测试
    现代主流浏览器均支持移动开发模拟调试，通常按F12可以调起，其使用也比较简单，可以帮我们方便快捷定位问题。
  2. 测试工具
    模拟调试可以满足大部分的开发调试任务，但是由于移动设备种类繁多，环境也十分复杂模拟调试容易出现差错，所以真机调试变的非常必要。

有两种方法可以实现真机调试：

  • 将做好的网页上传至服务器或者本地搭建服务器，然后移动设备通过网络来访问。
  • 借助第三方的调试工具，如weinre、debuggap、ghostlab等
    真机调试必须保证移动设备同服务器间的网络是相通的。

这个就是直接打开ghostlab然后扫码就可以了，，只要你用的是那个软件就看的懂这句话

By

手机触屏的事件

code block:

事件驱动着页面的变化

事件的类型

1.touchstart: 手指触摸屏幕时触发
2.touchmove: 手指在屏幕上移动时触发
3.touchend: 手指离开屏幕时触发

事件的对象

  • touches: 位于屏幕上的所有手指的列表
  • targetTouches: 位于该元素上的所有手指的列表
  • changedTouches：touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点
    注：没有对比出touches同targetTouches的差异，推荐使用targetTouches

touch 的对象

  • clientX/Y手指相对 layout viewport的水平/垂直像素距离
  • pageX/Y手指相对于layout viewport的水平/垂直像素距离（包含滚动）
  • screenX/Y手指相对于layout viewport的水平/垂直像素距离（包含滚动）

target手指最初与屏幕接触时的元素
移动开发通常会设置，这时这三对坐标值是完全一样的。

click延时

早期移动设备浏览器网页时内容非常小，为了增强用户体验，苹果公司专门为移动设备设计了双击放大的功能，确保用户可以非常方便的放大网页内容，但是当用户单击一个按钮时，移动设备会延时（约300ms）执行，判断是单击还是双击。用触屏事件可以解决这个问题。

手势的分装 –zepto.js

手机上的jq

zeptojs为我们封装了常的触屏事件，需要touch模块支持，默认没有构建此模，我们可以自定义构建。
1.安装Nodejs环境
2.下载zepto.js
3.解压缩
4.cmd命令行进入解压缩后的目录
5.执行npm install 命令
这个make是在我们的这个源代码的目录下的一个文件。
6.编辑make文件，添加自定义模块（只要把我们想要的这个模块名字加进去就可以了）并保存

1
modules = (env['MODULES']||'zepto event ajax form ').split(' ')

7.然后执行命令 npm run-script dist
这个时候在我们的这个源码的目录之下就会出现一个目录这个目录就是dist.
8查看目录dist即构建好的zepto.js
注：关于命令行的使用
cd 切换目录
dir 查看当前目录
e: 切换到e盘
f: 切换到f盘
先切换盘符再使用cd目录