使用混合开发技术快速构建跨平台移动应用系统

许佩莹，禹亮，陈超智

（中国移动（深圳）有限公司，深圳 518048）

1 引言

移动互联网已成为中国网民上网的主流方式——截至2017年6月，中国手机网民占网民总数95.1%，达到7.24亿人[1]。移动应用的飞速增长为不少企业带来了二次发展的机遇。但是，移动应用需要适配不同的手机操作系统和不同的屏幕尺寸，其高昂的开发维护成本和较长的开发周期让不少企业望而却步。混合开发通过结合 HTML， CSS， and JavaScript等技术轻松实现跨平台、自适应屏幕的移动应用，是实现移动应用开发维护降本增效的一种有效的途径。

2 相关技术介绍

2.1 跨平台移动应用开发技术介绍

目前主流的移动应用开发方式主要可以分为Native App（原生应用）、Hybrid app（混合应用）及Web App（网页应用）。原生应用是专门针对某一种移动设备而开发的；网页应用使用HTML等技术开发，运行在移动应用浏览器、且与设备无关；混合应用则是以上两种方式的结合——使用一套与移动设备操作系统无关的代码来实现近乎于原生的跨平台移动应用。三者的比较如表1所示。

相对于Native App和Web App的开发，Hybrid App开发克服了Native App代码可移植性差以及Web App无法调用与设备相关功能的缺点，同时兼具Native App功能运行性能高及Web App开发入门门槛低、平台无关性的优点。Hybrid App开发具有学习、开发和维护成本低的特点，适用于需要在短时间实现能够覆盖多个移动操作系统的移动应用。

2.2 Ionic+Cordova技术介绍

表1 Native App、Hybrid App、Web App三种方式比较[2]

Cordova架构旨在让开发者使用Web技术开发跨平台的移动App，它拥有强大的跨平台访问设备能力。使用Hybrid App方式开发需要使用JavaScript，Cordova起到桥梁作用，把原生代码实现的各类设备API和我们需要调用的JavaScript API实现双向通信，这样就可以通过JavaScript直接调用原生API[3]。

2.3 Gulp技术介绍

Gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成。使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率[4]。

Gulp是基于Node.js的自动任务运行器， 它能自动化地完成JavaScript/coffee/sass/less/HTML/image/CSS等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。它与Grunt非常类似，但相比于Grunt的频繁IO操作，Gulp的流操作能更快地更便捷地完成构建工作[4]。

3 跨平台移动应用系统

3.1 应用架构

全网监控APP系统整体架构如图1所示。整个系统分前端App子系统、后台处理子系统和数据采集子系统。

