基于CORDOVA的跨端混合式移动应用的研究与应用

路瀚程，霍小卫

郑州西亚斯学院信息化建设与管理处，河南郑州，450000

0 引言

随着城市功能服务的聚集性增强，流动人口管控问题日益突出，如何解决流动人员的登记和安全问题，确保社会和治安状况处于可控和可查，是中国许多城市面临的巨大挑战。本文以某中心城市试点实行利用PDA智能读卡设备对城中所有中小旅馆的旅客进行信息采集为研究对象，探讨利用H5混合开发技术开发一种APP服务平台并调用PDA的读卡设备对旅客信息进行实时采集和上传，公安部门可后台实时监控城市各种小旅馆的人员住店和离店，并对异常人员信息进行预警和分析处理。

1 移动开发的三种模式比较

移动互联网应用开发从技术路线上分为移动中间件、原生态和混合式开发Hybrid APP等，三种路线各有优劣。基于中间件平台的移动开发模式适用于已经具有成熟业务系统的前提下，该模式开发效率高、成本低、周期短，但同时所开发的移动客户端功能受限于现有业务系统的功能，无法做深度开发；原生态开发模式适用于没有现成业务系统并且对移动客户端的功能和界面定制要求较高的前提下，该模式开发效率低、成本高、周期长，开发的客户端功能更加丰富、用户体验更加良好，能支持直接对移动设备的原生功能调用；混合模式开发允许使用本地资源的调用能力，所开发出来的APP具备跨端运行能力[1]。经过对比实际开发需求和技术结构，我们选择使用混合开发模式作为开发环境。

2 混合式开发相关技术

2.1 CORDOVA插件

CORDOVA技术的产生为混合开发提供了可编辑的原生功能调用方式，可以在不使用ANDROID或者IOS的情况下实现设备驱动。本文所描述的项目中关于使用PDA读取公民身份证的信息即是通过该技术实现，其中PDA提供了读取公民身份证的标准ANDROID SDK包，利用CORDOVA技术对该二次开发包进行的重新定义和封装，使得可以通过一个JS文件实现对接口中身份证读取方法的调用。

2.2 WEX5跨端开发工具

HTML5是一种标准的前端开发语言，目前能支持该语言的开发工具很多，比如：HBuilder、WEX5等，经过对不同工具的试用和比较，我们发现在快速开发、一站式部署以及对CORDOVA插件的支持等方面，WEX5更符合本文开发需求[2]。WEX5是一个完全开源的移动开发工具，它不仅具备主流移动开发技术所必需的功能，更重要的是它支持所有对移动设备的CORDOVA插件，在进行文字、通信、图片、音视频等方面只需通过简单的JS开发即可实现原生功能调用。

2.3 REST API软件架构风格

REST API提供了一组设计原则和约束条件，交互在请求和响应之间是无状态的，服务器在请求之间重启都不会对客户端造成影响，基于这个风格设计的软件更简洁、更有层次、更易于实现缓存等机制[3]。在本应用中，需要采集旅客身份信息并实时上传服务器，通过在服务器端创建REST API服务，利用WEX5实现对REST服务的调用，从而实现客户端与服务器端的数据交换。

3 移动旅客信息采集平台设计和实现

移动旅客信息采集平台功能包括存储过程模块、NVO插件、SatRda状态监测模块、身份证读取CORDOVA调用模块、数据采集模块以及设备拍照模块等。其中，存储过程转换为标准的REST API服务给前端使用，NVO插件实现旅店信息逻辑计算，SatRda模块将存储过程和NVO插件转换为REST服务，身份证读取模块通过调用CORDOVA插件读取身份证信息，数据采集AJAX实现前端和后端REST服务的通信，原生照相模块实现对旅客照片的实时采集和上传。

3.1 存储过程NVO实现

基于上述原理实现“旅客信息上传”的存储过程（sp_t_floating_info），通过JAVA等开发工具设计为标准的NVO对象，SatRda根据自己的运行处理机制将该NVO对象运行GOLANG语言配置为可进行远程过程调用的REST服务。旅客信息采集过程中，可通过H5代码以及JS对该REST API进行调用，从而实现移动端的数据采集上传。数据采集的部分核心代码如图1所示。

图1 公民身份信息读取上传的实现

3.2 利用CORDOVA插件实现身份证信息采集

