第三周：h5和weui实践

    事件：touch和click的区别

    在web里只有click，而移动端既有click又有touch，所以问题就来了

    我怎么样区分它们呢？

    三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

    1. touchstart ：手指放在一个DOM元素上。
    2. touchmove ：手指拖曳一个DOM元素。
    3. touchend ：手指从一个DOM元素上移开。

    其实还有一个touchcancel

    其实click也是touch，不过先识别一下，如果是touch就是touch，如果不是touch就当click处理。

    结论肯定是touch反应比click快，所以移动的有一个比较好的实践

    1. 使用zeptojs的tap的手势
    2. 使用fastclick库

    通过CSS3 Media Query实现响应式Web设计

    http://www.w3.org/TR/css3-mediaqueries/#media1

    CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。

    比较有名是bootstrap和foundation

    Bootstrap支持的Media Query分类5种

    • 大屏幕 大于或等于1200px 70px 30px 默认 大于或等于980px 60px 20px
    • 平板电脑 大于或等于768px 42px 20px
    • 手机到平板电脑 小于或等于767px 流式列，无固定宽度
    • 手机 小于或等于480px 流式列，无固定宽度

    具体样式结构如下：

    图片处理(高清屏下图片处理)

    device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。

    事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px100px，当像素比为1.5时，载入150px150px的图片，当像素比为2.0，载入200px*200px的图片。

    来个例子

    我其实还想告诉更简单的办法：layzr.js

    https://github.com/callmecavs/layzr.js

    ajax + pushstate

    pushstate说的简单点就是页面不动，就可以改变url，好神奇的

    原生控件里的navigation的推进，推出效果，可以借助ajax + pushstate来实现

    最经典的例子是：http://i5ting.github.io/ratchet-practice/#106

    weui里的也不错

    本地缓存

    • localstorage（key-value存储）
    • websql（sqlite）
    • indexdb（NoSQL）

    分析上面的结果

    android平台

    1. Android 1.6 » 都不支持
    2. Android 2.x » 不支持indexdb，其他都支持
    3. Android 3.2 » 不支持indexdb，其他都支持
    4. Android 4.0 » 支持localstorage，但不支持其他2种
    5. Android 4.0+ » 都支持

    iOS平台

    1. iOS 2.2 » 支持websql，其他都不支持
    2. iOS 3.1 — iOS 7.0 » 不支持indexdb，其他都支持

    Windows Phone 平台

    1. Windows Phone 7 » 都不支持
    2. Windows Phone 7.5 » 只是支持localstorage
    3. Windows Phone 8 » 只是不支持websql
    4. Windows Phone 8.1 »只是不支持websql

    总结

    • 绝大部分都支持localstorage，不支持localstorage的如
      • ios2.2，可以选websql，
      • Android 4.0 » 只能用localstorage
      • Windows Phone 7，没有任何选择
    • 支持第二好的是websql
    • 支持最差的是indexdb

    所以我们的解决方案是

    1. 如果有indexdb就用indexdb
    2. 若果有websql就用websql
    3. 什么都没有的时候，使用localstorage存，近于万能

    更多看一下我写的缓存层通用的库
    https://github.com/i5ting/Collection.js

    Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

    代码

    https://github.com/Modernizr/Modernizr

    html5 boilerplate

    最流行的web开发前端模版

    HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。

    著名的h5开发框架

    • jQuery Mobile
    • Sencha Touch

    都比较重

    • jqm的css样式比较难写，特点是data属性标签
    • st主要是oo，控件丰富，js基础要比较好的才能写，门槛很高

    不过一般都没必要用，除非项目非常大，比如微信的项目随便写写就好了

    zeptojs

    使用更小更轻量级的库

    比如jquery要换成zeptojs。包括像jquery mobile也是建议用zeptojs
    常用的网站优化技巧，能上的必须上。

    http://zeptojs.com/

    手势库

    • Pan
    • Pinch
    • Press
    • Rotate
    • Swipe

    https://github.com/hammerjs/hammer.js

    其实zeptojs里也有很多，不过没有hammer.js全而已

    拖拽库

    最出名的iscroll，跟原生效果差不多，支持下拉刷新之类的，代码比较难懂，还是挺有意思的。

    swiper 实际也是基于iscroll封装通用库，现在微信里比较常见的效果，大部分都是这东西搞出来的。

    示例：http://www.swiper.com.cn/demo/senior/index.html

    css动画框架

    2w多个star的项目，各种效果相当不错

    http://daneden.github.io/animate.css/

    代码：

    弹出框alert

    比较好的是 layer.mobile

    actionsheet

    快速原型h5框架

    ratchet 是twitter那帮人写的快速原型框架，很简单

    http://cnratchet.com/components

    我写的实践总结

    ionicframework

    ionic是目前最方便的hybrid框架

    官网：ionicframework.com

    教程：

    技术栈

    phonegap（打包，插件）
    angular（最流行的前端框架，ioc，双向绑定，指令等）
    gulp
    支持cli命令行工具

    cnode有一个客户端就是ionic写的，代码还可以

    基于react的控件库

    http://reapp.io

    使用weui + iscroll + zepto + fastclick