1.2 跨平臺移動開發框架

馬克思在資本論中曾經提到過，一切社會形態都取決于生產力。而對于開發人員來說，生活水平（主要指收入）也主要由生產力來決定。開發人員為了提高生產力主要有兩條路可以選擇：

● 努力學習，積累經驗使自己具有更高的技術。

● 選擇更高效的開發工具。

如果決心選擇第一條路的話，現在可以放棄這本書了，因為本書主要介紹的是如何利用更高效的工具來提高開發效率。如果選擇了第二條路，那么恭喜你，你將在本書中得到所需要的技術。

如何用工具來提高開發效率呢？曾經有人設想有這樣一款IDE（集成開發環境），開發者可以將自己的需求通過鍵盤輸入到IDE中，IDE就會自動生成開發者所需要的軟件。這確實是近幾年軟件工程學科比較熱門的一項課題，可惜的是還遠遠不能實現需求。因此就只能退而求其次，于是跨平臺移動開發框架就應運而生。

1.2.1 什么是跨平臺移動開發框架

近年來隨著硬件設備和平臺的不斷發展，手持移動設備的計算能力得到了顯著的提高，智能手機和平板電腦越來越多地出現在人們的日常生活中。無論是多么強大的硬件或是多么優秀的平臺，都要有軟件來支撐。但是廠商之間的競爭導致軟件在不同平臺中不兼容的現象。比如安卓上的apk文件就無法在iOS中運行，甚至早期安卓上運行的一些APP在當前的大屏手機上也無法正常顯示。

作為一名開發者就不得不做出取舍，是選擇自己精通的一個平臺做好呢？還是花費大量的時間和精力同時進行多個平臺的開發，甚至是花錢雇人來開發其他的平臺好呢？這看似是一個難以抉擇但是又沒有完美答案的選擇題。能不能選擇一種完美的方案呢？當然可以，因為有跨平臺移動開發框架。

所謂跨平臺移動開發框架，可以簡單地被分解成：“跨平臺”、“移動”和“開發框架”。“跨平臺”指的是只需要經過一次開發，得到的應用就可以在多個平臺上流暢運行。目前比較主流的移動操作系統包括Android、iOS等，為了實現在這么多系統之間的兼容，跨平臺開發框架往往采用HTML 5為開發語言，然后利用Web執行，或者由專門的開發環境生成全部平臺適用的安裝文件。

以本書介紹的jQuery Mobile為例，它是一款基于HTML 5的跨平臺開發框架，可以利用它來生成非常華麗的網頁文件。但是同時也可以借助另一款框架APICloud的幫助來分別生成apk（安卓中的安裝文件）、ipa（iOS中的安裝文件）格式的文件。圖1-12為一款跨平臺開發框架主頁上為了說明跨平臺特性而設計的圖片。

所謂“移動”指的是主要支持移動設備，也就是說這些框架是專為移動設備（如手機或平板）而定制的。這也說明該框架不會考慮一些比較老的PC瀏覽器（如IE 6）的兼容性，但是大多數情況下在PC上仍然是可以正常使用的。

跨平臺開發框架令開發者感到欣慰的地方，在于它“開發框架”的特性，該特性使得它能夠大大提高開發人員的效率。所謂“開發框架”，指的就是一組已經被定義好的設計構件。如在HTML 5中定義一個按鈕非常容易，但是若要為它加入一些好看的樣式，可能光CSS就要寫幾十行，有了jQuery Mobile后，只需要一行代碼就可以了。

1.2.2 為什么選擇跨平臺移動開發框架

跨平臺移動開發框架的優點如下。

● 一次編寫多平臺運行。

目前絕大多數智能手機都支持HTML 5，況且還可以將內容打包成相應平臺的應用，這更保證了應用的可運行性。

● 上手迅速，開發效率高。

沒有HTML、JavaScript開發經驗的人員，甚至是銷售人員，經過一兩天的學習后，也能夠做出一些非常不錯的應用界面。

