CN106445518A - 一种跨平台移动终端应用程序开发方法及系统 - Google Patents

Abstract

本发明提供了一种跨平台移动终端应用程序开发方法及系统，该方法包括：页面设计步骤，设计具有Web页面结构的移动终端平台前端Web组件；接口设计步骤，建立兼容移动终端平台的统一用户界面接口；封装步骤，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。本发明可以实现低成本应用程序移植、高效率的自适应不同系统，并提高用户体验度。

Description

一种跨平台移动终端应用程序开发方法及系统

技术领域

本发明属于软件开发技术领域，具体地说，尤其涉及一种跨平台移动终端应用程序开发方法及系统。

背景技术

以Android(安卓)、ios、windowsPhone为主的移动终端平台各自有着不同的开放性和原生语言，使得开发不同应用时需要同时不同平台的支持，从而大大增加开发的成本。

现阶段对于跨平台的应用开发主要是根据不同的系统定制孪生的应用程序App，具体是分别采用系统相对应的语言进行设计和编译，然后分别打包。该方法的App存在高成本投入及调试更新麻烦的问题，使得一个完善的多平台的App需要用不同的语言区开发，不同的平台去调试，人力物力耗费很大。

发明内容

为解决以上问题，本发明提供了一种跨平台移动终端应用程序开发方法及系统，用以实现低成本应用程序移植，高效率地自适应不同系统，并提高用户体验度。

根据本发明的一个方面，提供了一种跨平台移动终端应用程序开发方法，包括：

页面设计步骤，设计具有Web页面结构的移动终端平台前端Web组件；

接口设计步骤，建立兼容移动终端平台的统一用户界面接口；

封装步骤，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。

根据本发明的一个实施例，所述封装步骤采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件封装为对应的应用程序。

根据本发明的一个实施例，采用PhoneGap将运行在不同移动终端平台WebView组件上的Web组件封装为安卓应用程序，包括：

搭建PhoneGap开发环境；

在PhoneGap开发环境下引入Eclipse开发平台并部署安卓SDK；

在Eclipse开发平台下建立工程并配置PhoneGap对于安卓工程参数；

将Web组件放入PhoneGap的Web页根目录下；

在配置的安卓工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为安卓应用程序。

根据本发明的一个实施例，采用PhoneGap将运行在不同移动终端平台WebView组件上的Web组件封装为ios应用程序，包括：

搭建PhoneGap开发环境；

在PhoneGap开发环境下引入Xcode开发平台和部署ios SDK；

在Xcode开发平台下建立工程并配置PhoneGap对于ios工程参数；

将Web组件放入PhoneGap的Web页根目录下；

在配置的ios工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为ios应用程序。

根据本发明的一个实施例，所述页面设计步骤采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。

根据本发明的一个实施例，移动终端平台前端Web组件采用AJAX实现与后台数据库的数据交互。

根据本发明的一个实施例，所述接口设计步骤采用jQueryMobile建立兼容移动终端平台的统一用户界面接口。

根据本发明的另一个方面，还提供了一种跨平台移动终端应用程序开发系统，包括：

页面设计模块，设计具有Web页面结构的移动终端平台前端Web组件；

接口设计模块，建立兼容移动终端平台的统一用户界面接口；

封装模块，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。

根据本发明的一个实施例，所述封装模块采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件封装为对应的应用程序。

根据本发明的一个实施例，所述页面设计模块采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。

本发明的有益效果：

本发明提供了一个多平台的应用程序开发方法，可以实现低成本应用程序移植，高效率地自适应不同系统，并且可以在不同平台中定制各自的优势来提高用户体验(比如手机端的地理位置服务等)。本发明采用各种平台都支持的同一开发环境进行开发，最后对应用程序App进行相对应的打包，只需要完成一个应用的设计开发，使自动产生适应不同平台的App。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要的附图做简单的介绍：

图1是根据本发明的一个实施例的方法流程图；

图2是根据本发明的一个实施例的系统框架图。

具体实施方式

以下将结合附图及实施例来详细说明本发明的实施方式，借此对本发明如何应用技术手段来解决技术问题，并达成技术效果的实现过程能充分理解并据以实施。需要说明的是，只要不构成冲突，本发明中的各个实施例以及各实施例中的各个特征可以相互结合，所形成的技术方案均在本发明的保护范围之内。

