PhoneGap應用開發的那些坑爹事兒
去年這個時候我很煩惱，因為我覺得我OUT了。
起因是我買了一臺Android系統的手機。當我用自己的google賬號登錄上去后，我發現通訊錄被同步了，Gtalk實時通知了，Gmail隨身能看了。還有成百數千的應用，讓我足足玩了一周。
電腦占據了用戶每天8小時的時間，網站創造了巨大的價值。但是，手機這東西卻能夠24小時不間斷的陪著用戶，消息推送機制更是讓用戶變得永久在線，隨時可響應。我很興奮，但是卻高興不起來。
我是一個Web程序員。我喜歡寫PHP，喜歡處理Mysql，我能用CSS和JavaScript構建不錯的頁面。但是我不喜歡Java，也不喜歡寫Object C，就像那幫做客戶端開發的同學不喜歡寫網站后臺一樣。
這樣的沮喪持續了挺久，直到我遇到了PhoneGap。其實我有想過通過Mobile Web的方式進入移動互聯網，但是在手機上輸入網址的體驗太折磨了。另外消息推送和本地設備接口(比如攝像頭)都是問題。而PhoneGap解決了這一切。簡單的說，它就是一個提供js接口調用本地設備接口的瀏覽器，這個瀏覽器還可以打包成一個單獨的應用，安裝到系統，添加到桌面和發布到應用市場。
由于完全基于瀏覽器，PhoneGap還有一個好處，可以很輕松的跨多個平臺。
基于PhoneGap，我用3天的時間，給TeamToy寫了一個手機客戶端，可以讀取工作組的通訊錄，可以瀏覽Feed和發布廣播。當然，還能收通知。
雖然算只跳舞的熊，但它的確能工作。這讓我不禁想，這東西到底能做什么程度的應用?
PhoneGap只是一個殼，它是不管里邊跑的應用長什么樣子的，更不會有那些移動設備上常用的控件。
好在有其他的項目提供支持，其中最有名的是兩個。一個是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和芒果上。
更好的消息是你不用再被折騰一遍，因為我有個東西給你。
#p#
那就是我在歷經折磨后，做出的一個叫做LazyMobile的應用模板。
它其實就是一個已經寫好的應用，你可以直接修改它，添加自己的功能。它看起來是這個樣子的：
這東西基于JQM和iScroll。
首先它用iScroll4解決了底導航固定的問題，在android和ios上都很完美，下拉刷新也是可以用的。
然后它通過Tab切換來載入其他頁面，效果接近原生應用，但是不要在一個List里邊放太多的數據，少放點，動態加載和實時回收item項。我已經做了一個兩級導航，應該夠用了，微博客戶端也就用到二級導航。
它用JQuery的ajax函數從服務器端讀取json格式數據，然后用jquery.tmpl進行渲染，目前這個地方會消耗不少CPU，但暫時沒有更好的辦法。
另外，它還用localStroage存儲了上次網絡請求回來的json數據，這樣在網絡斷開時，依然可以顯示內容。
這個項目完全是一個副產品，所以我不保證會維護它。不過你已經知道了它的大多數細節，我相信Web程序員都能很好的使用它。項目地址：http://code.google.com/p/lazymobile/
原文：http://ftqq.com/2011/12/12/the-days-develop-apps-using-phonegap/
【編輯推薦】
