1. 程式人生 > >基於H5的移動端APP開發框架

基於H5的移動端APP開發框架

快速增長的APP應用軟體市場,以及智慧手機的普及,手機應用:Native(原生)APP快速佔領了APP市場,成為了APP開發的主流,但其平臺的不通用性,開發成本高,多版本開發等問題,一直困擾著專業APP開發企業,和APP服務提供商。 安卓和IOS的操作方式,開發模式,介面UI顯示方面的差別,也使得原生APP的不同版本體驗有很大的區別,光是做相容性調測,都要花費開發企業不少的時間。

   近年來,另一種應用形態——基於HTML5技術的Web App也如雨後春筍般出現,於是關於原生APP與HTML5 APP 誰將成為未來的王者,APP開發者們一直爭論不休。

html5最主要的優勢: 
1、一套HTML5 APP 即可同時適用安卓及IOS平臺,甚至WP平臺,適配性和統一體驗較好。
  2、版本伺服器端更新,使用者永遠看到的都是最新的APP端資訊。
  3、手機客戶端及儲存資料較少,節約使用者手機空間
  4、技術難度較低,開發工作量小,開發成本低。
 **侷限性:**
 使用者體驗大幅落後於原生APP,操作的流暢度,程式的執行效率,與原生APP都有較大差距;HTML5 APP 受網速的影響較大,在網路情況較差的情況下,HTML5 APP 往往連開啟都困難,而原生程式,基本都能順利開啟執行(只是速度較慢)。

 因公司專案需求,近端時間研究html5 app開發框架,發現有很多,查資料總結下。

1.框架:PhoneGap 
官網:http://phonegap.com/ 
簡介: PhoneGap是一個用基於HTML,CSS和JavaScript的,建立移動跨平臺移動應用程式的快速開發平臺。它使開發者能夠利用iPhone,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry智慧手機的核心功能——包括地理定位,加速器,聯絡人,聲音和振動等,此外PhoneGap擁有豐富的外掛,可以呼叫。 
優點:1.可跨平臺。phonegap框架幫我們解決了差異性,javascript與平臺系統的連線由phonegap框架完成。成為連線移動終端的介面卡,或者說中介軟體。 
2.提供硬體訪問控制。可呼叫加速計、攝像頭、羅盤、通訊錄、文件、地理定位、媒體、網路、通知(警告、聲音和振動)、儲存。 
3.可利用成熟

JavaScript框架。如:Ext jsjQuery。 
缺點:1.效能差。執行速度慢,UI反應延時——這是個致命傷。(高階機影響不大) 
2.不能完全跨平臺。不同平臺程式碼需要微調。 
3.記憶體消耗大。 
4.除錯難度大。

2.框架:Ionic 
官網:http://ionicframework.com/ 
簡介: Ionic 是一個強大的 html5 應用程式開發框架,號稱 Advanced Html5 Hybrid Mobile AppFramework 是 AngularJS 移動端解決方案 可以幫助您使用 Web 技術,比如 HTML、 CSS 和Javascript 構建接近原生體驗的移動應用程式。 Ionic 主要關注外觀和體驗,以及和你的應用程式的 UI 互動,特別適合用於基於 Hybird 模式的 HTML5 移動應用程式開發。 Ionic 是一個輕量的手機 UI 庫,具有速度快,介面現代化、美觀等特點。為了解決其他一些UI 庫在手機上執行緩慢的問題。 
優點:1.追求效能 執行速度快 
2.輕量級框架 
3.基於 

angularjs,支援 Angularjs的特性, MVC ,程式碼易維護 
4.通過 SASS 構建應用程式。它提供了很多 UI 元件來幫助開發者開發強大的應用。 
5.接近原生。 
6.強大的命令列工具 
3.可利用成熟javascript框架。如:Ext js、jquery。 
缺點:1.Ionic是一個前段框架。不能完全取代PhoneGap和JavaScript框架的作用 
2.需要結合外掛使用。

3.框架:Hbuilder(國產) 
官網:http://dcloud.io/ 
簡介: HBuilder是DCloud推出一款支援HTML5的Web開發IDE。“快,是HBuilder的最大優勢,通過完整的語法提示和程式碼輸入法、程式碼塊及很多配套,HBuilder能大幅提升HTML、js、css的開發效率。 
優點:1、HTML5語法、HTML5+語法、三大瀏覽器擴充套件語法,盡收HBuilder中。 
2、每個瀏覽器釋出新版後,一週內,其新增語法就收錄入HBuilder。 
3、強大到令你震驚的Jquery語法提示! 
4、每個語法在哪個瀏覽器、哪個版本上是否可執行,這裡都有。 
5、沒有比這裡更全的語法庫,也沒有比這裡更全的瀏覽器相容性資料庫。 
缺點:1.雲端編譯,無法保證安全性。 
2.不能完全跨平臺。不同平臺程式碼需要微調。

