第三周:h5和weui实践

h5基础

viewport

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

这个必须设置,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

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

比较有名是bootstrap和foundation

Bootstrap支持的Media Query分类5种

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

具体样式结构如下:

  1. /* 大屏幕 */
  2. @media (min-width: 1200px) {
  3. }
  4. /* 平板电脑和小屏电脑之间的分辨率 */
  5. @media (min-width: 768px) and (max-width: 979px) {
  6. }
  7. /* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
  8. @media (max-width: 767px) {
  9. }
  10. /* 横向放置的手机及分辨率更小的设备 */
  11. @media (max-width: 480px) {
  12. }

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

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

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

来个例子

  1. <html>
  2. <head>
  3. <meta charset="utf-8" />
  4. <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  5. <title>利用media query让背景图适应不同分辨率的设备</title>
  6. <style>
  7. /* 像素比为1,链入100px的图片, background-size:100% */
  8. .header { background: url(Logo_1.png) no-repeat; }
  9. /*像素比为1.5,链入150px的图片, background-size:1/1.5=66.7% */
  10. @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  11. .header { background: url(Logo_1-5.png) no-repeat; background-size:66.7%; }
  12. }
  13. /*像素比为2,链入200px的图片, background-size:1/2=50% */
  14. @media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  15. .header { background: url(Logo_2-0.png) no-repeat; background-size: 50%;}
  16. }
  17. .w100{width:100px;height:100px;}
  18. </style>
  19. </head>
  20. <body></body>
  21. </html>

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

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

ajax + pushstate

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

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

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

weui里的也不错

本地缓存

查看storage在浏览器中的支持情况
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

浏览器特性监测工具库

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

http://modernizr.com

代码

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/

手势库

  • Pan
  • Pinch
  • Press
  • Rotate
  • Swipe
  • Tap

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

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

拖拽库

Drag and drop so simple it hurts https://github.com/bevacqua/dragula

滑动组件

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

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

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

css动画框架

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

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

代码:https://github.com/daneden/animate.css

弹出框alert

比较好的是 layer.mobile

http://sentsin.com/layui/layer/

actionsheet

快速原型h5框架

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

http://cnratchet.com/components

我写的实践总结

https://github.com/i5ting/ratchet-practice

ionicframework

ionic是目前最方便的hybrid框架

官网:ionicframework.com

教程:https://github.com/i5ting/ionic_ninja

技术栈

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

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

下一个趋势:必然是基于react的

基于react的控件库

http://reapp.io

reapp其实就ionic里把angularjs替换成reactjs而已,其他基本一样。

weui

实例:实现课程详情页面

使用weui + iscroll + zepto + fastclick