常用的移動(dòng)APP開發(fā)框架:
10多年的常山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整常山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“常山網(wǎng)站設(shè)計(jì)”,“常山網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
框架：PhoneGap
PhoneGap是一個(gè)用基于HTML，CSS和JavaScript的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。
優(yōu)點(diǎn)：
可跨平臺(tái)。phonegap框架幫我們解決了差異性，javascript與平臺(tái)系統(tǒng)的連接由phonegap框架完成。
提供硬件訪問控制?？烧{(diào)用加速計(jì)、攝像頭、羅盤、通訊錄、文檔、地理定位、媒體、網(wǎng)絡(luò)、通知。
可利用成熟javascript框架。如：Ext js、jQuery。
缺點(diǎn)：
性能差。運(yùn)行速度慢，UI反應(yīng)延時(shí)。
不能完全跨平臺(tái)。不同平臺(tái)代碼需要微調(diào)。
內(nèi)存消耗，調(diào)試難度大。
框架：Ionic
Ionic 是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開發(fā)框架，?Ionic 主要關(guān)注外觀和體驗(yàn)，以及應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動(dòng)應(yīng)用程序開發(fā)。 Ionic 是一個(gè)輕量的手機(jī) UI 庫，具有速度快，界面現(xiàn)代化、美觀等特點(diǎn)。
優(yōu)點(diǎn)：
輕量級(jí)框架，運(yùn)行速度快。
于 Angularjs，支持 Angularjs的特性， MVC ，代碼易維護(hù)。
通過 SASS 構(gòu)建應(yīng)用程序，接近原生。
缺點(diǎn)：
Ionic是一個(gè)前段框架。不能完全取代PhoneGap和JavaScript框架的作用。
需要結(jié)合插件使用。
框架：Hbuilder（國(guó)產(chǎn)）
HBuilder是DCloud（數(shù)字天堂）推出一款支持HTML5的Web開發(fā)IDE?！翱?，是HBuilder的最大優(yōu)勢(shì)。
優(yōu)點(diǎn)：
跨平臺(tái)：同時(shí)支持iOS、Android、Symbian、Windows Phone。
開發(fā)工具：基于Eclipse的開發(fā)工具，集成UI控件與應(yīng)用管理。
本地打包：無需配置環(huán)境，無需編譯，本地一鍵打包。
代碼加密：基于密鑰的加密方式，無法破解，像混編一樣保護(hù)html代碼。
技術(shù)支持：技術(shù)支持及時(shí)響應(yīng)，重視開發(fā)者建議和反饋。
缺點(diǎn)：
AppCan免費(fèi)版因需要把源代碼上傳到廠商的服務(wù)器上打包，對(duì)于企業(yè)開發(fā)來說源代碼泄露安全性上有一定風(fēng)險(xiǎn)。企業(yè)版雖然可以解決，但企業(yè)版穩(wěn)定尚待觀察。
AppCan采用封裝的組件，依賴性比較高。不是開源代碼。
ppCan 不能很好的解決原生代碼的功能。
Wex5(國(guó)產(chǎn))
WeX5應(yīng)用快速開發(fā)框架（含完整的SDK API及全部源碼），一次開發(fā)、跨端運(yùn)行。
優(yōu)點(diǎn)：
高效精致的UI組件體系，基于jquery和bootstrap技術(shù)，采用增強(qiáng)的RequireJS模塊化技術(shù)。
基于phonegap(cordova)框架，如相機(jī)、地圖、LBS定位、指南針、通訊錄、文件、語音、電池等。
可視化拖拽式集成開發(fā)環(huán)境IDE，全能力的調(diào)試支持和智能代碼提示。
缺點(diǎn)：
使用范圍有限：適用：一般app、電商app、客服app、會(huì)員app、微店微商等。
用戶量小，存在不穩(wěn)定因素。
總結(jié)：
跨平臺(tái)方面：大部分框架針對(duì)android和ios平臺(tái)，需要做或多或少的代碼調(diào)整，不能達(dá)到完全跨平臺(tái)。
性能方面：根據(jù)不完全統(tǒng)計(jì)，Ionic的性能會(huì)更好一點(diǎn)。
PhoneGap出現(xiàn)最早，國(guó)內(nèi)框架都是基于Phonegap開發(fā)出來的。
注意：
各框架在實(shí)現(xiàn)過程中都會(huì)遇到不同程度的坑，請(qǐng)根據(jù)框架的側(cè)重點(diǎn)謹(jǐn)慎選擇應(yīng)用的框架。如果要基于Html5開發(fā)App，還需要進(jìn)一步根據(jù)需求驗(yàn)證框架的可實(shí)施性、并進(jìn)行不同框架的效果對(duì)比。
1.離線緩存為HTML5開發(fā)移動(dòng)應(yīng)用提供了基礎(chǔ)
HTML5 Web Storage API可以看做是加強(qiáng)版的cookie，不受數(shù)據(jù)大小限制，有更好的彈性以及架構(gòu)，可以將數(shù)據(jù)寫入到本機(jī)的ROM中，還可以在關(guān)閉瀏覽器后再次打開時(shí)恢復(fù)數(shù)據(jù)，以減少網(wǎng)絡(luò)流量。
同時(shí)，這個(gè)功能算得上是另一個(gè)方向的后臺(tái)“操作記錄”，而不占用任何后臺(tái)資源，減輕設(shè)備硬件壓力，增加運(yùn)行流暢性。
在線app支持邊使用邊下載離線緩存，或者不下載離線緩存;而離線app必須是下載完離線
設(shè)計(jì)師要知道，什么時(shí)候讓用戶下載離線緩存(注意在線和離線app的區(qū)別)。
2.音頻視頻自由嵌入，多媒體形式更為靈活
原生開發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩，需要拆分開文字、圖片、音頻、視頻，解析對(duì)應(yīng)的URL并分別用不同的方式處理。
HTML5在這個(gè)方面完全不受限制，可以完全放在一起進(jìn)行處理。
設(shè)計(jì)師要知道，如果新聞?lì)?、微博類、社交類?yīng)用的信息呈現(xiàn)中實(shí)現(xiàn)文字與多媒體混排，而不用專門嵌入webview，將是一件多美好的事情，至少現(xiàn)在原生方式實(shí)現(xiàn)起來還有困難。
3.地理定位，隨時(shí)隨地分享位置
充分發(fā)揮移動(dòng)設(shè)備對(duì)定位上的優(yōu)勢(shì)，推動(dòng)LBS應(yīng)用發(fā)展。
可以綜合使用GPS、wifi、手機(jī)等方式讓定位更為精準(zhǔn)、靈活。
地理位置定位，讓定位和導(dǎo)航不再專屬導(dǎo)航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
設(shè)計(jì)師要知道，現(xiàn)在嵌入LBS功能的應(yīng)用越來越多，這也是移動(dòng)設(shè)備與臺(tái)式PC相比最大的優(yōu)勢(shì)之一，HTML5能把這個(gè)優(yōu)勢(shì)再度擴(kuò)大化，好好想想怎么在你設(shè)計(jì)的應(yīng)用里用上吧!
4.Canvas繪圖，提升移動(dòng)平臺(tái)的繪圖能力
使用Canvas API可以簡(jiǎn)單繪制熱點(diǎn)圖收集用戶體驗(yàn)資料
支持圖片的移動(dòng)、旋轉(zhuǎn)、縮放等常規(guī)編輯
Canvas – 2D的繪圖功能支持
Canvas 3D – 3D的繪圖功能支持
SVG – 向量圖支援
設(shè)計(jì)師要知道，圖片的移動(dòng)、旋轉(zhuǎn)、縮放?那都太基礎(chǔ)了，自己畫都是小case，至于怎么用，好好想想吧!
5.專為移動(dòng)平臺(tái)定制的表單元素
瀏覽器中出現(xiàn)的html5表單元素與對(duì)應(yīng)的鍵盤：
只需要簡(jiǎn)單的聲明 input type=”email” 即可完成對(duì)不同樣式鍵盤的調(diào)用，簡(jiǎn)捷方便。
設(shè)計(jì)師要知道，用的時(shí)候記得告訴研發(fā)同事一聲!
6.豐富的交互方式支持
提升互動(dòng)能力：拖拽、撤銷歷史操作、文本選擇等
Transition – 組件的移動(dòng)效果
Transform – 組件的變形效果
Animation – 將移動(dòng)和變形加入動(dòng)畫支持
設(shè)計(jì)師要知道，HTML5提供的交互方式是非常豐富的，至于用不用得上，那是你自己的事兒嘍!
7.HTML5使用上的優(yōu)勢(shì)
更低的開發(fā)及維護(hù)成本;
使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低;
方便升級(jí)，打開即可使用最新版本，免去重新下載升級(jí)包的麻煩，使用過程中就直接更新了離線緩存。
設(shè)計(jì)師要知道，用戶想要什么，HTML5能提供給用戶什么。
8.CSS3 視覺設(shè)計(jì)師的輔助利器
CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動(dòng)畫功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸變、陰影
Border background – 邊框的背景支持
使用CSS3來完成部分視覺工作，載入速度快，節(jié)省代碼及圖片，也為用戶節(jié)約了帶寬。
設(shè)計(jì)師要知道，一個(gè)界面里幾十張素材圖的方式已經(jīng)太out啦，趕快讓CSS3幫你偷懶。
9.實(shí)時(shí)通訊
以往網(wǎng)站由于HTTP協(xié)議以及瀏覽器的設(shè)計(jì)，實(shí)時(shí)的互動(dòng)性相當(dāng)?shù)氖芟?，只能使用一些技巧來「仿真」?shí)時(shí)的通訊效果，但HTML5提供了完善的實(shí)時(shí)通訊支持。
設(shè)計(jì)師要知道，應(yīng)用中嵌入實(shí)時(shí)通信、信息內(nèi)容進(jìn)行實(shí)時(shí)提醒，HTML5可以幫你實(shí)現(xiàn)。
10.檔案以及硬件支持
不知道大家有沒有發(fā)現(xiàn)，在Gmail等新的網(wǎng)頁程序當(dāng)中，已經(jīng)可以透過拖拉的方式將檔案作為郵件附件?這就是HTML5檔案的功能中的Drag’n Drop和File API。
設(shè)計(jì)師要知道，移動(dòng)應(yīng)用中對(duì)于數(shù)據(jù)傳輸?shù)男枨笤絹碓酱?，傳統(tǒng)的路徑選擇方式太過于繁瑣，快來試試HTML5的拖拽上傳功能吧!
11.語意化
語意化的網(wǎng)絡(luò)是可以讓計(jì)算機(jī)能夠更加理解網(wǎng)頁的內(nèi)容，對(duì)于像是搜索引擎的優(yōu)化(SEO)或是推薦系統(tǒng)可以有很大的幫助。
設(shè)計(jì)師要知道，HTML5能讓搜索更快速、更準(zhǔn)確。
12.雙平臺(tái)融合的app開發(fā)方式，提高工作效率
依照目前iPhone/Android 迅速提升市占率的情勢(shì)來看，未來如果想要在先進(jìn)的智慧型手機(jī)上撰寫應(yīng)用程式，要不是選擇使用Objective-C + CocoaTouch Framework 撰寫iPhone/iPad 應(yīng)用程式，就是選擇Java + Android Framework 撰寫Android 應(yīng)用程式，如果想要同時(shí)支援兩種平臺(tái)，勢(shì)必要維護(hù)兩套程式碼，對(duì)于剛起步的小服務(wù)而言也算是個(gè)小有負(fù)擔(dān)的維運(yùn)成本。
使用HTML5, CSS3 來撰寫Web-based 的應(yīng)用程式，若要同時(shí)支援iPhone 及Android，幾乎只需要維護(hù)一份程式碼(少部份要因應(yīng)clients 作修改)，而且未來若有其它行動(dòng)裝置擁有支援HTML5 的瀏覽器，那同樣的WebApp 直接就多了一個(gè)支援平臺(tái)。
Google 的系列服務(wù)使用了不少HTML5 中的cache、storage 及database 規(guī)格來做到離線存取程式的效果。因?yàn)楸绕鹱烂鎽?yīng)用程式，行動(dòng)裝置的網(wǎng)路連線更不穩(wěn)定，而且有時(shí)在移動(dòng)中并無網(wǎng)路可以使用，透過這些技術(shù)才能讓使用者即使在 無網(wǎng)路環(huán)境下繼續(xù)使用你的webapp。這說明html5主要服務(wù)對(duì)象還是給予web的應(yīng)用，并不會(huì)對(duì)全部app開發(fā)造成威脅，這樣有利于不同類型應(yīng)用使 用不同的開發(fā)方式，靈活性更強(qiáng)。
HTML5的設(shè)計(jì)目的是為了在移動(dòng)設(shè)備上支持多媒體。新的語法特征被引進(jìn)以支持這一點(diǎn)，如video、audio和canvas 標(biāo)記。HTML5還引進(jìn)了新的功能，可以真正改變用戶與文檔的交互方式，包括：epub360 等H5編輯工具都是圍繞這個(gè)標(biāo)準(zhǔn)設(shè)計(jì)的：
· 新的解析規(guī)則增強(qiáng)了靈活性
· 新屬性
· 淘汰過時(shí)的或冗余的屬性
· 一個(gè)HTML5文檔到另一個(gè)文檔間的拖放功能
· 離線編輯
· 信息傳遞的增強(qiáng)
· 詳細(xì)的解析規(guī)則
· 多用途互聯(lián)網(wǎng)郵件擴(kuò)展（MIME）和協(xié)議處理程序注冊(cè)
· 在SQL數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)的通用標(biāo)準(zhǔn)（Web SQL）
HTML5在2007年被萬維網(wǎng)聯(lián)盟(W3C)新的工作組采用。這個(gè)工作組在2008年1月發(fā)布了HTML 5的首個(gè)公開草案。眼下，HTML5處于“呼吁審查”狀態(tài)，W3C預(yù)期它將在2014年年底達(dá)到其最終狀態(tài)。
特性
HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。
本地存儲(chǔ)特性（Class: OFFLINE STORAGE）
基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說明文檔。
設(shè)備兼容特性 (Class: DEVICE ACCESS)
從Geolocation功能的API文檔公開以來，HTML5為網(wǎng)頁應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。
連接特性（Class: CONNECTIVITY）
更有效的連接工作效率，使得基于頁面的實(shí)時(shí)聊天，更快速的網(wǎng)頁游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。
網(wǎng)頁多媒體特性(Class: MULTIMEDIA)
支持網(wǎng)頁端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。
三維、圖形及特效特性（Class: 3D, Graphics Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺效果。
性能與集成特性（Class: Performance Integration）
沒有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過XMLHttpRequest2等技術(shù)，解決以前的跨域等問題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。
CSS3特性(Class: CSS3)
在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。
HTML的全稱是超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。HTML是由HTML命令組成的描述性文本，可以解釋文字、圖形、動(dòng)畫、聲音、表格、鏈接等。Html是一種用來描述網(wǎng)頁的語言。它被稱為超文本標(biāo)記語言，它是一種標(biāo)記語言。它包括一系列標(biāo)簽，可以統(tǒng)一網(wǎng)絡(luò)上文檔的格式，將分散的互聯(lián)網(wǎng)資源連接成一個(gè)邏輯整體。
1.離線緩存為HTML5全棧開發(fā)移動(dòng)應(yīng)用提供了基礎(chǔ)
2.音頻視頻自由嵌入，多媒體形式更為靈活
原生開發(fā)方式對(duì)于文字和音視頻混排的多媒體內(nèi)容處理相對(duì)麻煩，需要拆分開文字、圖片、音頻、視頻，解析對(duì)應(yīng)的URL并分別用不同的方式處理。
HTML5在這個(gè)方面完全不受限制，可以完全放在一起進(jìn)行處理。
3.地理定位，隨時(shí)隨地分享位置
充分發(fā)揮移動(dòng)設(shè)備對(duì)定位上的優(yōu)勢(shì)，推動(dòng)LBS應(yīng)用發(fā)展。
可以綜合使用GPS、wifi、手機(jī)等方式讓定位更為精準(zhǔn)、靈活。
地理位置定位，讓定位和導(dǎo)航不再專屬導(dǎo)航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
4.Canvas繪圖，提升移動(dòng)平臺(tái)的繪圖能力
使用Canvas API可以簡(jiǎn)單繪制熱點(diǎn)圖收集用戶體驗(yàn)資料
支持圖片的移動(dòng)、旋轉(zhuǎn)、縮放等常規(guī)編輯
5.專為移動(dòng)平臺(tái)定制的表單元素
6.豐富的交互方式支持
提升互動(dòng)能力：拖拽、撤銷歷史操作、文本選擇等
7.HTML5使用上的優(yōu)勢(shì)
更低的開發(fā)及維護(hù)成本；
使頁面變得更小，減少了用戶不必要的支出；而且，性能更好使耗電量更低；
方便升級(jí)，打開即可使用最新版本，免去重新下載升級(jí)包的麻煩，使用過程中就直接更新了離線緩存。
重慶分公司
重慶分公司
