5.7 H5-下篇 · StuQ《Node.js微信開發》

# 第三周：h5和weui實踐 ## h5基礎 ### viewport ~~~ <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](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的圖片。來個例子 ~~~ <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>利用media query讓背景圖適應不同分辨率的設備</title> <style> /* 像素比為1，鏈入100px的圖片， background-size：100% */ .header { background: url(Logo_1.png) no-repeat; } /*像素比為1.5，鏈入150px的圖片， background-size：1/1.5=66.7% */ @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) { .header { background: url(Logo_1-5.png) no-repeat; background-size:66.7%; } } /*像素比為2，鏈入200px的圖片， background-size：1/2=50% */ @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) { .header { background: url(Logo_2-0.png) no-repeat; background-size: 50%;} } .w100{width:100px;height:100px;} </style> </head> <body></body> </html> ~~~ 我其實還想告訴更簡單的辦法：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