(1）前端App子系统：采用Ionic+Cordova+Ang ularJS+Gulp+Cordova-iOS等多种前端技术结合，实现了一个具有跨平台、高效的代码压缩混淆、灵活的版本升级等特点的移动应用。

(2）数据采集子系统：通过BPM客户端、RUM软件、直采程序和探测脚本等多种采集技术结合，实现了多数据源采集的目标，将各省业务数据从省CRM、省BOSS以及省BOMC系统中采集到后台处理子系统中。

图1 系统整体架构

（3）后台处理子系统：系统后台采用当前流行的、轻量级的SpringMVC框架，集成数据访问组件MyBatis，采用Vertica、MySQL等数据存储中间件，实现对系统的后台管理功能以及向监控APP端提供接口服务。后台控制层集成了Java安全框架Apache Shiro权限框架，负责对系统用户进行登录验证、权限管理。

假设源节点发送信号功率PS和目的节点发送人工噪声功率PnD不变，中继节点发送总功率在天线数变化时不变，也即NPR=PRT不变，每根天线发送人工噪声的平均功率为PnR=βPR=βPRT/N，0≤β<1为人工噪声功率分配比例，相应，每根天线转发信号的平均功率为(1-β)PR=(1-β)PRT/N.

由于篇幅有限，以下仅对本系统前端APP子系统进行详细介绍。

3.2 客户端应用技术

本系统客户端App共有9大模块：登录、主页、月报、知识、考核、工单、监控、报告、个人中心。

（1）登录模块使用了基本的Ionic JavaScript UI组件中的视图和内容组件。

(2）主页模块主要是提供跳转到其他模块的入口，主要使用Ionic JavaScript UI组件中的滑动框组件。

(3）月报模块主要用于月报图表的展示，图表展示插件为Echarts，主要使用Ionic JavaScript UI组件中的视图和内容组件。

(4）知识模块用于展示知识库内容，使用了Ionic JavaScript UI组件中的滑动框组件。

(5）考核模块用于展示相应业务的考核标准，主要使用了基于Ionic框架二次开发的树型列表插件iontree-list。

(6）工单模块提供各类工单的查询入口，使用了Ionic JavaScript UI组件中的列表组件。

(7）监控模块提供各个业务渠道的监控数据信息，图表展示使用了highcharts和Echarts插件，同时使用了Ionic JavaScript UI组件中的滑动框和列表组件。

(8）报告模块以时间段和报告类型两个维度提供报告列表，使用了Ionic JavaScript UI组件中的列表组件。

(9）个人中心模块提供个人信息查询与设置等功能，使用了Ionic JavaScript UI组件中的列表组件，Cordova架构中的访问手机设备相机拍照和打开相册，文件传输的功能。

客户端用到的其他技术：Cordova架构的软键盘设置，文件传输和打开功能；Ionic JavaScript UI组件中的对话框、浮动框、加载、模板、路由组件以及配置项目选项、检索设备状态和平台信息的功能。

3.3 系统技术优势

3.3.1 运用自动化构建工具Gulp进行代码压缩混淆

Ionic+Cordova技术打包后的项目缺少对代码进行混淆压缩的功能。代码混淆压缩有两方面的好处，一是可以减少App安装包的体积，二是可以防止App被反编译时暴露接口。基于此，我们亟需引入了新的打包工具对代码进行混淆压缩。

本系统选择引入自动化构建工具Gulp，实现了App代码规模压缩减小了为原来的50%；在代码混淆方面，替换了变量名和方法名，让JavaScript文件在部署发布后不容易被看懂，这样就有效防止了App被反编译时暴露接口。

3.3.2 有效版本升级管理

App发布新版本时，会将源代码生成Android和iOS两个打包文件并将其部署在服务器上同时修改数据库中App的版本号。当用户需要对App版本进行升级时，服务器会根据Android和iOS两个的系统将对应的新的安装包下载到用户手机上并自动进行升级安装。

Cordova提供的原生设备API只能用于Android系统的安装包下载和安装，但对于iOS系统，其App的版本升级只能从App Store中检查是否有新版本然后进行版本升级，不能像Android系统那样直接下载安装包进行安装。这就需要采取措施针对iOS系统实现特殊的版本升级。

引入Cordova-iOS版本升级方式，该方式是基于Cordova架构对iOS系统版本升级原生实现方式进行封装，使得该方式内的API能通过JavaScript进行访问。同时对其进行改造，使得App升级不再是从App Store中检查更新，而是用iPhone打开Safari浏览器进入安装包下载页面，从而实现有效的App版本升级。

3.3.3 多路并行数据采集功能

数据采集模块采用多种采集程序，通过定时、循环地进行快速、高效、多路并行的数据采集，保证了业务数据的及时性、可靠性。由于本系统数据来源于多个系统，数据采集的过程中的难点在于各系统的数据结构、数据类型各异，因此我们根据各个系统的特点采用了不同的数据采集方法，针对各个系统定制化地采集数据，只采集我们业务需要的相关数据。

3.3.4 自定义注解组件实现多数据源集成

为快速实现4个分别建设的App快速整合，本系统采用自定义注解组件的方式实现了Vertica、MySQL等多个数据源的集成，使得本系统的后台管理系统同事连接多个数据源，充分发挥Spring框架的AOP特性，也保证了系统的高效性和安全性。

4 结束语

本文提出了一个具有高效代码混淆、灵活版本升级、多数据源采集等特点的跨平台移动应用系统，但系统在采集性能等方面仍有优化的控件，在今后拟进行以下改进：（1）为了提高监控APP接口性能，需要充分发挥Redis缓存的功能，对于后台中调用比较频繁的接口数据要在缓存中做备份，尽量缩短接口耗时，优化用户体验。（2）数据采集程序后期计划对接大数据平台，实现各省数据的快速采集，提高数据的及时性、可靠性、安全性，同时也保证了监控数据的可用性，真实的反应各省业务运营情况。

[1] 中国互联网络信息中心. 中国互联网络发展状况统计报告[R].北京: 中国互联网络信息中心, 2017:8.

[2] 程远. 聊聊WebApp、HybridApp与NativeApp的设计差异[EB/OL].http://www.uisdc.com/web-hybrid-native-app.

[3] 朱凯南, 李艳平, 申闫春, 等. 基于Ionic和Cordova的跨平台移动App的研究与应用[J]. Computer Knowledge and Technology电脑知识与技术, 2016.

[4] 郭小北. gulp详细入门教程[EB/OL]. http://blog.csdn.net/xllily_11/article/details/51393569.