基于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是通过动态创建