利用CORDOVA插件实现信息采集的过程如下：首先，利用Android环境对身份证信息读取过程进行原生开发，编写读取身份证的JAVA类和读卡方法；然后，基于该类编写JS方法调用类中的读卡方法并配置在配置文件中，用JS根据配置文件路径执行调用并回调；最后，将编写好的文件按照CORDOVA标准封装过程进行封装，将该插件部署到WEX5的开发环境中，H5的前端利用JS调用封装好的CORDOVA插件实现对身份证的读卡操作[4]。

本项目使用的PDA是身份证专用读取设备，对身份证的读取过程通过标准的处理过程实现，包括上电IDCardPonwer1操作、实例化HsSerial操作、打开设备Init操作、卡认证Authenticate操作、读卡Read_Card操作、照片解码Unpack操作、退出Close操作等[5]，该逻辑过程为系列化和事务化，通过统一的JAVA类和读卡方法进行封装实现。读卡部分核心代码如下：

获得设备控制实例以后，需进行上电和打开操作，该部分操作耗费一定的时间，需要将其放在新线程中执行并提示用户正在上电和打开设备，在进行多次连续设备使用的时候，不需要每次都执行上电、打开再关闭、断电操作，此操作流程仅需执行一次，在长时间不再使用设备的时候调用关闭和断电方法。

3.3 利用CORDOVA插件实现旅客照片的采集

WEX5平台封装了进行设备拍照的原声调用插件，只需要将该CORDOVA插件引入WEX5平台并调用即可。手机拍照过程中，拍照参数有两种：一种是DATA_URL模式，即拍照返回的照片是Base64位格式；一种是FILE_URI格式，即拍照返回的是文件目录。第一种模式支持直接将调用返回的值上传至服务器但无法保存至本地，第二种模式支持将图片保存在本地但无法直接上传服务器。

采用拍照插件的开发需要注意如下事项：拍照插件的getpicture方法参数中destinationType定义拍照的图片产生的模式，JS因为安全问题不能直接读取绝对路径下的图片，展现图片如果采用DATA_URL模式，返回的内容为Base64为字符串，必须通过DATA_URL转为Base64，再将该值赋值给img图片组件，在该模式下图片无法保存到手机本地图片库，同时无法将图片转存到数据库保存。如果选择FILE_URI模式，返回的是图片的绝对路径地址并保存在本地图片库中，该方式存在的问题是由于JS不支持直接使用本地路径，必须将FILE_URI模式返回的图片路径转Base64位方式后，再赋值给img图片组件。

3.4 使用WEX5的数据绑定实现旅客信息展现

WEX5提供数据组件绑定数据输出，本文旅客信息展现模块采用Listgroup组件方式，将旅客住宿信息和照片按照列表组的方式进行展现。旅客内容通过数据组件绑定方式获取到数据库中的数据，旅客照片通过JS调用本地图片存储库实现展现。具体实现过程如下：①新建数据组件checklistdata，定义数据组件的字段及字段类型；②定义数据库的REST服务，将旅客信息展现的内容以服务形式抛出；③设置数据组件和REST服务的绑定关系，组件字段和REST接口字段的映射；④设置数据展现控件，将控件使用的数据源设置为数据组件字段；⑤执行数据加载操作，将旅客住宿信息展现到页面上。实现代码如下：

3.5 利用AJAX调用REST服务实现旅客信息同步

AJAX可以使网页实现异步更新，这种交互式方式对用户来说最直观的感受是在进行页面刷新时感觉不到页面重新加载的闪动[6]。本项目中利用AJAX功能实现了旅客住宿信息和公安系统的同步，实现过程如下：首先，使用PDA设备读取旅客身份证并进行拍照；然后登记旅客住宿的信息，调用REST进行权限验证和有效性验证；最后，调用AJAX完成旅客信息的上传和同步并返回处理结果。该功能的部分核心代码如下：

4 结语

WEX5是一种新的HTML5开发平台，相比原生开发有较大的优势，CORDOVA作为Apache的开源项目，在开源插件平台上也有大量开发者贡献的高质量原生调用插件，这些都为混合式开发提供了坚实的技术基础。本文所述的移动应用项目就是利用这种混合式开发技术实施的实际案例，整个开发过程无论从成本上还是时间上，都要比原生开发具有更强的优势，作为移动互联网发展的新业态，基于CORDOVA和H5的混合式开发模式是值得尝试的选择。