一、概述
HTML5（超文本標(biāo)記語言第五版）是互聯(lián)網(wǎng)時(shí)代中一種新的文本標(biāo)記語言，又被稱為“互聯(lián)網(wǎng)的操作系統(tǒng)”。它不僅繼承了之前的HTML（超文本標(biāo)記語言），同時(shí)具備了支持當(dāng)前WEB多媒體的技術(shù)特性，同時(shí)還具有離線緩存、音視頻播放、Web音頻及webGL等技術(shù)，能夠提供更好的用戶體驗(yàn)效果，因此成為網(wǎng)頁制作中必須學(xué)習(xí)的技術(shù)之一。
而關(guān)于利用HTML5做手機(jī)APP就不同了?？梢岳斫鉃椋豪肳eb技術(shù)（包括HTML、CSS、Javascript等）編寫出移動(dòng)端的應(yīng)用程序，與其它的原生應(yīng)用相似（比如我們熟知的微信、QQ等），讓你的網(wǎng)絡(luò)應(yīng)用能在手機(jī)端運(yùn)行。
二、原理
知道了HTML5做手機(jī)APP的定義，下面我們來看看它的原理。
內(nèi)核Webview是利用HTML5成為手機(jī)APP不可或缺的關(guān)鍵技術(shù)，不同的手機(jī)系統(tǒng)都有自帶的內(nèi)核進(jìn)行支持，如比較常用的Android有Chromium、iOS有WebKit。
在基于HTML5開發(fā)的APP中，使用到的HTML5相關(guān)技術(shù)主要包括Canvas、Audio、Video、Device API等。通過這些技術(shù)，可以將代碼編寫成一個(gè)類似原生應(yīng)用程序的形式。
三、步驟
下面我們進(jìn)入到實(shí)踐環(huán)節(jié)，從開發(fā)工具、環(huán)境、代碼編寫和打包等方面做詳細(xì)介紹。
1、開發(fā)工具和環(huán)境
首先，介紹一下幾款常用的開發(fā)工具：
a、PhoneGap：一款非常出色的開源HTML5+CSS3+JS的跨平臺(tái)應(yīng)用程序開發(fā)軟件。它可以將HTML5的網(wǎng)頁應(yīng)用轉(zhuǎn)化為移動(dòng)應(yīng)用程序，跨平臺(tái)支持Android、IOS以及很多其它操作系統(tǒng)，而且可以使用HTML、CSS和JavaScript進(jìn)行開發(fā)。它的好處是提供了一系列的手機(jī)APP操作的API，以及對(duì)軟件保護(hù)和加密技術(shù)支持。
b、Cordova：Apache 的開源項(xiàng)目，是一個(gè)用于構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序的框架。它允許使用標(biāo)準(zhǔn)的Web技術(shù)（HTML、CSS、JavaScript等）設(shè)計(jì)和開發(fā)移動(dòng)應(yīng)用程序，并且可以在多種平臺(tái)（Android、iOS等）上運(yùn)行。
c、Sencha Touch：是一個(gè)基于ExtJS的框架，是專門為手機(jī)而設(shè)計(jì)的，方便與原生移動(dòng)端的應(yīng)用進(jìn)行整合。
至于開發(fā)環(huán)境的選擇，一般來說推薦使用本地瀏覽器運(yùn)行，并且在代碼編寫完成以后使用真機(jī)進(jìn)行測試。開發(fā)過程中可以使用一些調(diào)試工具、模擬器等進(jìn)行幫助，包括Chrome的手機(jī)調(diào)試插件、模擬器Genymotion等等。
2、代碼編寫
a、設(shè)置viewport和rem
在編寫HTML5代碼時(shí)，首先需要注意的是設(shè)置viewport和rem，這是保證手機(jī)端顯示比例統(tǒng)一的關(guān)鍵。
meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”/
上述代碼是viewport設(shè)置的范本，同時(shí)也需要對(duì)rem進(jìn)行設(shè)置，一般是在最上層的樣式表里進(jìn)行設(shè)置。
/*在iPhone5上，1rem = 20px*/
html {
font-size: 20px;
}
@media only screen and (max-width: 320px) {
html {
font-size: 14px;
}
}
b、使用H5的特性
在APP中，可以大量運(yùn)用HTML5開發(fā)中的技術(shù)，包括Canvas、Audio、Video等特性。比如就可以使用Canvas來實(shí)現(xiàn)繪圖、動(dòng)畫等效果，使用Audio元素來播放音樂等。
c、更多代碼細(xì)節(jié)自己嘗試學(xué)習(xí)吧，此處就不再貼出代碼（哈哈）
3、打包發(fā)布
在有了HTML、CSS、JavaScript代碼的基礎(chǔ)上，還需進(jìn)行打包發(fā)布，方便用戶進(jìn)行體驗(yàn)。
a、打包
其中，PhoneGap則需要使用自身提供的打包工具進(jìn)行打包（親測打包時(shí)間很長，90多分鐘）。
Cordova支持通過命令行進(jìn)行打包，使用crodova build即可實(shí)現(xiàn)。
b、發(fā)布
發(fā)布APP時(shí)，需要把打好的包上傳至App Store或Google Play, 而發(fā)布HTML5應(yīng)用，應(yīng)該考慮到使用在線分發(fā)方式。在線分發(fā)的方案有很多，包括直接將代碼上傳至WEB服務(wù)器，然后讓用戶進(jìn)行下載。
四、總結(jié)
以上就是利用HTML5開發(fā)手機(jī)APP的原理以及運(yùn)用到的技術(shù)，日常開發(fā)中所需考慮的問題，僅是淺淺蹭過而已。對(duì)于已經(jīng)精通Web技術(shù)的人來說并不算難，而對(duì)于初學(xué)者來說還是會(huì)有很多的不懂之處。
但不管怎么樣，運(yùn)用HTML5開發(fā)手機(jī)APP確實(shí)可以在短時(shí)間內(nèi)實(shí)現(xiàn)跨平臺(tái)的開發(fā)需求，同時(shí)也是可以節(jié)省開發(fā)成本，縮短開發(fā)周期，提高開發(fā)效率的。
