5.6 H5-上篇

# 第三周：h5和weui实践 ## h5基础 ### viewport ~~~ ~~~ 这个必须设置，viewport翻译过来叫适口，它指定了h5页面的宽度和手机的宽度一样，而且初始化没有放大，是按1：1显示的。 ### 事件：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](http://www.w3.org/TR/css3-mediaqueries/#media1) CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。 比较有名是bootstrap和foundation * [http://getbootstrap.com/](http://getbootstrap.com/) * [http://foundation.zurb.com/](http://foundation.zurb.com/) Bootstrap支持的Media Query分类5种 * 大屏幕 大于或等于1200px 70px 30px 默认 大于或等于980px 60px 20px * 平板电脑 大于或等于768px 42px 20px * 手机到平板电脑 小于或等于767px 流式列，无固定宽度 * 手机 小于或等于480px 流式列，无固定宽度 具体样式结构如下： ~~~ /* 大屏幕 */ @media (min-width: 1200px) { } /* 平板电脑和小屏电脑之间的分辨率 */ @media (min-width: 768px) and (max-width: 979px) { } /* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */ @media (max-width: 767px) { } /* 横向放置的手机及分辨率更小的设备 */ @media (max-width: 480px) { } ~~~ ### 图片处理(高清屏下图片处理) device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。 事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。 来个例子 ~~~ ~~~ 我其实还想告诉更简单的办法：layzr.js [https://github.com/callmecavs/layzr.js](https://github.com/callmecavs/layzr.js) ### ajax + pushstate pushstate说的简单点就是页面不动，就可以改变url，好神奇的 原生控件里的navigation的推进，推出效果，可以借助ajax + pushstate来实现 最经典的例子是：[http://i5ting.github.io/ratchet-practice/#106](http://i5ting.github.io/ratchet-practice/#106) weui里的也不错 ### 本地缓存 查看storage在浏览器中的支持情况 [http://html5test.com/compare/feature/storage-localStorage/storage-sqlDatabase/storage-indexedDB.basic.html](http://html5test.com/compare/feature/storage-localStorage/storage-sqlDatabase/storage-indexedDB.basic.html) * 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，其他都支持 3. iOS 8.0 » 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](https://github.com/i5ting/Collection.js) ### 浏览器特性监测工具库 Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. [http://modernizr.com](http://modernizr.com/) 代码 [https://github.com/Modernizr/Modernizr](https://github.com/Modernizr/Modernizr) ### html5 boilerplate 最流行的web开发前端模版 HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。 ### 著名的h5开发框架 * jQuery Mobile * Sencha Touch 都比较重 * jqm的css样式比较难写，特点是data属性标签 * st主要是oo，控件丰富，js基础要比较好的才能写，门槛很高 不过一般都没必要用，除非项目非常大，比如微信的项目随便写写就好了 ## h5调试方法 ## 常见h5库 ### zeptojs 使用更小更轻量级的库 比如jquery要换成zeptojs。包括像jquery mobile也是建议用zeptojs 常用的网站优化技巧，能上的必须上。 [http://zeptojs.com/](http://zeptojs.com/) ### 手势库 * Pan * Pinch * Press * Rotate * Swipe * Tap [https://github.com/hammerjs/hammer.js](https://github.com/hammerjs/hammer.js) 其实zeptojs里也有很多，不过没有hammer.js全而已 ### 拖拽库 Drag and drop so simple it hurts [https://github.com/bevacqua/dragula](https://github.com/bevacqua/dragula) ### 滑动组件 最出名的iscroll，跟原生效果差不多，支持下拉刷新之类的，代码比较难懂，还是挺有意思的。 swiper 实际也是基于iscroll封装通用库，现在微信里比较常见的效果，大部分都是这东西搞出来的。 示例：[http://www.swiper.com.cn/demo/senior/index.html](http://www.swiper.com.cn/demo/senior/index.html) ### css动画框架 2w多个star的项目，各种效果相当不错 [http://daneden.github.io/animate.css/](http://daneden.github.io/animate.css/) 代码：[https://github.com/daneden/animate.css](https://github.com/daneden/animate.css) ### 弹出框alert 比较好的是 layer.mobile [http://sentsin.com/layui/layer/](http://sentsin.com/layui/layer/) ### actionsheet ### 快速原型h5框架 ratchet 是twitter那帮人写的快速原型框架，很简单 [http://cnratchet.com/components](http://cnratchet.com/components) 我写的实践总结 [https://github.com/i5ting/ratchet-practice](https://github.com/i5ting/ratchet-practice) ### ionicframework ionic是目前最方便的hybrid框架 官网：ionicframework.com 教程：[https://github.com/i5ting/ionic_ninja](https://github.com/i5ting/ionic_ninja) 技术栈 phonegap（打包，插件） angular（最流行的前端框架，ioc，双向绑定，指令等） gulp 支持cli命令行工具 cnode有一个客户端就是ionic写的，代码还可以 ### 下一个趋势：必然是基于react的 基于react的控件库 [http://reapp.io](http://reapp.io/) reapp其实就ionic里把angularjs替换成reactjs而已，其他基本一样。 ## weui ## 实例：实现课程详情页面 使用weui + iscroll + zepto + fastclick