李麗平，薛玉倩

（河北軟件職業(yè)技術學院 軟件工程系，河北 保定 071002）

基于HTML5跨平臺移動應用開發(fā)的研究與實踐

李麗平，薛玉倩

（河北軟件職業(yè)技術學院 軟件工程系，河北 保定 071002）

隨著移動互聯(lián)網(wǎng)的高速發(fā)展，移動終端操作系統(tǒng)的種類也越來越多，主要包括IOS、Android、Windows Phone、BlackBerry OS等。移動操作系統(tǒng)間差異性大、不可兼容，造成移動應用開發(fā)周期長，移植困難。HTML5具有良好的跨平臺性及系統(tǒng)兼容性，將其與Web網(wǎng)頁技術開發(fā)相結合可以實現(xiàn)一次開發(fā)、多平臺應用。通過對主流移動應用技術進行分析，利用HTML5技術彌補其不足，實現(xiàn)了跨平臺移動應用的開發(fā)。

HTML5；PhoneGap；JSON；移動應用開發(fā)

0 引言

近年來，移動互聯(lián)網(wǎng)高速發(fā)展，移動終端作為移動互聯(lián)網(wǎng)的主要呈現(xiàn)平臺向用戶提供了便捷與高效的服務。目前，移動終端操作系統(tǒng)種類繁多，主要包括IOS、Android、Windows Phone、BlackBerry OS等。由于移動操作系統(tǒng)的多樣性，應用開發(fā)者需分別針對這些操作系統(tǒng)進行重復開發(fā)，故而延長了開發(fā)周期并增加了開發(fā)成本。因此，跨平臺移動開發(fā)成為重要的研究領域，而屏蔽移動平臺及硬件設備的差異性，是移動應用開發(fā)亟待解決的關鍵問題。HTML5是HTML語言的第五次修改，已成為互聯(lián)網(wǎng)核心技術之一，擁有HTML、CSS 與JavaScript等技術。HTML5最終呈現(xiàn)在瀏覽器端，而Safari、IE、Chrome等眾多移動終端瀏覽器都支持HTML5，所以HTML5具有良好的跨平臺性。通過HTML5可以避免移動操作系統(tǒng)的差異性造成的影響，從而實現(xiàn)跨平臺移動應用開發(fā)[1]。

1 HTML5概述

1.1HTML5

W3C為了與Adobe公司的Flash競爭，制定了HTML第五版標準，HTML5廣義上是指HTML、CSS與 JavaScript技術的組合，HTML5彌補了HTML4在本地資源操作的不足，并符合移動互聯(lián)網(wǎng)對Web的要求。HTML5通過瀏覽器運行，因而不受操作系統(tǒng)的限制，具有良好的跨平臺性，成為解決移動應用開發(fā)操作系統(tǒng)版本多、不兼容的關鍵技術之一。HTML5技術在移動Web前端的應用將提供給用戶全新的服務與體驗，蘊藏著巨大的潛力。

1.2HTML5優(yōu)勢

（1）跨平臺。HTML5作為HTML的第五版標準，具有標記語言的優(yōu)勢，不受操作系統(tǒng)的限制，具有良好的跨平臺性。

（2）增強功能、新機制，保證安全。HTML5通過WebSocket進行實時通信，使用LocalStorage進行本地存儲，采用了與IOS近似的沙盒機制，從而保證了安全性。

（3）新API的增加。API是預先定義的函數(shù)，使開發(fā)者或應用程序無需了解其源碼及工作機制就可以對其進行訪問[2]。

2 跨移動平臺技術

跨平臺是指在軟件開發(fā)過程中不局限于某種特定的硬件環(huán)境與操作系統(tǒng)，開發(fā)后不用修改或盡量少修改就可運行于不同的平臺或操作系統(tǒng)?？缙脚_引擎驅動與跨平臺應用編譯是目前主流的跨移動平臺方式?？缙脚_引擎驅動是在目標設備上安裝引擎來實現(xiàn)屏蔽平臺底層操作系統(tǒng)的差異。用戶可通過目標設備上的引擎解釋執(zhí)行下載到目標設備上的應用?？缙脚_引擎驅動主要技術為Unity3D。Unity3D是Unity Technologies推出的用于三維游戲、建筑可視化、實時三維動畫開發(fā)的跨平臺的綜合型游戲開發(fā)工具，是一個全面整合的專業(yè)游戲引擎。Unity3D通過C#與JavaScript的混編基本語言，依靠Mono Runtime實現(xiàn)跨平臺?？缙脚_應用編譯是采用某種標準的開發(fā)語言進行應用開發(fā)，應用在目標平臺運行前由目標平臺編譯器進行編譯生成目標平臺的可執(zhí)行程序。跨平臺應用編譯技術采用HTML、CSS與JavaScript進行Web應用開發(fā)，通過瀏覽器的適配性實現(xiàn)跨平臺，如PhoneGap、Titanium等。PhoneGap是一個基于Web開發(fā)的跨平臺的移動開發(fā)工具，其遵循W3C標準，將Web App封裝成各個平臺的軟件應用程序，PhoneGap已全面支持HTML5標準。Titanium是將JavaScript、CSS、HTML代碼轉換成底層的Native Code，其雖然無法被瀏覽器執(zhí)行，但可通過應用程序所在系統(tǒng)的鏈接庫來執(zhí)行[3]。

