1 輕量級(jí)的JQUERY兼容庫(kù)

JQuery已經(jīng)成長(zhǎng)的得非常強(qiáng)大了，但在移動(dòng)設(shè)備上有些臃腫。如果你的應(yīng)用只運(yùn)行在WebKit內(nèi)核的機(jī)器上，那么我強(qiáng)烈建議你換用移動(dòng)版本的JQuery兼容庫(kù)。

Zepto和JQ.mobi都是專門為移動(dòng)設(shè)備優(yōu)化后的JQ兼容庫(kù)。

Zepto我不是特別熟悉，JQ.mobi我用得比較多，官方提供的數(shù)據(jù)稱，JQ.mobi比JQueryMobile快3倍以上。

相比于JQueryMobile悲催的定導(dǎo)航底導(dǎo)航固定功能，JQ.mobi也提供了自己的UI。雖然和JQM差不多丑，但不會(huì)出現(xiàn)萬(wàn)惡的導(dǎo)航欄閃動(dòng)問題。如果你自己不想構(gòu)建UI框架，那么還是推薦用JQ.mobi的UI庫(kù)，換換配色和背景，也能看起來蠻專業(yè)的。

另外JQ.mobi還提供了一系列的插件，但是都沒有提供文檔 。里邊的scroll插件不如iScroll4給力，模板插件還可以用。這里講下用法。

要使用JQMobi的插件，只需要簡(jiǎn)單的用script載入對(duì)應(yīng)的文件就行。

JQ.Mobi的模板來自這里（這個(gè)鏈接要從源代碼中才能翻出來，藏那么好干嘛啊…）是一個(gè)使用%號(hào)進(jìn)行標(biāo)記的系統(tǒng)。

模板部分采用script標(biāo)簽包含：

從上邊的例子中可以看到，這套模板可以輕松支持 if/for/else等語(yǔ)法；數(shù)組和對(duì)象也沒有什么問題，可以滿足絕大部分需求。

它采用$.tmpl函數(shù)將數(shù)據(jù)傳入模板，得到渲染后的html。需要注意的地方是傳數(shù)據(jù)時(shí)要以對(duì)象的方式來傳，同時(shí)為傳入的數(shù)據(jù)指定變量名。

2 滾動(dòng)效果專家：ISCROLL4

雖然現(xiàn)在JQ.mobi已經(jīng)解決了導(dǎo)航欄固定和滾動(dòng)的問題，但是iScroll4依然是非常值得使用的。

在使用iScroll時(shí)有幾個(gè)需要注意的地方。

首先，iScroll采用css的top和bottom值固定了頂導(dǎo)航條和底導(dǎo)航條的高度，可以修改css來調(diào)整。

其次，iScroll是靜態(tài)的，就是說，它并沒有隨時(shí)查看scroll里邊的內(nèi)容是否增加，這就要求我們?cè)趧?dòng)態(tài)加入內(nèi)容后，顯示調(diào)用scroll對(duì)象的refresh方法。

***，iScroll4能很好的實(shí)現(xiàn)iOS用得很多的下拉刷新效果，這個(gè)頁(yè)面上有完整的代碼。

3 現(xiàn)代瀏覽器：SAFARI/CHROME

在手機(jī)瀏覽器上調(diào)試之前，先在電腦瀏覽器上開發(fā)會(huì)快很多，建議用safari或者Chrome。這東西雖然大家都有，但有些細(xì)節(jié)還是潛藏很深的。

比如用Chrome調(diào)試的時(shí)候你可能會(huì)遇到跨域的問題，只要在啟動(dòng)Chrome.exe時(shí)加上一個(gè)參數(shù)就可以了。

chrome.exe –disable-web-security

另外有些同學(xué)可能不知道，PhoneGap API頁(yè)面上的LocalStorage和Indexed DB 其實(shí)是Html5的標(biāo)準(zhǔn)接口，所以Chrome和Safari中的自帶的調(diào)試工具就能很好的管理。

打開Developer tools，選擇 Resources Tab頁(yè)就能看到數(shù)據(jù)庫(kù)，本地存儲(chǔ)等選項(xiàng) 。( 當(dāng)初我找了好久Chrome的Sqlite管理插件…)

4 PHONEGAP實(shí)時(shí)調(diào)試工具：云窗調(diào)試器

[[67767]]

雖然有點(diǎn)夸張，但不少網(wǎng)友是用PhoneGap神器來形容它的。

本質(zhì)上來講，云窗調(diào)試器就是一個(gè)支持PhoneGap Javascript接口的移動(dòng)瀏覽器。

它和新浪SAE的云平臺(tái)緊密結(jié)合，需要用SAE賬號(hào)登錄，這樣當(dāng)你在SAE上創(chuàng)建一個(gè)移動(dòng)應(yīng)用后，就能直接在云窗調(diào)試器的應(yīng)用列表頁(yè)面看見。

點(diǎn)擊應(yīng)用名稱后，就可以開始調(diào)試應(yīng)用了。由于代碼放置在SAE平臺(tái)上，我一般用瀏覽器上的在線編輯器修改代碼，Ctrl+S后直接在手機(jī)上看效果。

一次變更兩秒看到最終結(jié)果，比起本地編譯，差不多一次能節(jié)省半分鐘的時(shí)間。

云窗調(diào)試器iOS版本支持iPhone和iPad，不過還沒發(fā)布到App Store，如果你的設(shè)備已經(jīng)越獄，可以直接在設(shè)備的safari里 點(diǎn)這個(gè)鏈接進(jìn)行安裝。

5 在線打包工具：PHONEGAP:BUILD

作為一個(gè)跨平臺(tái)方案，PhoneGap也提供了一個(gè)云打包器，利用它我們可以不用安裝任何開發(fā)環(huán)境，直接將HTML打包成iOS，Android，Windows Phone，WebOS，塞班和黑莓6個(gè)手機(jī)系統(tǒng)的安裝包。

PhoneGap:Build 的使用很簡(jiǎn)單，注冊(cè)一個(gè)PhoneGap賬號(hào)然后上傳代碼的Zip包就可以。當(dāng)然，你也可以直接從git/svn取代碼。

需要注意的是PhoneGap:Build的打包是收費(fèi)服務(wù)，對(duì)private app有個(gè)數(shù)限制（我暫時(shí)還沒遇到，不過看官方的說明是有限制的）。另外PhoneGap:Build上iOS的打包需要上傳證書，否則不能打包。

如果你只是需要打Apk包的話，也可以使用SAE提供的在線打包器，這個(gè)打包器是完全免費(fèi)的。另?yè)?jù)小道消息，iOS無(wú)證書打包器已經(jīng)在調(diào)試中了，預(yù)計(jì)月底上線。

***提供一個(gè)懶人福利：文章中提到的東東打包下載。