0 輕量級的JQUERY兼容庫
JQuery已經(jīng)成長的得非常強大了,但在移動設備上有些臃腫。如果你的應用只運行在WebKit內核的機器上,那么我強烈建議你換用移動版本的JQuery兼容庫。
Zepto和JQ.mobi都是專門為移動設備優(yōu)化后的JQ兼容庫。
Zepto我不是特別熟悉,JQ.mobi我用得比較多,官方提供的數(shù)據(jù)稱,JQ.mobi比JQueryMobile快3倍以上。
相比于JQueryMobile悲催的定導航底導航固定功能,JQ.mobi也提供了自己的UI。雖然和JQM差不多丑,但不會出現(xiàn)萬惡的導航欄閃動問題。如果你自己不想構建UI框架,那么還是推薦用JQ.mobi的UI庫,換換配色和背景,也能看起來蠻專業(yè)的。
另外JQ.mobi還提供了一系列的插件,但是都沒有提供文檔 。里邊的scroll插件不如iScroll4給力,模板插件還可以用。這里講下用法。
要使用JQMobi的插件,只需要簡單的用script載入對應的文件就行。
JQ.Mobi的模板來自這里(這個鏈接要從源代碼中才能翻出來,藏那么好干嘛啊…)是一個使用%號進行標記的系統(tǒng)。
模板部分采用script標簽包含:
從上邊的例子中可以看到,這套模板可以輕松支持 if/for/else等語法;數(shù)組和對象也沒有什么問題,可以滿足絕大部分需求。
它采用$.tmpl函數(shù)將數(shù)據(jù)傳入模板,得到渲染后的html。需要注意的地方是傳數(shù)據(jù)時要以對象的方式來傳,同時為傳入的數(shù)據(jù)指定變量名。
1 滾動效果專家:ISCROLL4
雖然現(xiàn)在JQ.mobi已經(jīng)解決了導航欄固定和滾動的問題,但是iScroll4依然是非常值得使用的。
在使用iScroll時有幾個需要注意的地方。
首先,iScroll采用css的top和bottom值固定了頂導航條和底導航條的高度,可以修改css來調整。
其次,iScroll是靜態(tài)的,就是說,它并沒有隨時查看scroll里邊的內容是否增加,這就要求我們在動態(tài)加入內容后,顯示調用scroll對象的refresh方法。
最后,iScroll4能很好的實現(xiàn)iOS用得很多的下拉刷新效果,這個頁面上有完整的代碼。
2 現(xiàn)代瀏覽器:SAFARI/CHROME
在手機瀏覽器上調試之前,先在電腦瀏覽器上開發(fā)會快很多,建議用safari或者Chrome。這東西雖然大家都有,但有些細節(jié)還是潛藏很深的。
比如用Chrome調試的時候你可能會遇到跨域的問題,只要在啟動Chrome.exe時加上一個參數(shù)就可以了。
chrome.exe –disable-web-security
另外有些同學可能不知道,PhoneGap API頁面上的LocalStorage和Indexed DB 其實是Html5的標準接口,所以Chrome和Safari中的自帶的調試工具就能很好的管理。
打開Developer tools,選擇 Resources Tab頁就能看到數(shù)據(jù)庫,本地存儲等選項 。( 當初我找了好久Chrome的Sqlite管理插件…)
3 PHONEGAP實時調試工具:云窗調試器
雖然有點夸張,但不少網(wǎng)友是用PhoneGap神器來形容它的。
本質上來講,云窗調試器就是一個支持PhoneGap Javascript接口的移動瀏覽器。
它和新浪SAE的云平臺緊密結合,需要用SAE賬號登錄,這樣當你在SAE上創(chuàng)建一個移動應用后,就能直接在云窗調試器的應用列表頁面看見。
點擊應用名稱后,就可以開始調試應用了。由于代碼放置在SAE平臺上,我一般用瀏覽器上的在線編輯器修改代碼,Ctrl+S后直接在手機上看效果。
一次變更兩秒看到最終結果,比起本地編譯,差不多一次能節(jié)省半分鐘的時間。
云窗調試器iOS版本支持iPhone和iPad,不過還沒發(fā)布到App Store,如果你的設備已經(jīng)越獄,可以直接在設備的safari里 點這個鏈接進行安裝。
4 在線打包工具:PHONEGAP:BUILD
作為一個跨平臺方案,PhoneGap也提供了一個云打包器,利用它我們可以不用安裝任何開發(fā)環(huán)境,直接將HTML打包成iOS,Android,Windows Phone,WebOS,塞班和黑莓6個手機系統(tǒng)的安裝包。
PhoneGap:Build 的使用很簡單,注冊一個PhoneGap賬號然后上傳代碼的Zip包就可以。當然,你也可以直接從git/svn取代碼。
需要注意的是PhoneGap:Build的打包是收費服務,對private app有個數(shù)限制(我暫時還沒遇到,不過看官方的說明是有限制的)。另外PhoneGap:Build上iOS的打包需要上傳證書,否則不能打包。
如果你只是需要打Apk包的話,也可以使用SAE提供的在線打包器,這個打包器是完全免費的。另據(jù)小道消息,iOS無證書打包器已經(jīng)在調試中了,預計月底上線。
最后提供一個懶人福利:文章中提到的東東打包下載。