一、概述

HTML5（超文本標記語言第五版）是互聯網時代中一種新的文本標記語言，又被稱為“互聯網的操作系統”。它不僅繼承了之前的HTML（超文本標記語言），同時具備了支持當前WEB多媒體的技術特性，同時還具有離線緩存、音視頻播放、Web音頻及webGL等技術，能夠提供更好的用戶體驗效果，因此成為網頁制作中必須學習的技術之一。

而關于利用HTML5做手機APP就不同了?？梢岳斫鉃椋豪肳eb技術（包括HTML、CSS、Javascript等）編寫出移動端的應用程序，與其它的原生應用相似（比如我們熟知的微信、QQ等），讓你的網絡應用能在手機端運行。

二、原理

知道了HTML5做手機APP的定義，下面我們來看看它的原理。

內核Webview是利用HTML5成為手機APP不可或缺的關鍵技術，不同的手機系統都有自帶的內核進行支持，如比較常用的Android有Chromium、iOS有WebKit。

在基于HTML5開發的APP中，使用到的HTML5相關技術主要包括Canvas、Audio、Video、Device API等。通過這些技術，可以將代碼編寫成一個類似原生應用程序的形式。

三、步驟

下面我們進入到實踐環節，從開發工具、環境、代碼編寫和打包等方面做詳細介紹。

1、開發工具和環境

首先，介紹一下幾款常用的開發工具：

a、PhoneGap：一款非常出色的開源HTML5+CSS3+JS的跨平臺應用程序開發軟件。它可以將HTML5的網頁應用轉化為移動應用程序，跨平臺支持Android、IOS以及很多其它操作系統，而且可以使用HTML、CSS和JavaScript進行開發。它的好處是提供了一系列的手機APP操作的API，以及對軟件保護和加密技術支持。

b、Cordova：Apache 的開源項目，是一個用于構建跨平臺的移動應用程序的框架。它允許使用標準的Web技術（HTML、CSS、JavaScript等）設計和開發移動應用程序，并且可以在多種平臺（Android、iOS等）上運行。

c、Sencha Touch：是一個基于ExtJS的框架，是專門為手機而設計的，方便與原生移動端的應用進行整合。

至于開發環境的選擇，一般來說推薦使用本地瀏覽器運行，并且在代碼編寫完成以后使用真機進行測試。開發過程中可以使用一些調試工具、模擬器等進行幫助，包括Chrome的手機調試插件、模擬器Genymotion等等。

2、代碼編寫

a、設置viewport和rem

在編寫HTML5代碼時，首先需要注意的是設置viewport和rem，這是保證手機端顯示比例統一的關鍵。

　　meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no”/ 　

　　上述代碼是viewport設置的范本，同時也需要對rem進行設置，一般是在最上層的樣式表里進行設置。

/*在iPhone5上，1rem = 20px*/

　　　　html {

　　　　　　font-size: 20px;

　　　　}

　　　　@media only screen and (max-width: 320px) {

　　　　　　html {

　　　　　　　　font-size: 14px;

　　　　　　}

　　　　}

b、使用H5的特性

在APP中，可以大量運用HTML5開發中的技術，包括Canvas、Audio、Video等特性。比如就可以使用Canvas來實現繪圖、動畫等效果，使用Audio元素來播放音樂等。

　　　　c、更多代碼細節自己嘗試學習吧，此處就不再貼出代碼（哈哈）

3、打包發布

在有了HTML、CSS、JavaScript代碼的基礎上，還需進行打包發布，方便用戶進行體驗。

a、打包

其中，PhoneGap則需要使用自身提供的打包工具進行打包（親測打包時間很長，90多分鐘）。

Cordova支持通過命令行進行打包，使用crodova build即可實現。

b、發布

發布APP時，需要把打好的包上傳至App Store或Google Play, 而發布HTML5應用，應該考慮到使用在線分發方式。在線分發的方案有很多，包括直接將代碼上傳至WEB服務器，然后讓用戶進行下載。

四、總結

以上就是利用HTML5開發手機APP的原理以及運用到的技術，日常開發中所需考慮的問題，僅是淺淺蹭過而已。對于已經精通Web技術的人來說并不算難，而對于初學者來說還是會有很多的不懂之處。

但不管怎么樣，運用HTML5開發手機APP確實可以在短時間內實現跨平臺的開發需求，同時也是可以節省開發成本，縮短開發周期，提高開發效率的。