为解决现有技术中，App高成本投入及调试更新麻烦的问题，本发明提供了一种跨平台移动终端应用程序开发方法，如图1所示为根据本发明的一个实施例的方法流程图，如图2所示为根据本发明的一个实施例的系统框架图，以下参考图1和图2来对本发明进行详细说明。

首先是步骤S110页面设计步骤，设计具有Web页面结构的移动终端平台前端Web组件。具体的，采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。

HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML标准版本，现仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。广义的HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。HTML5可以减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application，RIA)，如Adobe Flash、MicrosoftSilverlight、Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。

HTML5的优势包括以下几个方面：

语义特性：HTML5赋予网页更好的意义和结构，更加丰富的标签将随着对RDFa微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web；

本地存储特性：基于HTML5开发的网页APP拥有更短的启动时间、更快的联网速度以及本地存储功能；

设备兼容特性：HTML5提供了前所未有的数据与应用接入开放接口，使外部应用可以与浏览器内部的数据直接相连；

连接特性：更有效的连接工作效率，使得基于页面的实时聊天、更快速的网页游戏体验、更优化的在线交流得到了实现，HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助实现服务器将数据推送到客户端的功能；

网页多媒体特性：支持网页端的Audio、Video等多媒体功能，与网站自带的APP、摄像头、影音功能互相加强；

三维、图形及特效特性：基于SVG、Canvas、WebGL及CSS3的3D功能，将可以呈现出更加优秀的视觉效果；

性能与集成特性：HTML5会通过XMLHttpRequest2等技术，使Web应用在多样化的环境中更快速的工作。

由于以上特性以及本身基于Web的框架，不同的智能终端又同时对Web页面提供支持，在使用HTML5时无需过分考虑不同系统的原生语言的限制和不同平台开放API的限制，使得HTML5在移动端有着更好的可移植空间。所以，本发明选择HTML5作为主要的跨平台语言来进行开发。

在采用HTML5进行具体模块开发时，页面框架采用HTML搭建，页面效果采用CSS3实现，页面脚本采用JavaScript编写。并且，在开发时，可以采用HTML5具有的位置定位功能，采用IP地址、GPS、Wifi、GSM/CDMA等方式，让用户可以查找自己当前的位置和周边，并实时将用户的位置使用百度地图等表现在界面上，从而提高用户体验。用户使用应用时地理位置获取的流程可以简述为：用户打开需要获取地理位置的Web应用，应用向浏览器请求地理位置；浏览器弹出询问，询问用户是否共享地理位置；浏览器设置查询相关信息，并将相关信息发送到一个信任的位置服务器；服务器返回具体的地理位置。

本发明实现HTML5地理地位查询主要具有以下特性：基于浏览器，无需后端支持而获取用户的地理位置技术；精确定位用户的地理位置(精度最高达10m之内，依赖设备)；持续追踪用户的地理位置；与Google Map、或者Baidu地图交互呈现位置信息。

支持地理位置Geolocation API的浏览器有：IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+、IPhone3.0+、Android2.0+，GeolocationAPI存在于navigator对象中，包含3个方法：

getCurrentPosition//获得当前位置

watchPosition//持续监视位置

clearWatch//清除监视

其中，getCurrentPosition(success,error,option)方法有三个参数：

第一个参数success是成功获取位置信息的回调函数，它是本方法唯一必须的参数，表示获取到的用户位置数据。该对象包含两个属性coords和timestamp。其中，coords属性包含7个值：accuracy精确度，latitude纬度，longitude经度，altitude海拔，altitudeAcuracy海拔高度的精确度，heading朝向，speed速度。

第二个参数error用于捕获获取位置信息出错的情况，其中错误代码包括以下四个值：

0-UNKNOW_ERROR：表示不包括在其它错误代码中的错误

1-PERMISSION_DENIED：表示用户拒绝浏览器获取位置信息的请求

2-POSITION_UNAVALIABLE：表示网络不可用或者连接不到卫星