● 避過重重審批，直接面向用戶。

上傳到應用市場能不能通過審批都是未知數（比如說App Store中的快播）。為了能夠面向用戶（最根本的還是獲得廣告收入），最好的辦法就是直接生成網頁，只要有一臺服務器就夠了，甚至連域名也不需要。

● 即使沒有美工基礎的開發人員也可以設計出優秀的界面。

因為在這些開發框架中大多已經定義好了要使用的樣式，開發者只要根據自己的需要對各種樣式進行選擇就可以。其實不光是這些“高級”的集成開發環境，原生的SDK中也集成了一些基礎樣式，只不過它們大多比較丑，需要開發者去進一步美化。

1.2.3 常見的跨平臺移動開發框架

常見的跨平臺移動開發框架有：jQuery Mobile、Sencha Touch、jQTouch、Dojo Mobile、AppCan、PhoneGap/Cordova和Cocos2d-X等。當然類似的框架還有很多，這里只列出這些比較有代表性的。下面將對它們進行一一介紹。

1.jQuery Mobile

jQuery Mobile是jQuery在手機和平板上的版本，它不僅帶來能夠讓主流移動平臺支持的jQuery核心庫，還包括一整套完整和統一的移動UI框架。jQuery Mobile不僅支持全球各個主流移動平臺，在PC平臺的Web應用中也常常看到它的身影。jQuery Mobile的開發團隊認為，jQuery Mobile在向各種主流瀏覽器提供統一的用戶體驗（圖1-13為jQuery Mobile）。

2.Sencha Touch

Sencha Touch是一款將現有的ExtJS框架整合JQTouch、Rapha庫而推出的，適用于最前沿Touch Web的移動開發框架。Sencha Touch可以讓Web App看起來更像Native App。擁有美麗的用戶界面組件和豐富的數據管理，全部基于最新的HTML 5和CSS3的Web標準，全面兼容Android和iOS設備。

Sencha Touch所自帶的主題樣式可以說是所有開發框架中最接近iOS原生樣式的，甚至能以假亂真。另外，它還給Android開發人員準備了若干套適用于Android的主題。

與其他移動開發框架相比，Sencha Touch最大的優點還在于其提供了增強的觸摸事件處理機制，在touchstart、touchend等標準事件基礎上，增加了一組自定義事件數據集成，如tap、swipe、pinch、rotate等。這些事件使得Sencha Touch能夠更好地處理頁面中的手勢判斷等操作，為用戶帶來更強大的交互式體驗（圖1-14為Sencha Touch）。

3.jQTouch

看到這個名稱，可能很多讀者會以為這是一款與Sencha Touch一樣，通過增加對手勢的處理來增強交互性的框架。它名字中雖然帶有Touch，但是jQTouch的特色在于通過增強瀏覽器中的動畫、漸變以及導航列表等效果來達到目的。隨著iPhone、iPod Touch等設備的使用日益增多，jQTouch無疑為手機網站的開發減少了工作量，而且在樣式和兼容性方面也得到了很大的提高。

準確地說，jQTouch并不能完全算作是一款移動開發框架，因為它原本僅僅是來自于Sencha Libs的一款jQuery插件，用于在iPhone等觸屏設備上實現一些簡單的動畫效果。筆者認為將它作為一個包含比較全面的UI效果的JavaScript庫來使用會比較合適一些（圖1-15為jQTouch）。

隨著觸屏移動設備的增多，jQTouch團隊在這上面確實下了不少功夫，以至于它現在越來越“像”一款開發框架。目前jQTouch能夠提供很好的文檔管理功能，并且易于使用，但是仍然存在為數不少的bug，官方提供的一些小demo也存在一些問題。

另外，這款框架是基于WebKit內核的，也就是說它并不是完全的跨平臺開發框架，至少它不能支持Gecko（Firefox和Opera瀏覽器的內核）。

4.Dojo Mobile

