# 第三周: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
- 前言
- 1 skill
- 1.1 Coding WebIDE
- 1.2 git
- 1.3 extra practice
- 1.4 預習
- 2 nodejs入門
- 2.1 入門
- 2.2 安裝
- 2.3 helloworld
- 2.4 commonJS規范
- 2.5 模塊導出
- 2.6 Nodejs代碼調試
- 2.7 編寫Nodejs模塊
- 2.8 最小化問題
- 2.9 隨堂練習
- 3 異步流程控制
- 3.1 什么時候會用到異步流程控制
- 3.2 簡單做法async模塊
- 3.3 Promise/a+規范
- 3.4 Node.js Promise/a+實現
- 3.5 生成器Generators/yield
- 3.6 Async函數/Await
- 3.7 神奇的co
- 3.8 5種 yieldable
- 3.9 學習重點
- 3.10 隨堂練習
- 4 express和微信開發入門
- 4.1 入門
- 4.2 connect
- 4.3 靜態Http服務器
- 4.4 那些預處理器
- 4.5 路由
- 4.6 視圖與模塊引擎
- 4.7 中間件
- 4.8 更多實踐
- 4.9 微信入門
- 4.10 隨堂練習:完成登錄、注冊功能
- 5 微信實例與H5實踐
- 5.1 微信基礎和sandbox
- 5.2 公眾號菜單和自動回復
- 5.3 微信OAuth用戶授權
- 5.4 微信分享
- 5.5 wechat-api
- 5.6 H5-上篇
- 5.7 H5-下篇
- 5.8 隨堂練習
- 6 weui實戰
- 6.1 使用bower
- 6.2 移動端抽象
- 6.3 優化滑動列表
- 6.4 weui
- 6.5 讓weui和iscroll結婚
- 6.6 優化事件
- 6.7 how-to-write-h5
- 6.8 優化無止境
- 6.9 隨堂練習
- 7 微信支付
- 7.1 吹個牛
- 7.2 支付概述
- 7.3 科普幾個概念
- 7.4 準備
- 7.5 調試
- 7.6 公眾號支付(JSAPI)
- 7.7 對賬單
- 7.8 數據處理
- 7.9 隨堂練習
- 8 項目實戰《付費課程系統MVP》
- 8.1 需求分析
- 8.2 ui/ue
- 8.3 技術棧
- 8.4 模型
- 8.5 靜態api
- 8.6 開發
- 8.7 部署
- 8.8 監控
- 8.9 數據統計
- 8.10 demo
- 9 高級篇
- 9.1 前后端分離實踐?
- 9.2 如何展望未來的大前端
- 9.3 容器和微服務
- 10 答疑問題收集