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

李麗平，薛玉倩

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

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

李麗平，薛玉倩

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

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

HTML5；PhoneGap；JSON；移動應用開發

0 引言

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

1 HTML5概述

1.1HTML5

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

1.2HTML5優勢

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

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

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

2 跨移動平臺技術

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

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

3 跨平臺移動應用開發

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

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

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

HTML5已成為互聯網核心技術之一，被廣泛應用到移動應用開發中。現移動應用開發多以HTML5為開發語言，PhoneGap為本地應用的開發模式來實現一次編程的跨平臺開發。

4.1 HTML5移動應用跨平臺移動端的實現

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

Npm install-g cordova

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

Cordova create hbsi com.example.hbsi html5hbsi

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

添加android平臺：

cordova platform add android添加iOS平臺：

Cordova platform iOS

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

cordova build iOS

cordova build android

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

圖2 html5hbsi在nexut4上的運行圖

圖3 html5hbsi在iphone6上的運行圖

4.2 客戶端與服務器端數據交互的實現

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