3-TIMEOUT：表示获取超时：必须在options中指定了timeout值时才有可能发生这种错误。

第三个参数option是配置项，它影响了获取位置时的一些细节，主要包括三个属性：

enableHighAccuracy：浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的GPS和WIFI，值为True的时候，浏览器会尝试启用这些设备，默认指为True；

Timeout：超时，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向Timeout；

maximumAge：应用可接受的缓存位置的最长时间(以毫秒为单位)，值为0意味着浏览器必须在每次调用成功回调函数时都获取一个新的位置。

watchPosition类似于一个追踪器与clearWatch成对，前者的三个参数和getCurrentPosition完全一样，不同的是watchPosition是设计用来实时获取\检测用户的位置信息。它像一个追踪器一样时刻监视用户的位置，只要发生变化，浏览器就会触发watchPosition的回调函数。成功则触发successCallback，否则触发errorCallback。后者用以清除对用户位置的循环监视。下面是一个代码示例，使用getCurrentPosition实现了成功回调(输出位置的经纬度)、错误回调(提示输出错误)和选项对象(高精度：打开；超时：3000ms；最大缓存时间：60s)。

另外，本发明还可以采用HTML5中CSS3的媒体查询方式调整就业平台应用的设备的屏幕和分辨率，主要代码如下：

<link href＝"mycssMobile.css"rel＝"stylesheet"media＝"screen and(max-width:

500px)">

<link href＝"mycss.css"rel＝"stylesheet"media＝"screen and(min-width:501px)">

编写了两个css样式表，其中mycss.css为PC端入口的样式表，用“(min-width:501px)”来限制浏览器的最小宽度为501px，选择500px宽度主要是考虑了现有手机屏幕分辨率宽度基本在480px以下，比较有效的筛选移动端和PC端设备的访问。mycssMobile.css为移动端入口，“(max-width:500px)”限制了其最大宽度为500px，过滤了大部分PC浏览器，因为基本不会有用户将浏览器宽度拉至500px以下。移动端的UI设计主要针对智能移动设备的特性定制，使用jqueryMobile的基础框架设计。主要包括顶部的header框架，中间的内容，尾部footer框架的主导航栏。

在使用媒体查询的同时，平台也基本采用了相对式布局，是指应用会根据不同的屏幕和设备来响应出一个合适的显示方式，主要包括对设备的适配，对分辨率的适配，对布局的相对改变。

PhoneGap对设备适配采用了一个简单标签：<meta name＝"viewport"content＝"width＝device-width initial-scale＝1.0,maximum-scale＝1.0,user-scalable＝no">

initial-scale是指应用的初始缩放比例，maximum-scale指最大的缩放比例user-scalable是指是否支持缩放。这句标签可以使得应用根据设备屏幕的大小，来调整相应的分辨率大小。

在使用这个适配标签的同时，本发明使用了CSS媒体查询的方式，使得不同分辨率能有不同的效果。此处，使用多个<link href＝"xxx.css"rel＝"stylesheet"media＝"screen and(max-width:xxxpx)and(min-width:501px)">来使得不同的分辨率有不同的CSS样式表，这样可以分别突出不同设备的特点。比如：当一个平板电脑访问时，可以使用一个包括图示的样式表；而当手机访问时，使用一个没有图示的样式表，以节约手机屏幕有限的空间。

布局的相对性也是重要的一点，即尽量在CSS样式中使用百分比来定义高度与宽度，而不使用绝对的px值，这样可以使得页面的元素可以随着浏览器大小而改变，而不会出现因浏览器缩小而产生的布局紊乱。

在CSS中，与媒体相关的样式定义是从CSS2.1开始的。CSS2.1中定义了各种媒体类型，包括显示器、便携设备、电视机等。CSS3中加入了Media Queries模块，该模块中允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式，可以在不改变内容的情况下在样式中选择一种页面的布局以精确地适应不同的设备，从而改善用户体验。