Dojo Mobile是Dojo工具包的一個擴展，提供了一系列小部件或組件來幫助開發者快速生成希望獲得的界面效果。與Sencha Touch類似的是，Dojo Mobile也致力于通過HTML 5來模擬出原生應用的界面效果，對于一些不熟悉開發的用戶來說，根本看不出這類應用與原生應用的差別。

另外，Dojo Mobile還擁有可定制的主題，如同樣的頁面在iOS用戶和Android用戶訪問時，看到的界面也許會完全不同（圖1-16為Dojo Mobile）。

Dojo Mobile與jQTouch都是基于WebKit內核的開發框架，但這卻并不代表它不能支持其他內核的瀏覽器。經過筆者的測試，它在Firefox和Chrome中都有著不俗的表現。

除這些之外，Dojo Mobile還有一個獨有的特點是非常值得其他幾款框架的開發者學習的，那就是Dojo Mobile本身在UI樣式中不使用圖片來加快瀏覽的速度，但是當應用中不可避免地需要圖片資源時，Dojo Mobile提供了一些有用的機制，如DOM button和CSS sprite來降低圖像需求并減少服務器的HTTP請求數量。

5.AppCan

AppCan是中國人自己開發的移動開發框架，也是國內Hybrid App混合模式開發的倡導者。AppCan應用引擎支持Hybrid App的開發和運行，并且著重解決了基于HTML 5的移動應用“不流暢”和“體驗差”的問題。使用AppCan應用引擎提供的Native交互能力，可以讓HTML 5開發的移動應用基本接近Native App的體驗（圖1-17為AppCan）。

與PhoneGap\Cordova支持單一WebView且使用DIV為單位開發移動應用不同，AppCan支持多窗口機制，讓開發者可以像開發最傳統的網頁一樣，通過頁面鏈接的方式靈活地開發移動應用。基于這種機制，開發者可以開發出大型的移動應用，而不是只開發簡易類型的移動應用。

與其他開發框架不同的是，AppCan提供了專門的IDE集成環境，并能夠調用移動設備的各個組件（如攝像頭、話筒等），開發者可以通過JS接口調用，輕松構建移動應用。

它的優點除能夠生成安裝文件和調用系統功能之外，更多的還是體現在“快”字上。AppCan生成的應用運行起來確實要流暢得多，但是由于開發門檻較低，使用AppCan的開發者總會受到或多或少的歧視，但是最近這一現象已經大有改觀。

6.PhoneGap/Cordova

PhoneGap是一款基于HTML、CSS和JavaScript的創建跨平臺移動應用程序的快速開發平臺。它使開發者能夠利用iPhone、Android、Palm、Symbian、WP、Bada和Blackberry智能手機的核心功能——包括地理定位、加速器、聯系人、聲音和振動等。此外PhoneGap還擁有豐富的插件，可以以此擴展無限的功能（圖1-18為PhoneGap架構圖）。

與前面介紹的幾款框架不同，PhoneGap并不帶有任何UI樣式，并且也無法獨立使用，但是它可以依靠各個平臺的IDE（如Android的Eclipse）將HTML文件生成相應的安裝文件。同時可以使HTML能夠調用系統功能，如發短信、GPS、手電筒等。整個流程的效果如圖1-19所示。目前，PhoneGap正式更名為Cordova。

7.Cocos2d-X

Cocos2d-X是一款比較獨特的開發框架，筆者截取了Cocos2d-X官網上的一些案例圖，如圖1-20所示。

有沒有覺得這些圖標非常熟悉？但好像有點不大對勁，為什么這些都是游戲？沒錯！Cocos2d-X其實是一款強大的跨平臺移動游戲開發框架。這么多的Top10 Gams竟然都出自于同一款開發框架，那么它的強大功能自然是毋庸置疑的。

8. APICloud

任何一款APP，集成SuperWebViewSDK后都可以大幅縮短迭代周期，APICloud支持功能動態增加，無須提交AppStore審核，用戶無須重新下載，比原生WebView具有更流暢更強大的用戶體驗。APICloud原理如圖1-21所示。