4.框架:appcan(國產) 
官網:http://www.appcan.cn/ 
簡介:AppCan是國內Hybrid App混合模式開發的倡導者,AppCan應用引擎支援Hybrid App的開發和執行。並且著重解決了基於HTML5的移動應用”不流暢”和”體驗差”的問題。使用AppCan應用引擎提供的Native互動能力,可以讓HTML5開發的移動應用基本接近Native App的體驗。 
與Phonegap支援單一webview使用div為單位開發移動應用不同。AppCan支援多視窗機制,讓開發者可以像最傳統的網頁開發一樣,通過頁面連結的方式靈活的開發移動應用。基於這種機制,開發者可以開發出大型的移動應用,而不是隻能開發簡易型別的移動應用。 
AppCan提供強大的裝置呼叫能力,電話、簡訊、相機、LBS、感測器、資料庫等常用的手機功能,開發者可以通過JS介面呼叫,輕鬆構建移動應用。 
優點:1.跨平臺:同時支援iOSandroid、Symbian、Windows Phone 
2.原生體驗:引入原生UI控制元件與互動支援(如Action Sheet等) 
3.開發工具:基於Eclipse的開發工具,整合UI控制元件與應用管理 
4.UI框架:提供強大的UI框架,更加易於實現頁面佈局與互動 
5.裝置API:支援各種手機裝置呼叫,如電話、相機、感測器、定位等 
6.本地打包:無需配置環境,無需編譯,本地一鍵打包 
7.外掛機制:支援第三方原生外掛,支援JS外掛 
8.程式碼加密:基於金鑰的加密方式,無法破解,像混編一樣保護html程式碼 
統計分析:應用分平臺安裝數統計,應用啟動和使用情況統計 
9.開放平臺:更具本土優勢,已經對接Sina、QQ、百度等開放平臺 
10.技術支援:技術支援及時響應,重視開發者建議和反饋 
缺點:1.AppCan免費版因需要把原始碼上傳到廠商的伺服器上打包,對於企業開發來說原始碼洩露安全性上有一定風險。企業版雖然可以解決,但企業版穩定尚待觀察。 
2.AppCan採用封裝的元件,依賴性比較高。不是開原始碼。 
3.AppCan 不能很好的解決原生程式碼的功能。

5.框架:Wex5(國產) 
官網:http://wex5.com/ 
簡介:WeX5應用快速開發框架(含完整的SDK API及全部原始碼),一次開發、跨端執行。 
【定位】開發面向消費者和公眾的開放應用系統 
【適用】一般app、電商app、客服app、會員app、微店微商等 
【前端】安卓app/蘋果app/微信服務號/PC web app 
【後端】後端資料處理元件,對接各主流技術平臺 
【費用】完全開源,徹底免費,無任何限制 
優點:1.高效精緻的UI元件體系,基於jquery和bootstrap技術,採用增強的RequireJS模組化技術。 
2.基於phonegap(cordova)框架,如相機、地圖、LBS定位、指南針、通訊錄、檔案、語音、電池等。 
3.視覺化拖拽式整合開發環境IDE,全能力的除錯支援和智慧程式碼提示 
缺點:1.使用範圍有限:適用:一般app、電商app、客服app、會員app、微店微商等 
2.使用者量小,存在不穩定因素。

6.框架:ApiCloud(國產) 
官網:http://www.apicloud.com/ 
簡介:APICloud是中國領先的“雲端一體”的移動應用雲服務提供商。APICloud推行“雲端一體”的理念,重新定義了移動應用開發。APICloud為開發者從“雲”和“端”兩個方向提供API,簡化移動應用開發技術,讓移動應用的開發週期從一個月縮短到7天。APICloud由“雲API”和“端API”兩部分組成,可以幫助開發者快速實現移動應用的開發、測試、釋出、管理和運營的全生命週期管理。 
APICloud致力成為中國領先的移動垂直領域雲服務商,幫助傳統軟體公司從B/S架構成功走向APP,幫助中國數百萬web開發者轉化成移動APP專家!。 
優點:1.提供開發的IDE。 
2.提供資料雲API、統計雲API、推送雲API 
缺點:與Hbuilder存在版權問題,抄襲Hbuilder

7、JQuery Mobile 
1.官方網站:http://jquerymobile.com/ 
2.性質:UI框架 
3.說明:這個大名鼎鼎的JQuery的移動版本。跟JQuery一樣是一個輕量級的JS庫,一樣使用HTML5+CSS+JS的技術。應為輕量級,所以在web載入時比Sencha有一點優勢。缺點顯而易見,UI控制元件太少了。因為JQuery Mobile 太普及了,也有很多第三方的擴充套件控制元件庫例如JQuery Mobile Touch。比較有意思的是Sencha Touch 也融合了JQuery Mobile Touch。 
4.授權:完全開源,放心使用

不同的開發框架有不同的優缺點,使用哪個還需要根據需求針對性的選用

轉自:https://www.cnblogs.com/Free-Thinker/p/7380674.html