在不同的设备中，浏览器的窗口尺寸可能是不同的，如果只针对某窗口尺寸来制作网页，在其他设备中呈现该网页时就会产生很多问题，如果针对不同的窗口尺寸制作不同的网页，则会大大增加成本。Media Queries模块解决了这个问题，只需要针对不同的浏览器窗口尺寸编写不同的样式，然后让浏览器根据不同的窗口尺寸来选择使用不同的样式即可。到目前为止，Media Queries模块得到了Firefox，Safari，Chrome及Opera浏览器的支持。Media Queries的使用方法是：@media设备类型and(设备特性){样式代码}。在代码的开头必须要书写"@media"，然后指定设备类型，也可以称之为媒体类型。

设备特性的书写方式与样式的书写方式相似，分为两个部分，当中由冒号分割，冒号前书写设备的某种特性，冒号后书写该特性的具体值。例如，如果需要指定浏览器的窗口宽度大于400px时所使用的样式，代码为(min-width:400px)。

CSS中的设备特性共有13种，是一个类似于CSS属性的集合。使用and关键字来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式，譬如以下语句指定了当窗口宽度小于400px时所使用的样式：

@media screen and(max-width:399px){样式代码}

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

在本发明的一个实施例中，移动终端平台前端Web组件采用AJAX实现与后台数据库的数据交互。AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML)。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。移动终端平台需要与后台数据库进行交互才能实现动态内容的更新与显示。

具体的，AJAX应用可以仅向服务器发送并取回必需的数据，使用SOAP或其它一些基于XML的web服务接口，并在客户端采用JavaScript处理来自服务器的响应。因此在服务器和浏览器之间交换的数据大量减少，结果就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。由于移动端数据量本身需求较小，页面内容的更新也只是部分区域，能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。所以本发明选择AJAX来实现前后台的轻量级的交互工作。

具体实现时，首先在页面需要更新内容位置指定相对于的ID，这样就实现了HTML页面元素与JavaScript的链接，当用户进入某页面或者点击某按钮时，将调用相应的JavaScript代码。AJAX首先访问后台的PHP或者JSP页面，来得到数据的反馈，然后将动态的元素用已得到的数据做出相应的更新，这些更新是局部的。如在登陆界面进行AJAX交互时，当用户名为空时，点击登陆按钮，后台返回用户名为空相应的错误代码，AJAX只是在最下面一行更新了反馈信息，提示用户输入用户名。另外，JavaScript也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

接下来是步骤S120接口设计步骤，建立兼容移动终端平台的统一用户界面接口。具体的，采用jQueryMobile建立兼容移动终端平台的统一用户界面接口。

jQueryMobile是由Media Temple联合多家移动设备厂商以及软件企业共同发起的的针对触屏智能手机与平板电脑的Website以及在线应用的前端开发框架。Jquerymobile构建于Jquery，为前端开发人员提供了一个兼容所有主流移动设备平台的统一用户界面UI接口系统。Jquery mobile拥有出色的弹性、轻量化以及渐进增强特性与可访问性，具有如下基本特性：

一般简单性：框架简单易用，页面开发主要使用标记，无需或仅需很少JavaScript。

持续增强：尽管jQueryMobile利用最新的HTML5、CSS3和JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。

可用性：jQueryMobile在设计时考虑了访问能力，其拥有Accessible RichInternet Applications(WAI-ARIA)支持，以帮助使用辅助技术的残障人士访问web页面。

小规模：jQueryMobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。

主题设置：jQueryMobile框架还提供一个主题系统，允许提供自己的应用程序样式。

总之，jQueryMobile给了开发者对移动端Web页面设计更加简洁的工作方式。因此，本发明采用jQueryMobile建立兼容移动终端平台的统一用户界面接口。

最后是步骤S130封装步骤，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。具体的，采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件进行封装。

移动终端平台应用需要通过一个模式来实现多平台的兼容，虽然HTML5已经能实现跨平台的浏览器浏览，但它毕竟还是一个Web页面，需要通过浏览器来访问，不能称之为真正意义上的应用。所以还需要一个中间件，来将Web打包成一个应用程序，这样使得移动终端平台更独立也更安全，并且也可以调用更多的类似摄像头、通讯录的功能。

本发明选择PhoneGap来实现跨平台的应用包装。具体的，将所有的Web页面以及JS、CSS等Web组件放入PhoneGap相应的Web页根目录下，在Eclipse中进行工程相应的配置。对不同的移动终端平台只需要分别进行一次这样的配置，就可以在之后的开发中，方便的包装出相应平台的应用。