跨平臺引擎驅動技術Unity3D主要被應用到游戲引擎，并不適合業(yè)務系統(tǒng)的開發(fā)，而跨平臺應用編譯技術開發(fā)方便，應用場景較多，但對復雜圖形、動畫支持不足，功能受限。HTML5的出現(xiàn)，改善了Web語言對多媒體、3D的功能實現(xiàn)能力，使得終端能力與調用性能得到了提升。目前，HTML5+CSS3+JavaScript已成為移動應用開發(fā)的首選[4]。

3 跨平臺移動應用開發(fā)

隨著4G網(wǎng)絡和硬件技術的不斷發(fā)展所帶來的智能手機的普及，移動應用已成為一個重要的研究領域。目前，主流的移動端操作系統(tǒng)主要有IOS、Android、Windows Phone、BlackBerry OS等，為了使各系統(tǒng)用戶接受并使用，移動應用必須具有良好的跨平臺性，能夠對多個系統(tǒng)平臺進行支持。各個移動系統(tǒng)都有自身一套獨立的開發(fā)流程與語言，比如IOS所采用的是Object C，而Android采用的則是JAVA?，F(xiàn)在移動應用開發(fā)方式主要有基于Web的開發(fā)方式和原生應用開發(fā)方式。原生應用開發(fā)方式需要使用每個操作系統(tǒng)的語言及API進行開發(fā)，將有大量重復編碼工作需要做?；赪eb的開發(fā)方式利用各移動操作系統(tǒng)對Web技術如HTML、JavaScript、CSS的支持實現(xiàn)跨平臺，通過PhoneGap將其封裝成獨立的移動應用。由于采用基于Web開發(fā)方式進行移動應用開發(fā)，核心代碼只需開發(fā)一次，部署工作簡單易行，因而成為主流的移動應用開發(fā)方式?；赪eb開發(fā)方式的移動跨平臺架構如圖1所示?；赪eb開發(fā)方式的Web程序被放到原生程序框架中，并被視作資源被調用，客戶端可通過WebView進行訪問[5]。

圖1 基于Web開發(fā)方式的移動跨平臺架構

4 基于HTML5跨平臺移動應用的實踐

HTML5已成為互聯(lián)網(wǎng)核心技術之一，被廣泛應用到移動應用開發(fā)中?，F(xiàn)移動應用開發(fā)多以HTML5為開發(fā)語言，PhoneGap為本地應用的開發(fā)模式來實現(xiàn)一次編程的跨平臺開發(fā)。

4.1 HTML5移動應用跨平臺移動端的實現(xiàn)

HTML5移動應用設計完成后，通過PhoneGap構建實現(xiàn)支持不同平臺。NPM負責PhoneGap應用程序包的管理，所以開發(fā)環(huán)境中應已安裝Node.js。PhoneGap的核心Cordova通過以下命令安裝：

Npm install-g cordova

Cordova安裝完畢后，就可以創(chuàng)建工程應用。進入工作目錄，在目錄文件下執(zhí)行以下命令：

Cordova create hbsi com.example.hbsi html5hbsi

工程建立后，可以向工程中添加所需支持的平臺，添加支持平臺命令如下：

添加android平臺：

cordova platform add android添加iOS平臺：

Cordova platform iOS

接下來就需將基于HTML5的Web應用融合到PhoneGap的應用中，通過以下命令實現(xiàn)：

cordova build iOS

cordova build android

如此，一個跨平臺的移動應用已建立完成，在Android與iOS手機運行效果如圖2、圖3所示。

圖2 html5hbsi在nexut4上的運行圖

圖3 html5hbsi在iphone6上的運行圖

4.2 客戶端與服務器端數(shù)據(jù)交互的實現(xiàn)

客戶端與服務器端數(shù)據(jù)交互采用JSON數(shù)據(jù)格式，JSON是JavaScript的一個子集，采用的是與編程語言無關的文本格式，以使其成為具有跨平臺、跨語言通訊的數(shù)據(jù)載體。但瀏覽器對JavaScript的XMLHttpRequest的請求是有安全限制的，可通過On-Demand方式來解決此問題。On-Demand是通過動態(tài)創(chuàng)建