整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標：實現一個可以安裝在手機上運行的，ui效果很好的app （開飯了）。
前端框架匯總：
框架其實就是優秀的代碼，幫助封裝了工具、類庫等,提高開發速度。
jQuery: js的庫 簡化DOM操作
jQuery UI ： 是一個html組件庫，實現PC端應用
bootStrap： 響應式 pc+移動端 偏向于PC端
angularJS： 是一個實現SPA的js的MVC框架，數據操作比較頻繁
Ionic：h5的實現移動端應用程序的框架，集成了ng、cordova、ui庫、uiRouter
PhoneGap/cordova：通過plugin插件的形式 提供了豐富的js API，實現原生應用程序才能調用的功能（hybridApp）
配對組合：框架之間的定位是否有相同的部分
jQuery+jQueryUI
jQuery+bootStrap
jQuery+ng 不建議
jQuery+Ionic(ng+phoneGap+ui) 不建議
jQueryUI+bootStrap 不建議
jQueryUI+ng
jQueryUI+Ionic 不建議
bootStrap+ng
bootStrap+Ionic 不建議
技術選型
①考慮生態圈
②明確框架的賣點
③根據需求，選擇
④技術是否有定位有很多相似的地方，如果是，建議選其中最好的
ionic (css\ion-list$ionicLoading + uiRouter )
目的：實現移動端的app（開飯啦）
技術構成： ionic
('ui庫->內容'+
'ng->數據'+
'uiRouter->處理路由'+
'打包：部署在服務器')
①完成腳手架的搭建
②模擬數據 把頁面展示出來
③聯調，在前端調用后端的接口進行調試（邊做邊測試）
④部署到生產環境
1、項目的搭建(15:45 - 16:10)
①、創建項目，添加css、js、img、tpl文件夾，添加必須引用的css、js文件，添加自定義的css、js文件以及img圖片，并創建完整的引導頁面kaifanla.html；
②、編寫kaifanla.html文件：
定義模塊ng-app=”kaifanla”
引入ionic.css以及自定義的css文件
定義用于替換模板的視圖
引入ionic_bundle.js文件，并引入自定義的js文件
③、添加模板文件：添加 start/main/detail/order/myorder頁面，每個頁面中刪掉原有內容，添加一個文字；
④、編寫 kaifanla.js 文件
定義各自的控制器
定義路由：為所有模板定義路由，默認跳轉到start
⑥、測試：跳轉是否正常，是否有錯誤
2、所有靜態頁面的編寫---》運行通暢，數據靜態死數據
①start.html （16:25 - 16:40）
1.1 頁面布局
1.2 實現該頁面時，將通過js跳轉的方法封裝在控制器中（所有的代碼片段都可以去用）
②main.html 模擬數據
http://ionicons.com/
可以通過ng-include包含頁頭和頁尾
has-header has-footer --> ion-content
③detail.html 詳情頁
card
(9:45 - 10:10)
④order.html 表單提交頁
⑤myOrder.html 個人中心頁
通過grid 模擬 table 展示數據
每日一練：
完成所有的靜態頁面。
3、調用php頁面，聯調
在進行聯合調試時，如果遇到了問題？
①確認請求的api接口是否正確
②請求服務器端時，確保參數的個數和類型服務要求
③服務器端返回的數據是否正確
④經常去看network(response\header)、console
條件：
①工程在c:\xampp\htdocs
②xampp的apache和mySql跑起來
③測試-》 localhost: / (不要直接在webStorm中打開)
要求：通過service創建一個自定義服務$kflHttp，
①在服務中封裝一個方法sendRequest(url,func),在這個方法中有兩個參數，第一個是要求的地址，第二個參數是請求成功之后要執行的處理函數；
②在sendRequest方法被調用時啟動一個‘正在加載數據’的窗口，當成功的請求到服務器端的數據，關閉加載中的窗口。
①main.html
ng-model
-->
初始化模型數據：$scope.inputTxt={kw:''};
$watch : $scope.$watch('inputTxt.kw',function(){})
方向2的數據綁定： ng-model='inputTxt.kw'
嘗試： ion-infinite-scroll 上拉加載更多
第一步：要將ionInfiniteScroll放到頁面底部
第二步：on-infinite
第三步：$scope.$broadcast('scroll.infiniteScrollComplete');
②detail.html (2:15 - 2:30)
發送： main->a
接受： detail
1、配置detail狀態中的url /detail/:id
2、$stateParams
③order.html（14:50 - 15:20）
接收detail傳遞來的參數:菜品的id
點擊下單，將數據一起發給服務器端，根據服務器返回的結果，將表單隱藏顯示下單結果
序列化：
$HttpParamSerializerJQLike
④myOrder.html
根據手機號 去查找所有的訂單
⑤設置頁面
在點擊設置的時候，有一個設置頁面（顯示一個列表：關于--點擊顯示自定義彈窗，退出登錄--點擊回到起始頁）
自定義彈窗：
①創建一個自定義彈窗
②顯示
注冊邀請：http://t.cn/RqG1Nja
混合編程：
打開eclipse，將模擬器，新建一個Android應用，通過webView的loadUrl
wv.loadUrl('http://172.163.0.1/ionic_kaifanla/kaifanla.html');
方式1：
將前端工程的全部代碼 拷貝到 assets目錄
方式2：
將前端代碼放在服務器，拿到服務器的url地址（不需要拷貝assets）
①確保前端代碼沒問題
②將代碼部署在服務器
③編寫java代碼
//創建WebView類型的一個變量
WebView wv=newWebView(getApplicationCotnext());
//允許執行js
wv.getSettings().setJavaScriptEnabled(true);
//載入指定的頁面
wv.loadUrl("http://172.173.0.100/chaptor4/webApp/kfl_ionic/kaifanla.html#/settings");
//設置內容視圖
setContentView(wv);
添加網絡權限：
上午：
迭代
在之前的基礎上：start main detail order myOrder
加入購物車。
詳情頁：立即下單--》添加到購物車
中間多了購物車的標簽： 跳轉到購物車頁面，購物車支持產品數量的編輯。
一、ZeptoJS概述
http://zeptojs.com/
what？是一個接口和JQuery比較類似的js的庫，它的目標是實現一個10k以內的通用的模塊化的js的庫
注意事項：ZeptoJS只是實現了JQuery一部分的功能，也有自己的和移動端相關的處理。
where？
針對現代高級瀏覽器，在手機端用的比較多
why？
①非常輕量
②有著熟悉的api接口（開發者不需要太高的學習成本）
③非常方便的搭配其他庫去使用
④核心庫的性能比較好，舍棄了低版本的兼容的支持
how？
引入對應的zepto.js文件到工程
在zepto.js中內置：
zepto核心模塊；包含許多方法
event通過on()& off()處理事件
ajaxXMLHttpRequest 和 JSONP 實用功能
form序列化 & 提交web表單
ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。
二、ZeptoJS Core Module
2.1 操作數據的基本方法：
each/map/grep/parseJson/isFunction/isPlainObject.....
2.2 常見的選擇器
id、標簽、父子、后代、
class、屬性($('[name=test]'))
2.3 簡化DOM操作的方法
增刪改查
2.3.1 增
insertAfter insertBefore append appendTo prepend prependTo
2.3.2 改
html()
css()
addClass()
width()
height()
2.3.3 刪
remove
removeClass()
2.3.4 查
三、ZeptoJS Detect Module
$.os
{android: true,phone: true ,tablet: false}
$.browser
{chrome:true,version:"56.0.2924.87",webkit:true}
四、ZeptoJS Event Module
on 綁定一個事件處理程序
off 解除綁定的事件處理程序
one 第一次事件觸發之后，將自動解除綁定
trigger 通過js的方式觸發指定的事件（多數都是自定義事件）
練習：實現一個頁面，在該頁面中有2個按鈕，兩個按鈕的id分別btn1，btn2；
要求：
①點擊btn1，超過5次自動解除綁定
②點擊btn2，在第3次，觸發自定義的事件，彈窗顯示‘自定義事件被觸發了’
Zepto.js默認包含5個模塊
①zepto核心模塊；包含許多方法
②event通過on()& off()處理事件
③ajaxXMLHttpRequest 和 JSONP 實用功能
④form序列化 & 提交web表單
⑤ie增加支持桌面的Internet Explorer 10+和Windows Phone 8。
一、Zepto的常見模塊
1、core
$(''),支持常見的選擇器
$.each/map/grep/parseJson/camelCames/trim... 和數據操作相關的方法
insertAfter insertBefore append appendTo prepend prenpendTO
html/css/addClass/removeClass/width/height
remove
next/prev/parent/parents/children..
detect
$.os
$.browser
event
on
off
one
trigger
2、ajax模塊
$.ajax()
$.get()
$.param() 將一個對象進行表單序列化 （在angularJS時
提供了$httpParamSerializerJQLike(object)）
$.post()
練習：使用post請求，將{name:'zhangsan'}發給服務器端，服務器端接收到數據，返回一個{tip:"Hello zhangSan"}.
通過Zepto中的$.post()來實現要求。
打開apache，請求注意端口號。
3、form模塊
serialize
serializeArray
submit
使用基本步驟：需要給表單元素指定name屬性。
注意事項：
如果表單元素中有復選、單選框，如果沒有選中的，默認在進行表單序列化時，是不會把它添加到字符串或者數組中的。
4、Touch模塊
//設置阻止掉默認的滑動效果
document.addEventListener(
'touchmove',
function (event) {
event.preventDefault();
},
{passive:false}
)
Touch模塊 給我們提供了兩大類事件的支持
①點按類
tap/longtap/doubletap
②滑動類
swipe/swipeLeft/swipeRight/swipeUp/swipeDown
如何使用事件呢？
①綁定對應的事件
element.on('swipe',function(){})
②觸發事件
5、動畫模塊 (fx+fxmethods)
fxmethods:
fadeIn fadeOut fadeTo fadeToggle
show hide toggle
...
fx:
animate()
二、練習Zepto的使用。
1、實現一個網頁版的簡歷
1.1 向服務器端獲取數據，將數據顯示在列表中。
①獲取數據
②找到列表，創建元素，插入到列表
1.2 向服務器端獲取數據，將數據顯示在列表中。
①獲取數據
②找到id為skills的div，創建元素，插入到div
2、將pc端的項目移植到Mobile端。
2048實現混合編程的方式有很多種，phoneGap也是一種的常見的方式，它最大的特點是借助各種各樣的插件來實現對于設備底層的調用。
phoneGap與cordova的關系：
最早的時候，phoneGap是一個非常流行的框架，后來被Adobe收購了，PhoneGap依然了自己的商標所有權，將核心的跨平臺代碼共享給了Adobe，Adobe將核心代碼全部開源，形成的新的項目叫做cordova。
cordova是phoneGap的核心代碼
混合編程：
①將前端代碼拷貝到Android工程的assets
②將前端代碼部署在服務器，通過loadUrl載入服務器的url
一、PhoneGap的概述
https://phonegap.com/ phoneGap官網
http://cordova.apache.org/ cordova官網
https://build.phonegap.com/ phoneGap提供的云端打包網址
http://phonegap-plugins.com/ 第三方的基于phoneGap的插件的列表站點
what？是一個針對移動端的，旨在通過編寫前端代碼來實現開發跨平臺應用程序的開發框架
之前通過eclipse創建Android項目，通過混合編程的方式來打包生成安裝文件(沒有辦法通過java來實現很多原生組件的調用，包括設備底層的調用)
*phoneGap提供了各種各樣的插件，這些插件給我們提供了js的接口來實現設備低層的調用。
理念：
實現write once,run everywhere.
where？ 低成本的開發跨平臺應用程序（Android/iOS/WP）
why?
①免費開源
②標準化 完全遵循w3c標準
③提供了非常方便的云端打包工具，可以直接將前端代碼打包生成可以安裝在移動端OS的app
④低成本 即使沒有學過專業的原生開發技能，也能夠基于前端技術以及phoneGap所提供的核心API來實現一個能夠調用底層硬件的app
ADB: Android Debug Bridge 安卓調試橋，之前在Android項目點擊run as去作為Android應用去運行，背后就是靠ADB將生成的apk結尾的文件傳遞到模擬器中。
how？
方式1:
借助于phoneGap所建議的方式，通過兩個軟件，一個安裝在pc，一個安裝在mobile
①安裝pc端的軟件 phonegap-desktop
②安裝移動端的軟件
https://github.com/phonegap/phonegap-app-developer/tree/master/resources/release
adb install **.apk
2.1 windows+R->cmd
2.2
③
方式2：
通過命令行 ：
//全局安裝cordova
npm install -g cordova
//創建一個基于cordova 的myApp項目
cordova create MyApp
//進入到MyApp的目錄
cd MyApp
//讓cordova支持Android開發平臺
cordova platform add android
//打包APK的安裝包，運行在對應的Android設備
cordova run android
二、PhoneGap支持的事件
deviceready
pause/resume
online/offline
battery***
***button
綁定事件的方式：
document.addEventListener(
'deviceready',
function(){},
false
)
、實現功能
使用谷歌瀏覽器將網頁打包為可以在桌面直接打開的app，可以實現直接打開瀏覽器指定網頁，也可以隱藏菜單欄全屏打開網頁應用。
二、適用范圍
需要直接在桌面打開的網頁應用，但不需要客戶端或者硬件交互的場景。
三、操作步驟
1、安裝谷歌瀏覽器
2、打開指定的HTML網頁應用
3、瀏覽器右上角的菜單，依次點擊“右上角菜單-更多工具-創建快捷方式-填寫應用名稱”，此時會在桌面生成應用圖標。
4、打開桌面的應用圖標，會直接使用谷歌瀏覽器打開網頁。
5、如果需要全屏展示，可在應用圖標“右鍵-屬性-目標-增加 ‘-kiosk’ 參數”，打開即可全屏。
6、備注：如果直接創建谷歌瀏覽器的快捷方式，在“右鍵-屬性-目標-增加 -kiosk和網站url”，也可實現相同效果。
從移動平臺崛起以來，HTML5移動應用開發迅速變成了熱門話題，開發者們被各種開發HTML5移動應用的方法搞得暈頭轉向，今天請到了金山云基礎架構部研發負責人柴春燕給大家分享如何避免HTML5移動應用最容易踩的那些坑。
柴春燕－－
微軟社區精英計劃博客組負責人，HTML5研究小組成員，擅長HTML5及移動應用開發；
具有多年Web開發經驗，曾參與開發微軟Visual Studio 2010中文學習平臺，基于SaaS模式的E-Learning系統；
曾負責當當網Web前端開發及移動應用開發，擔任百度音樂高級研發工程師；
目前就職于金山云，初期負責金山云前端架構，現任基礎架構部研發經理。
01/移動應用中HTML5的新特性
工欲善其事，必先利其器。我比較推崇的學習技術的方式，是先整體了解，然后結合實際需求，再做針對性的學習。整體了解的方式，比較建議是直接看官網的API文檔，這里可以推薦幾個網站： http://www.w3school.com.cn/html5/index.asp, https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5, http://www.html5rocks.com， http://caniuse.com/
其中，特別說明下http://caniuse.com/，通過這個網站，我們可以非常快速的查詢到你所想使用的html5的特性在各個瀏覽器，包括不同終端的瀏覽器的兼容性情況。
HTML5 在移動應用開發上面能夠利用的特性主要有：
1. form input type
表單是我們在開發中經常會遇到的，如果按照傳統的方式，要介入jquery validate或者自己寫正則進行判斷，但是其實html5的form表單新增的input type屬性，能夠快速幫我們實現所需要的功能。
2. video & audio
移動瀏覽器是不支持flash的，在一些微信專題活動中，經常會看到嵌入音頻，那么audio標簽就是比較適合的應用場景，html5中audio提供的api attr還是比較全面的。
視頻格式一般有mp4和webm兩種格式，在使用的時候，一般建議同時生成兩種，根據瀏覽器兼容性，進行相應的選擇。音頻audio，一般會同時制作mp3 ogg格式。
3. storage
關于web storage，大家可以參考我之前分享的一篇內容：
http://www.chaichunyan.com/topics/html5-training/5.html5_storage/#/
重點是localstorage，尤其是我們在做移動應用的性能優化時，localstorage能夠發揮很大的作用。
學習的時候，建議大家帶著問題去學習，比方說“localstorage最大的存儲容量是多少？”“有沒有有效期？”“cookie是有域的概念的，那么localstorage呢？”
4. css3
html5其實更多的是一個web標準，這個標準里邊，包含了html、JavaScript api、css。css3是我們在移動應用中要重點學習和掌握的。
1.選擇器
2.自定義字體
3.多欄布局
4.文字,容器陰影
5.圓角
6.漸變效果
7.動畫 ...
大家可以通過下面一個例子有一個直觀的印象：
http://www.chaichunyan.com/topics/html5-training/7.css3_summary/demos/index.html
之前很多我們需要通過js或者切圖實現的效果，在移動端，就可以直接通過css3實現。
這里特別強調下關于布局，css3彈性布局，希望大家能夠仔細去了解，我在面試時候，必問的一道題，當然，面試只是手段，更重要的是希望能夠學以致用，真正在實際工作中發揮作用。
flexbox布局的兼容性，彈性盒模型實現的原理，這些我們在做移動終端調試時候，如果只是靠反復試錯，那么效率是非常低的。
了解了html5的特性，開發者就會在移動應用上一展身手了。
02/HTML5移動應用中踩過的那些坑
1.布局
移動瀏覽器訪問的web站點，后面稱為mobile webapp哈（泛指移動終端瀏覽器訪問的web站點），能不能使用傳統的流式布局？答案是可以，但是要慎用。
mobile webapp對css3的彈性布局支持還是比較給力的，iOS Safari還好，但是Android的碎片化非常嚴重，尤其是Android上面各種第三方瀏覽器會做各種各樣的定制化，使用flexbox比float能夠減少你在布局調試上的時間，而且兼容性有保證。
2.圖片適配
這里邊要提供一個概念，是屏幕分辨率和物理分辨率，為什么我們使用ios看到的圖片清晰度那么高，原因是普通的手機屏幕，一點顯示一個像素，但是iphone4s 以后是一個點四個像素。
那按照320的設計稿切出來的圖片，在iphone上面顯示肯定是有鋸齒的。
處理方法可以參見我之前分享的一篇文章：圖片的適配與清晰度
http://blog.csdn.net/spring21st/article/details/7513906
3.字體
我把字體的處理分為兩類，一種是藝術字體、icon，另一種是我們在頁面中的字體。
移動終端對網絡的要求是比較高的，我們要盡可能減少網絡請求，圖片是非常大的網絡開銷，當然，我們可以用合并圖片的方式減少請求數，但是請求量變大了。
css3支持web fonts，所以，我們可以引入字體文件，而不是所有的字體都是通過切圖的方式來實現。對于icon，一種方式是base64處理，但是現在更常見的做法，是轉換成矢量字體。
這里推薦一個網站：font awesome http://fortawesome.github.io/Font-Awesome/icon/css3/
這里邊涵蓋了大部分我們會用到的圖標，當然，公司有精力和人力的情況下，建議可以維護自己的矢量字體庫。
4.橫豎屏
我們可以通過css 的media query 判斷橫豎屏。
但是這種只能控制樣式展現，當我們需要監聽橫豎屏變化的時候，就只能通過js監聽window.onorientationchange事件的方式實現。
但是，下面這種情況會讓你很無語：
那我們推薦下面這種實現方案：
相比較pc web，mobile webapp的調試更復雜，而且未知的問題更多，遇到問題，我們要有耐心去跟蹤定位，就像之前我們遇到iscroll性能問題、fast-click穿透的問題，都是一點一點排查處理的。
03/混合應用（Hybrid）的注意事項
現在“快速迭代，敏捷開發，低成本上線“基本上是每家公司都追求的目標，混合應用就是在這種場景下應運而生。
Hybrid App優點眾多，Web前端工程師0成本介入，不依賴版本的實時更新，快速實現跨平臺需求，等等。但是，我對混合的看法是，根據實際情況合理使用，因地制宜。
那么什么樣的場景適合混合應用開發？
1. 快速原型，驗證產品功能。我們之前開發過一個app，Android和iOS提供宿主環境，webview展現內容都是通過html5實現的，半個月就開發上線了，較之傳統應用開發人員成本和時間成本都縮短很多。
2. 內容類的應用，比如csdn的app，就是采用hbuilder混合方案實現的，對性能要求沒有那么高。
在考慮hybird的時候，要避免以下幾個誤區：
（1）為了HTML 5而Hybrid App
html5只是技術實現手段而已，要根據公司的實際業務場景，以及人員配比，綜合考慮，不能因為react native比較火，就必須要在公司推行這種實現方案，我覺得為技術而技術是不可取的。
（2）忽略移動應用中的關鍵因素
mobile webapp本質上還是基于PC的一種開發模式，開發者使用PC瀏覽器模擬App中的webview進行調試。PC瀏覽器與手機webview的區別是巨大的，包括能支配的CPU資源，最大占有的內存，運行的網絡環境，click和touch事件的區別，瀏覽器對CSS/JS的解析和對事件處理等等。
app工程師考慮比較多的內存的問題，這些在web開發時候是很少考慮的。另外，就是網絡環境方面，雖然現在3g、4g覆蓋率越來越高，但是移動終端的訪問和pc還是有很大差距，wifi和蜂窩網絡的切換，基站變化等諸多因素都會導致網絡間歇性斷開，web開發對于這種不穩定網絡環境問題的處理上都有所欠缺。
（3）交互體驗一致性
ios和Android的交互設計是兩套規范，雖然有相似的地方，但是從操作習慣上，就已經決定了，我們想用一套交互設計，適配兩個平臺是很難的，包括包括視覺風格，界面切換，操作習慣等。
Hybrid App方案是一把雙刃劍，一方面它平衡了Native App和Web頁面的優缺點，一定程度上解決了Native App開發過程中迭代慢，版本依賴，Native開發資源不足的問題，但另一個方面過度依賴Hybrid方案會造成Web前端開發成本快速上升，甚至造成App整體體驗下降，甚至造成功能缺失。
回到最開始那句話”不要為了Hybrid而Hybrid“，根據實際場景，控制好方案中native和web的邊界。
04/Q&A
Q1：關于響應式開發中對于手機屏幕高度的解決有沒有什么好的解決方案？
響應式開發本質上是移動設計優先的一種開發方式，我沒太明白對于手機屏幕高度的解決，具體的問題是什么樣的，原則上高度是不需要做處理的，除非是你對首屏有要求。關于響應式開發，可以看看我這篇文章http://www.chaichunyan.com/index.php/2016/03/03/html5-wrd/
Q2:對首屏有要求的情況, 除了判斷高度還有沒有其他好的解決方案?如果是flex布局可以解決這個問題嗎？
問題的根本是獲取首屏的高度，（1）如果你是后端渲染的話，可以獲取機型和瀏覽器版本，拿到屏幕分辨率做適配 （2）根據屏幕寬度做適配，但是做不到完全絕對的首屏自適應，如果有更好的方案，我再跟大家分享。
Q3:hybrid開發中，h5頁面太多的話，會不會影響ios發布？
之前有ios對phonegap這種跨平臺的應用審核是不通過，不過現在放開這個限制了。h5頁面過多，會影響應用的性能和體驗，建議可以把h5打包放到ipk里邊，但是要做好靜態資源的版本管理。
Q4：css3 彈性布局中， 由于android碎片化嚴重的問題， 能不能有好的案例指導？ 我們要求支持到android4以上版本。
真的要善用文檔和工具, http://caniuse.com/#search=flex, 我分享時候提到的這個網站，明確說明了flex兼容性。
如果是Android4.4以上機型，基本上可以放心使用，注意的地方有兩個：1. 要記得寫各個瀏覽器的css前綴 2. flex里邊可以嵌套flex.
Q5：hybird開發過程中， 原生代碼登錄權限問題，h5部分的頁面，如何共享登錄相關信息？
這要看你實現的方案，（1）嵌套靜態的h5頁面，那么需要native打開webview的時候，使用js briage調用頁面js的方法，寫入用戶信息，實現登錄共享 （2）如果打開的是動態渲染的頁面（如php輸出的頁面），那么可以在請求的url中攜帶用戶token，php通過query string判斷驗證，這個是native和webview數據交互的問題。
Q6：h5動畫在部分安卓webview中有時候會出現卡頓,這種情況改怎么優化呢?
1. 可以做簡單的測試，看看瀏覽器支持的情況，如果瀏覽器支持不夠好，那么可能要做降級處理。
2. 減少動畫效果，因為動畫是要使用gpu渲染的，原生app能夠流暢，很大程度上是直接調用硬件處理的。
優化的方案我這邊基本上是降級處理，Android低版本不支持的話，就使用基本動畫，比方不會使用3D翻轉。因為h5畢竟受限于webview環境，像jquery 和 zepto都提供對機型和瀏覽器的判斷。
Q7：在移動端瀏覽器上能支持h5離線存儲的性能嗎？
No problem.我們在實際項目中，優化前端性能，曾經用localstorage做靜態資源的版本管理和存儲。
更多技術干貨關注公眾號“極牛”。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
