子曾經曰過：若是你恨一我的，讓他去開發PhoneGap應用；若是你愛一我的，讓他去開發PhoneGap應用。html
去年這個時候我很煩惱，由於我以爲我OUT了。html5
原由是我買了一臺Android系統的手機。當我用本身的google帳號登陸上去後，我發現通信錄被同步了，Gtalk實時通知了，Gmail隨身能看了。還有成百數千的應用，讓我足足玩了一週。jquery
電腦佔據了用戶天天8小時的時間，網站創造了巨大的價值。可是，手機這東西卻可以24小時不間斷的陪着用戶，消息推送機制更是讓用戶變得永久在線，隨時可響應。我很興奮，可是卻高興不起來。android
我是一個Web程序員。我喜歡寫PHP，喜歡處理Mysql，我能用CSS和JavaScript構建不錯的頁面。可是我不喜歡Java，也不喜歡寫Object C，就像那幫作客戶端開發的同窗不喜歡寫網站後臺同樣。ios
這樣的沮喪持續了挺久，直到我遇到了PhoneGap。其實我有想過經過Mobile Web的方式進入移動互聯網，可是在手機上輸入網址的體驗太折磨了。另外消息推送和本地設備接口（好比攝像頭）都是問題。而PhoneGap解決了這一切。簡單的說，它就是一個提供js接口調用本地設備接口的瀏覽器，這個瀏覽器還能夠打包成一個單獨的應用，安裝到系統，添加到桌面和發佈到應用市場。程序員
因爲徹底基於瀏覽器，PhoneGap還有一個好處，能夠很輕鬆的跨多個平臺。web
基於PhoneGap，我用3天的時間，給TeamToy寫了一個手機客戶端，能夠讀取工做組的通信錄，能夠瀏覽Feed和發佈廣播。固然，還能收通知。ajax
雖然算只跳舞的熊，但它的確能工做。這讓我不由想，這東西到底能作什麼程度的應用？sql
PhoneGap只是一個殼，它是無論裏邊跑的應用長什麼樣子的，更不會有那些移動設備上經常使用的控件。json
好在有其餘的項目提供支持，其中最有名的是兩個。一個是sencha touch，一個jquery mobile。
因而我都試用了下，而後我明白了苦頭在後邊⋯⋯
當時這些項目都還屬於發展期，連文檔都沒什麼，須要本身去讀DEMO和源代碼。
首先我嘗試着用sencha touch寫了一個微盤的第三方客戶端。坦白的說，sencha touch表現不錯，在菜單導航和列表拖拽上都明顯比Jquery Mobile靠譜。可是sencha touch採用JS來描述整個page的結構，這讓你的layout看起來就像一堆json數據。
我很討厭這樣，由於這種級別的可讀性讓項目很難維護。另外，sencha1版本Bug也很多，好比那個List最後一行能拖拽出來，卻永遠點不到的問題。如今sencha已經在測試2版本了，聽說提供了直接打包成本地應用的工具，這樣也許就不須要PhoneGap了。
因爲對Sencha Touch的編碼方式不認同，我徹底轉向了Jquery Mobile。JQuery Mobile的方式更容易接受，它徹底使用HTML標籤進行頁面佈局，你只須要經過data-role之類的標籤來告訴JQM你想幹什麼就OK了。我用JQM寫了Riki.co的移動版，有興趣的同窗能夠去體驗下：http://riki.co/m/ （這個東西有不少問題，下邊我會提到）
JQM最近已經1.0了，成熟了很多，可是問題依然不少。首先是底導航浮動的問題。JQM的底導航實現很詭異，丫是一個浮動圖層，根據當前屏幕的高度，把本身降到屏幕最下方，當你拖動頁面內容時，這個浮動條還會隱藏。這個效果有多麼的BT，真是誰用誰知道。沒用過的同窗能夠到這裏去體驗下官方版本： http://jqmdoc.sinaapp.com/docs/toolbars/footer-persist-a.html
這其實還不是最難受的，最難受的是，當你把JQM打包到PhoneGap裏邊後，因爲未知緣由10次裏邊JQM能有2~3次取不到瀏覽器高度，直接形成導航掛掉。
這個問題其實iScroll4 很好的解決了，它使用了相對距離的CSS來固定頂導航和底導航。因此後來我把它給整合到JQM裏邊，而後天下太平了。
iScroll4還實現了列表拖拽刷新的功能，能夠作出iPhone上經常使用的下拉刷新。
而後是頁面切換的問題。JQM和Sencha其實都有，就是在android系列機器上，頁面切換時的抖動和閃爍。最開始你注意到的時候，是切換的瞬間頁面反白一下，這個問題其實能夠解決，用一行CSS就能夠了：
.ui-page{ -webkit-backface-visibility: hidden; }
可是，代價是慘重的。首先是會致使性能下降，而後是，當你切到從頁面A切換到頁面B時，頁面A的內容會忽然在滑動效果結束後，再閃一下。親，這是坑爹啊仍是坑爹啊。還沒完，若是你用的JQM，而後在android系統上用百度或者QQ輸入法，那麼恭喜，當你在輸入文字時，頁面會上下不停的抖動，就像ZF要強拆它家似的。
JQM經過Ajax載入的頁面都有這個問題，你能夠選擇關閉Ajax載入，這樣每一個頁面都獨立載入，除了速度慢點外，不能忍受的是列表滾動條進度會丟失。這意味着你在列表中部選中的一條內容，查看完後，返回列表時，列表又回到第一條去了。
最後我選擇了採用DIV切換的方式。我會在一個頁面把全部要用的Page都載入進來，而後display:none;在須要使用的時候再顯示出來。這樣作的問題是一次讀取了較多的內容，會稍微多佔點內存，另外沒有動態切換效果；但好處顯而易見：頁面之間的切換速度已經接近原生應用。
我想說的是，JQM是個好框架，但它並非徹底爲在PhoneGap裏邊跑的HTML設計的。它須要考慮資源載入速度和流量的問題，而PhoneGap這種應用資源都放本地的；它在瀏覽器上能夠不斷的刷新頁面，因此它不用考慮太多內存管理和DOM回收的事情，而對PhoneGap裏邊的應用來說，這直接決定了應用的穩定性。
這些差別決定了一個專門爲PhoneGap這種應用設計一個框架是必要的。而目前沒有一個好的框架解決掉我提到的這些問題，咱們只能當心的繞過這些一個個的雷點。（ 若是你願意寫一個這樣的框架，我能夠提供一個新浪的全職職位 ：） ）
雖然我吐了一肚子的苦水，可是最終結果是很不錯的，我如今已經能以天爲單位開發一些社交和資訊類應用了，而這些應用能夠直接運行在iPhone，Android和芒果上。
更好的消息是你不用再被折騰一遍，由於我有個東西給你。
那就是我在歷經折磨後，作出的一個叫作LazyMobile的應用模板。
它其實就是一個已經寫好的應用，你能夠直接修改它，添加本身的功能。它看起來是這個樣子的：
這東西基於JQM和iScroll。
首先它用iScroll4解決了底導航固定的問題，在android和ios上都很完美，下拉刷新也是能夠用的。
而後它經過Tab切換來載入其餘頁面，效果接近原生應用，可是不要在一個List裏邊放太多的數據，少放點，動態加載和實時回收item項。我已經作了一個兩級導航，應該夠用了，微博客戶端也就用到二級導航。
它用JQuery的ajax函數從服務器端讀取json格式數據，而後用jquery.tmpl進行渲染，目前這個地方會消耗很多CPU，但暫時沒有更好的辦法。
另外，它還用localStroage存儲了上次網絡請求回來的json數據，這樣在網絡斷開時，依然能夠顯示內容。
這個項目徹底是一個副產品，因此我不保證會維護它。不過你已經知道了它的大多數細節，我相信Web程序員都能很好的使用它。項目地址：http://code.google.com/p/lazymobile/
PS: 個人微博ID @Easy ，這應該是找到我最快的方式。
