HTML5 移動應用開發環境搭建及原理分析

開發環境搭建：

1、Android 開發平臺搭建

1. 安裝java jdk：\\10.194.151.132\Mewfile\tmp\ADT
2. 配置java jdk

1)  新建系統變量，JAVA_HOME，C:\Program Files\Java\jdk1.8.0_25

2)  新建系統變量，classpath，;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar

3)  Path，%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

4)  測試，javac

1. 安裝Apache Ant
2. 配置Apache Ant

1)  新建系統變量，ANT_HOME，C:\soft\apache-ant-1.9.4

2)  Path，%ANT_HOME%\bin

1. 配置Android SDK

將SDK中的tools和platform-tools的路徑添加到PATH中

1. 建立虛擬機

 

2、安裝Cordova

1. 安裝Node.js
2. 安裝cordova：使用Node.js 的npm命令，C:\>npm install -g cordova，確保npm的路徑在PATH中存在，如C:\Users\username\AppData\Roaming\npm
3. 建立HTML5應用：

cordova create hello com.example.hello HelloWorld

1. 添加應用平臺：

cd hello

cordova platform add android

1. 創建APP：

cordova build

1. 在虛擬機中測試建立的APP

cordova emulate android

 

3、安裝HBuilder（非必要）

1. 安裝HBuilder
2. 導入Cordova生成的HTML5應用文件
3. 修改代碼，使用cordova emulate android在虛擬機中調試。

 

HTML5移動應用原理分析

HTML5移動應用開發框架諸如Cordova，Ionic，HBuilder等，在編譯生成移動應用的時候主要作兩件事：

1. 集成WebView組件和瀏覽器；
2. 打包包含web應用程序文件的一系列資源。

即基於平臺上自帶的Web引擎，html5移動應用經過系統API，調用系統瀏覽器的加速引擎來加載頁面：iOS能夠調用UIWebview利用加速引擎Nitro加速，這樣能夠在前端使用JavaScript作大型運算；Android4.4以後，內置的Webview也由Android WebKit換成了Chromium，性能大幅提高。

上述HTML5移動應用開發框架的主要不足在於功能和性能方面，這主要是由於HTML5應用的能力嚴重依賴於系統自帶的Web引擎：iOS的UIWebview、Android的Webview等，此類組件的HTML5能力相比Safari for iOS、Chrome for Android都要差一截。另外在Android平臺上，因爲系統碎片化比較嚴重，不一樣Android版本的Webview的HTML5能力也有較大差別，致使相應的HTML5應用一致性難以保證。所幸已經出現一些第三方的Web引擎以提供比系統默認的Webview更好的功能和性能，而PhoneGap/Cordova也正在改進架構以便引入這些更好的第三方Web引擎。

總的來講，HTML5應用的能力很大程度上依賴於Web引擎的能力。所以，不管是移動操做系統開發商仍是開發工具的開發商，都持續在Web引擎的方向投入了更多的努力。

Web引擎

Web引擎目前大體可分爲三種方式：

1. 瀏覽器，好比Safari/Chrome/UC Browser等;
2. 系統自帶的Webview組件，好比上面提到的iOS UIWebview和Android Webview
3. 專門的Web Engine，好比Intel的開源項目Crosswalk、Ludei的Webview+

 

瀏覽器方式很容易理解，一個HTML5應用就是一個Web頁面，用戶經過瀏覽器打開一個URL，而後進入瀏覽器的全屏模式/App模式進行操做，或者是經過點擊一個事先建立好的快捷方式打開應用。這種方式的性能取決於瀏覽器自己對HTML5的支持狀況，通常來講要優於Webview組件的方式，可是問題在於不一樣的瀏覽器有差別，並且經過瀏覽器運行HTML5較難作到相似原生應用的體驗（應用切換/權限管理/系統資源訪問/整合等）以及豐富的API支持。

Webview組件方式的通常用法是以Hybrid的方式發佈HTML5應用，即上述提到的PhoneGap/Cordova方案所採用的方式。其問題已經在上面提到過，主要是Webview組件自己對HTML5的支持能力不足。

專門的Web引擎能夠有較好的HTML5功能和性能支持，同時有較好一致性，相似原生應用的系統整合也能夠作得較好。這種方式的缺點則在於開發者須要將Web引擎與應用程序一塊兒打包，生成的應用大小會更大，所以有的Web引擎（如Crosswalk）也提供了一種「共享模式」，讓多個應用能夠共享一個Web引擎，僅當應用第一次啓動而且發現系統尚未相應Web引擎時才提示用戶下載安裝。

目前的發展趨勢是：經過PhoneGap/Cordova方式獲得豐富的API支持，經過專門開發的Web引擎去提高HTML5的能力。