篇一：使用HTML5開發手機APP分享
使用HTML5開發手機APP經驗分享
一、淺談HTML5發展 ....................................................................................................................... 2
二、HTML5開發手機APP過去的劣勢與當前的優勢 .................................................................... 2
三、認識Hbuilder開發工具及MUI框架 ..................................................................................... 3
a) 效能 ..................................................................................................................................... 3
b) 工具 ..................................................................................................................................... 3
c) 能力 ..................................................................................................................................... 3
d) 最接近原生體驗的高效能框架 ......................................................................................... 4
四、開發案例 ................................................................................................................................... 5
五、HTML5開發手機APP心得 ........................................................................................................ 8
一、淺談HTML5發展
未來App的市場呈現一片光明景象，而對於移動開發商來說，不同平臺的應用則需要開發不同的A
pp來支援，無論在更新及維護上都需要一定的成本。於是更多人想到了基於HTML5的Web App，目前主流作業系統iOS、Android以及Windows Phone的瀏覽器都對於html5大部分特性的支援也更加突顯HTML5在未來移動裝置端的地位。
Html5的特性在於對於開發者，可以更多地跨裝置、跨平臺使用。強大的跨平臺性也為企業大大降低了開發成本、豐富的標籤體系，也大大降低了應用開發的技術門檻。
二、HTML5開發手機APP過去的劣勢與當前的優勢
過去的HTML5切頁白屏、轉場卡頓、下拉重新整理不流暢、側滑選單不流暢，HTML5技術無法對硬體底層的功能進行呼叫。眾多問題逼迫開發者只能用原生技術解決。
優勢：1.離線快取，2.音訊視訊自由嵌入，多媒體形式更為靈活，3、Canvas繪圖，提升移動平臺的繪圖能力4、專為移動平臺定製的表單元素
三、認識Hbuilder開發工具及MUI框架
a) 效能：提升HTML5效能的手機端引擎，讓側滑選單、下拉重新整理等動態互動卡頓的問題得以解決;
b) 工具：HTML5開發IDE產品HBuilder, 超快的程式設計利器;封裝成跨平臺的HTML5plus規範，並將規範公開於。包括二維碼、搖一搖、語音輸入、地圖、支付、分享、檔案系統、通訊錄等常用API，可以方便簡單的編寫，並且可跨平臺。
c) 能力：把40萬原生API封裝成JavaScript物件，以解決HTML5能力不足問題的技術;技術即在js中編寫原生程式碼技術，突破瀏覽器的限制
d) 最接近原生體驗的高效能框架：MUI框架，體積只有幾十K，載入、執行遠快於一般框架。
HTML5plus Runtime，簡稱5+ Runtime，是運行於手機端的強化web引擎，除了支援標準HTML5外，還支援更多擴充套件的js api，使得js的能力不輸於原生。5+ Runtime內置於HBuilder，在真機執行、打包時自動掛載。如果說把js的戰火燒到了伺服器端，那麼把js戰火燒到了原生應用戰場。但我們可以使用js直接調原生API，語法是js語法，API命名是原生命名。
HTML5 App的效能低下，有webview自身的效能問題，也有前端框架的效能問題。
HTML5!=傳統瀏覽器，雖然程式語言還是HTML、Javascript、CSS，但發行方式絕不是傳統網站那麼簡單。HTML5應用的入口，反而很少是啟動瀏覽器輸入URL，它可以是存在於手機桌面的圖示、也可以來自超級App(如微信朋友圈)、以及搜尋引擎、應用市場、廣告聯盟，到處都是它的入口。它的入口，比原生App更多。
通過HBuilder、5+ Runtime、mui，我們很好的解決了HTML5的
障礙，做到了與原生App一致的功能和體驗。相關資源可登陸網站 /retype/zoom/89310a21960590c69ec376bc?pn=5&x=0&y=1433&raww=1366&rawh=724&o=png_6_0_0_135_503_622_288_892.979_1262.879&type=pic&aimh=254.40702781844803&md5sum=8f8c43f9a44e8d05c941c2adb6e13ab1&sign=9bd8b036ac&zoom=&png=63370-95075&jpg=0-0" target="_blank">點此檢視
2、點選新建移動App，彈出介面，並在應用名稱中填寫專案名字，選擇模板中的mui專案
篇二：html5手機客戶端開發
html5手機客戶端開發
Html5初始是為網際網路網頁編寫語言，隨著移動網際網路的發展，手機客戶端開發需求急劇上升，app客戶端開發公司（啟匯網路）把html5應用在了手機客戶端開發上，效果很不錯。HTML5是偉大的，因為它多才多藝的—它沒有具體針對單一的平臺。更重要的是，HTML5是無所不在的。就我所知的，它在你的PC上，你的手機客戶端上，你的平板裝置上，甚至在你的廚房電器上。
很多手機客戶端開發者都看重html5語言，並靈活應用在客戶端開發上。其中html5客戶端開發主要應用在遊戲開發上面。主要是它在遊戲app中擁有無法比擬的優勢。且看啟匯網路html5手機開發者是怎麼使用它的。
1：使用html5框架開發手機客戶端
編寫簡單遊戲在HTML5中是很容易的，但是當你押寶在HTML5上，你就需要做更多的準備，確保遊戲順利執行。
當你使用了很多的圖片，聲音效果，和其它的資源，它們會花費一些時間等待瀏覽器從伺服器下載。如果在編寫遊戲手機客戶端時， 你不把它放在心上， 你會焦頭爛額。因為圖片和聲音檔案是非同步載入的，你的JavaScript程式碼會在資源全部載入完成前執行。這常常導致"popping"(圖片不可用)，聲音效果在需要時不播放。好的修正方法是建立一個預載入器，延後指令碼程式碼的執行，直到所有的資源都下載完畢為止。
實際上， 每個遊戲html5客戶端開發都很多功能性的樣板程式碼。幸運的是， 你不必自己從頭編寫。有很多框架讓你僅關注遊戲邏輯， 而不是去擔心這些瑣碎(和大)的事， 確保你的遊戲順利執行。
2：認真考慮小的和觸控式螢幕的裝置
3：使html5手機開發自動儲存玩家進度
4：使用html5開發監控器
5：創意性的html5手機開發
可以說，HTML5不光在技術上是有趣的，瀏覽器本身也是一個完美的遊戲平臺。
如果你是一個HTML5開發遊戲的新手，可能編寫你曾經玩過的線下游戲的克隆會很誘人。這種做法沒有錯誤。但是，如果你想讓做線上遊戲， 現在是一個好的機會， 請拿出全新的， 極具創意的.遊戲理念。
Tag：html5客戶端開發，html5手機開發客戶端，html5開發客戶端
篇三：Html5技術的優勢與應用
Html5技術的優勢與應用
隨著網路與新媒體的高速發展，Html5標準在正式推出之後，藉由微信等平臺的巨大傳播力，各種Html5遊戲和專題頁面紛紛嶄露頭角，越來越多地出現在人們的視野中。
Html5是全球資訊網的核心語言、標準通用標記語言下的一個應用超文字標記語言（HTML）的第五次重大修改。目前，Html5技術正處於不斷髮展的過程中，作為移動輕應用，它在未來具有無限可能，潛力巨大。
Html5技術的優勢
Html5之所以被人們廣泛接納，與其獨特性密切相關。它擁有眾多特點：一是開發成本低，僅為開發客戶端成本的1/5甚至1/10。
二是免去適配多個平臺的困擾，跨平臺使用。對於平臺的跨越，減輕了平臺障礙，便於開發應用。
三是在維護方面，H5不用像客戶端那樣需要經常升級，它可以實時更新，有問題立即響應。
四是互動性強，便於產品的快速迭代。移動網際網路是一個"快魚吃慢魚"的時代，誰對使用者的需求滿足得更快，誰的試錯成本更低，誰就擁有巨大的優勢。
五是無安裝門檻，更容易推廣、爆發且推廣成本低。對於使用者來說，H5大大降低了使用者的使用門檻，他們只需輕輕一點即可滿足需求。而且H5應用導流非常容易，超級APP（如微信）、搜尋引擎、應用市場、瀏覽器……到處都是H5的流量入口，而原生APP的流量入口只有應用市場，所以H5的推廣成本更低。
六是儲存方面，Html5中最酷的特性就是本地儲存。它支援多個Windows儲存，擁有更好的安全和效能，即使瀏覽器關閉後也可以儲存。因為它是個客戶端的資料庫，使用者不用擔心刪除任何cookie，並且所有主流瀏覽器都支援。本地儲存對於很多情況來說都不錯，它是HTML5工具中一個不需要第三方外掛實現的。能夠儲存資料到使用者的瀏覽器中，意味著你可以簡單地建立一些應用特性，例如：儲存使用者資訊、快取資料、載入使用者上一次的應用狀態。
七是開源生態系統發達。Html5前端是開放的正反饋迴圈生態系統，大量的開源庫可以使用，開發應用變得更輕鬆、更敏捷，當然這也體現在快速迭代和成本下降上，不過更重要的是，這種開放的正反饋迴圈生態系統未來的生命力比原生生態系統更強勁。
八是開放的資料交換。開發者可以讓手機搜尋引擎很容易檢索到自己的資料，也更容易通過跨應用協作來滿足使用者需求。
Html5技術的應用
如今，人們對Html5的認知往往在Html5介面上，Html5介面即利用Html5技術進行設計的一些精美頁面。Html5頁面開始成為國民手機中的一支騎兵：無論是各類基於Html5頁面開發的小遊戲，還是當前較為流行的邀請函、招聘廣告，乃至人民網、網易、騰訊等網路開發的Html5新聞頁面，都試圖通過這種觸碰、滑動為第一接觸方式的頁面技術，向用戶推薦產品、傳播資訊。當前，Html5頁面也成為各大商家和網路公關傳播者普遍採取的表現形式。當下，比較流行的Html5頁面製作軟體有未來應用等。
隨著手機硬體的升級，Html5技術的發展以及微信等平臺的開放，Html5的跨平臺、低成本、快迭代等優勢將會進一步凸顯，而這對身處移動網際網路大潮中的企業主、品牌設計師和開發者來說，都將是一個最好的時代。
