基于HTML5跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的研究與實(shí)踐

李麗平，薛玉倩

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

基于HTML5跨平臺(tái)移動(dòng)應(yīng)用開發(fā)的研究與實(shí)踐

李麗平，薛玉倩

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

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

HTML5；PhoneGap；JSON；移動(dòng)應(yīng)用開發(fā)

0 引言

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

1 HTML5概述

1.1HTML5

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

1.2HTML5優(yōu)勢

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

（2）增強(qiáng)功能、新機(jī)制，保證安全。HTML5通過WebSocket進(jìn)行實(shí)時(shí)通信，使用LocalStorage進(jìn)行本地存儲(chǔ)，采用了與IOS近似的沙盒機(jī)制，從而保證了安全性。

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

2 跨移動(dòng)平臺(tái)技術(shù)

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

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

3 跨平臺(tái)移動(dòng)應(yīng)用開發(fā)

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

圖1 基于Web開發(fā)方式的移動(dòng)跨平臺(tái)架構(gòu)

4 基于HTML5跨平臺(tái)移動(dòng)應(yīng)用的實(shí)踐

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

4.1 HTML5移動(dòng)應(yīng)用跨平臺(tái)移動(dòng)端的實(shí)現(xiàn)

HTML5移動(dòng)應(yīng)用設(shè)計(jì)完成后，通過PhoneGap構(gòu)建實(shí)現(xiàn)支持不同平臺(tái)。NPM負(fù)責(zé)PhoneGap應(yīng)用程序包的管理，所以開發(fā)環(huán)境中應(yīng)已安裝Node.js。PhoneGap的核心Cordova通過以下命令安裝：

Npm install-g cordova

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

Cordova create hbsi com.example.hbsi html5hbsi

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

添加android平臺(tái)：

cordova platform add android添加iOS平臺(tái)：

Cordova platform iOS

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

cordova build iOS

cordova build android

如此，一個(gè)跨平臺(tái)的移動(dòng)應(yīng)用已建立完成，在Android與iOS手機(jī)運(yùn)行效果如圖2、圖3所示。

圖2 html5hbsi在nexut4上的運(yùn)行圖

圖3 html5hbsi在iphone6上的運(yùn)行圖

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

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