PhoneGap架构拥有强大的跨平台访问设备能力，其工作原理是基于移动设备原生组件的。PhoneGap应用程序是一种原生包装的Web应用程序。在纯原生应用程序中，Web视图控件用来显示来自远程服务器的HTML内容，或者显示以某种方式与原生应用程序一起封装的本地HTML内容。

由PhoneGap创建的原生包装器(wrapper)应用程序把前后端开发者的HTML页面装入到这其中一个Web视图控件，并且在应用程序启动后，将随后出现的HTML作为用户界面来显示。如果JavaScript文件包括在Web视图装入的页面中，该代码就在页面上以正常方式来评估。不过，创建Web视图的原生应用程序能够以不同的方式，与Web视图里面运行的JavaScript代码进行异步通信。这项技术在PhoneGap架构中通常被称为桥接(bridge)技术。PhoneGap充分利用该技术在Web视图里面创建JavaScriptAPI，能够以异步方式将消息发送到包装器应用程序中的原生代码，以及接收来自包装器应用程序中原生代码的消息。随后，PhoneGap会创建iframe，iframe会装入统一资源标识符方案(“gap://”)，原生应用程序经配置后处理该统一资源标识符方案；这时候所有的队列命令将被执行。通过在Web视图的环境下评估JavaScript串，就能从原生代码联系到Web视图。

在本发明的一个实施例中，采用PhoneGap将运行在不同移动终端平台WebView组件上的Web组件封装为Andriod(安卓)应用程序，包括以下步骤。首先，搭建PhoneGap开发环境。具体的，可以在PhoneGap.com或者GitHub得到最新的PhoneGap版本。从网上得到的PhoneGap是一个30M左右的压缩包，包含对iOS、Android、BlackBerry、Windows Phone 7、webOS、Bada、和Symbian7个平台相对应的配置文件以及例程。

接着，在PhoneGap开发环境下引入Eclipse开发平台并部署Android SDK。Eclipse是一个开放源代码的、基于Java的可扩展开发平台，只是一个框架和一组服务，用于通过插件组件构建开发环境。Eclipse的插件机制是轻型软件组件化架构。Eclipse使用插件来提供所有的附加功能。已有的插件已经能够支持C/C++、Perl、Ruby，Python、telnet和数据库开发。插件架构能够支持将任意的扩展加入到现有环境中，而不仅仅限于支持各种编程语言。选择Eclipse作为平台主要是考虑了它本身强大的可扩展性，同时也是现在PhoneGap开发所选择的主流平台。

Android SDK提供了强大的对Andriod系统支持的工具包，通过这个SDK来对Android系统进行快捷稳定的不需要过分涉及底层的操作，代替了大部分繁琐而重复的底层接口的工作。Andriod SDK是对Andriod系统开发的必要库。

接着在Eclipse开发平台下建立工程并配置PhoneGap对于Andriod工程参数，也就是在Eclipse开发平台下，采用PhoneGap开发工具，建立Andriod工程并配置相应的参数。

具体的，首先在Eclipse新建一个Android工程，在项目根目录创建两个目录/libs和/assets/www，其中/www目录就是Web页的根目录，所有的页面以及JS、CSS都将放在其下。将cordova-2.x.0.jar复制到/libs目录下，cordova-2.x.0.js复制到/www目录下。前者是PhoneGap所需的包，里面包含了PhoneGap与底层接口的内容；后者是一个Js库，里面是可以直接在代码中引用的API函数，包含了：Accelerometer点击设备屏幕的手势感应器；Camera调用设备摄像头采集照片；Capture使用设备的媒体应用程序调用媒体文件；Compass获取设备移动的方向.；Connection快速检查网络状况以及蜂窝网络的信息；Contacts设备联系人相关操作；Device获取设备的相关信息；Events通过JavaScript获取本地活动；File通过JavaScript调用本地文件系统；Geolocation使应用程序可以访问地理位置信息.；Media录制和播放音频文件；Notification设备视觉、声音和触觉反馈；Storage截获设备的本地存储选项。

复制xml文件夹到/res目录下，这个文件夹中的config.xml包含了一些PhoneGap打包时的关联配置和调试的配置，包括各个API所对应的库的位置、本地服务器页面的URL等。

接着需要对/src文件夹中的主Java文件进行少量调整，包括：将Class的继承类Activity改为DroidGap；将setContentView()这一行替换为super.loadUrl("file:///android_asset/www/index.html")；这个路径对应的页面将作为应用启动后的第一张页面；将onCreate的private改成public；使其成为一个公共类，给予外部调用的权限；添加import org.apache.cordova.*；这是PhoneGap库的地址，导入之后就可以编译有关PhoneGap的具体功能了；移除import ndroid.app.Activity；最后对主AndroidManifest.xml进行修订，加入默认设置和权限配置，首先对屏幕进行默认设置，包括屏幕大小等：<supports-screens android:largeScreens＝"true"android:normalScreens＝"true"android:smallScreens＝"true"android:resizeable＝"true"android:anyDensity＝"true"/>

然后增加如下的使用权限：

<uses-permission android:name＝"android.permission.CAMERA"/>摄像头操作

<uses-permission android:name＝"android.permission.VIBRATE"/>震动权限

<uses-permission

android:name＝"android.permission.ACCESS_COARSE_LOCATION"/>

<uses-permission android:name＝"android.permission.ACCESS_FINE_LOCATION"/>

<uses-permission

android:name＝"android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>

有关定位信息的访问权限

<uses-permission android:name＝"android.permission.READ_PHONE_STATE"/>

访问移动端一些基本信息的权限

<uses-permission android:name＝"android.permission.INTERNET"/>

使用互联网的权限

<uses-permission android:name＝"android.permission.RECEIVE_SMS"/>

收取短消息的权限

<uses-permission android:name＝"android.permission.RECORD_AUDIO"/>

录制音频的权限

<uses-permission

android:name＝"android.permission.MODIFY_AUDIO_SETTINGS"/>

修改声音设置的权限

<uses-permission android:name＝"android.permission.READ_CONTACTS"/>

<uses-permission android:name＝"android.permission.WRITE_CONTACTS"/>

有关通讯录读写的权限

<uses-permission

android:name＝"android.permission.WRITE_EXTERNAL_STORAGE"/>

写入外部存储设备的权限

<uses-permission android:name＝"android.permission.ACCESS_NETWORK_STATE"/>

得到网络环境信息的权限

<uses-permission android:name＝"android.permission.GET_ACCOUNTS"/>

得到用户账户列表的权限。

最后在<activity>标签中加入configChanges＝"orientation|keyboardHidden"来为API的横竖屏响应提供支持。

接下来，将Web组件放入PhoneGap的Web页根目录下。

最后，在配置的Andriod工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为Andriod应用程序。移动终端内置的WebView组件具备两个特性：WebView组件实质是移动设备的内置浏览器，WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发。WebView提供Web和设备本地API双向通信的能力：PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

一个PhoneGap应用运行流程是：应用运行在WebView组件上，之后通过PhoneGap在各平台的扩展，最终访问设备本地资源。

WebView可以显示Web页面，并且可以应用到任何布局中。WebView提供了两个方法用于显示网页的内容：loadUrl()用于加载一个指定的URL，而loadData()则用于直接向WebView写入指定的HTML文本。此外，还有loadDataWithBaseURL()和loadData()类似。当写入的HTML文本包含图片、CSS等外部资源的相对链接时，WebView就会根据指定的baseURL来正确地加载这些资源。Android中专门通过WebSettings来设置WebView的一些属性、状态等，可以通过WebView.getSettings()得到这个设置。此外WebViewClient专门辅助WebView处理各种通知、请求等事件的类，可以通过setWebViewCilent()方法来指定一个WebViewClient对象。WebChromeClient辅助WebView处理JavaScript的对话框、网站图标、网站Title、加载进度等。最后，为了让Webview从apk载文件中加载assets，Android SDK提供了一个schema，前缀为file:///android_asset/WebView遇到这样的schema，就会去当前包中的/assets目录中查找内容，PhoneGap的默认目录为/assets下的/www。

采用PhoneGap还可以将运行在不同移动终端平台WebView组件上的Web组件封装为ios应用程序，具体包括：搭建PhoneGap开发环境；在PhoneGap开发环境下引入Xcode开发平台和部署ios SDK；在Xcode开发平台下建立工程并配置PhoneGap对于ios工程参数，也就是在Xcode开发平台下，采用PhoneGap开发工具，建立ios工程并配置相应的参数；将Web组件放入PhoneGap的Web页根目录下；在配置的ios工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为ios应用程序。详细步骤参考封装Andriod应用程序。

根据本发明的另一个方面，还提供了一种跨平台移动终端应用程序开发系统，包括页面设计模块、接口设计模块和封装模块。其中，页面设计模块设计具有Web页面结构的移动终端平台前端Web组件；接口设计模块建立兼容移动终端平台的统一用户界面接口；封装模块将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。

在本发明的一个实施例中，封装模块采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件封装为对应的应用程序。在本发明的一个实施例中，页面设计模块采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。

本发明提供了一个多平台的应用开发方法，可以实现低成本应用程序移植、高效率的自适应不同系统，并且可以在不同平台中定制各自的优势来提高用户体验(比如手机端的地理位置服务等)。本发明采用各种平台都支持的同一开发环境进行开发，最后对App进行相对应的打包，只需要完成一个应用的设计开发，使自动产生适应不同平台的App。

虽然本发明所公开的实施方式如上，但所述的内容只是为了便于理解本发明而采用的实施方式，并非用以限定本发明。任何本发明所属技术领域内的技术人员，在不脱离本发明所公开的精神和范围的前提下，可以在实施的形式上及细节上作任何的修改与变化，但本发明的专利保护范围，仍须以所附的权利要求书所界定的范围为准。

Claims (10)

1.一种跨平台移动终端应用程序开发方法，包括：

页面设计步骤，设计具有Web页面结构的移动终端平台前端Web组件；

接口设计步骤，建立兼容移动终端平台的统一用户界面接口；

封装步骤，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。

2.根据权利要求1所述的方法，其特征在于，所述封装步骤采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件封装为对应的应用程序。

3.根据权利要求2所述的方法，其特征在于，采用PhoneGap将运行在不同移动终端平台WebView组件上的Web组件封装为安卓应用程序，包括：

搭建PhoneGap开发环境；

在PhoneGap开发环境下引入Eclipse开发平台并部署安卓SDK；

在Eclipse开发平台下建立工程并配置PhoneGap对于安卓工程参数；

将Web组件放入PhoneGap的Web页根目录下；

在配置的安卓工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为安卓应用程序。

4.根据权利要求2所述的方法，其特征在于，采用PhoneGap将运行在不同移动终端平台WebView组件上的Web组件封装为ios应用程序，包括：

搭建PhoneGap开发环境；

在PhoneGap开发环境下引入Xcode开发平台和部署ios SDK；

在Xcode开发平台下建立工程并配置PhoneGap对于ios工程参数；

将Web组件放入PhoneGap的Web页根目录下；

在配置的ios工程参数条件下，采用PhoneGap将运行在WebView组件上的Web组件打包为ios应用程序。

5.根据权利要求1所述的方法，其特征在于，所述页面设计步骤采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。

6.根据权利要求5所述的方法，其特征在于，移动终端平台前端Web组件采用AJAX实现与后台数据库的数据交互。

7.根据权利要求1所述的方法，其特征在于，所述接口设计步骤采用jQueryMobile建立兼容移动终端平台的统一用户界面接口。

8.一种跨平台移动终端应用程序开发系统，包括：

页面设计模块，设计具有Web页面结构的移动终端平台前端Web组件；

接口设计模块，建立兼容移动终端平台的统一用户界面接口；

封装模块，将通过统一用户界面接口接收的前端Web组件跨平台打包为应用程序。

9.根据权利要求8所述的系统，其特征在于，所述封装模块采用PhoneGap对运行在不同移动终端平台WebView组件上的Web组件封装为对应的应用程序。

10.根据权利要求8所述的系统，其特征在于，所述页面设计模块采用HTML5设计具有Web页面结构的移动终端平台前端Web组件。