资讯 · 分享前沿信息

摘要： 移动APP开发是目前最流行的程序开发，很多以前做Web应用的公司或个人都在往移动APP开发转型。如何在已有的Web应用系统之上快速开发出APP产品，很多人会选择把前端页面改版成Html5+CSS3，但是这种开发模式开发出的产品有很多缺点，比如：性能低下、兼容性差、不易维护等

随着移动智能终端的广泛应用和4G网络的普及，移动App的应用范围越来越广泛，已经成为人们日常活动中不可缺少的一部分。移动App开发也已经成为程序开发人员学习研究的主要方向。移动App开发模式多种多样，想要做移动App开发，选择适合自己的开发模式至关重要。

1 移动App开发模式

目前开发移动App有以下几种方式[1] 2：（1）原生/Native：使用原生SDK开发App。优点运行流畅，有足够的开发成本的话，这是最理想的方式；缺点是对不同的平台要分别开发，需要android和IOS两个开发团队，学习成本高，开发成本高、开发周期长。（2）原生脚本/NativeScript：将原生API封装成JavaScript接口。NativeScript方式与原生相比性能损失不大。优点是开发语言统一使用JavaScript；缺点也是要针对不同的平台分别开发，开发成本高。（3）原生+Web/ Hybrid：主要功能使用原生技术开发，部分扩展功能调用Web页面。优点是比纯原生开发周期短，页面更新方便；缺点也是开发成本较高，调用Web页面会对App的性能和用户体验有很大影响。（4）混合/Hybrid：使用Web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的Web技术开发，避免了不同平台原生开发体系的学习，学习成本低，上手快、效率高，一次开发多个平台全部搞定；缺点是在android平台性能上有一些损失。

分析完这些开发方式，不难发现，如果是资深的Web开发人员想转型做移动App开发，最好的选择还是Hybrid开发方式。

2 Ionic开发框架简介

Ionic开发框架[2]1，号称Advanced HTML5 Hybrid Mobile App Framework是AngularJS 移动端解决方案，可以使用 Web 技术构建出接近原生体验的移动App。Ionic 主要关注外观和体验，以及应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。AngularJS[3]1是Google公司推出的一款优秀的前端JS框架，已经被用于Google的多款产品当中。Angularjs主要特性有整体框架符合MVC设计思想，模块化和依赖注入以及双向数据绑定等。

3 Ioinc开发移动App

3.1 移动App开发初体验

经过一段时间对Ionic开发框架的研究，笔者发现其实在Ionic框架里通过配置插件的方式可以调用Java类里的方法，这种混合开发方式，可以方便地把一些复杂的Java代码移植到App应用里，这样一来就可以大幅提高App运行效率，弥补Hybrid开发方式的弊端。

图1 登录界面

以系统登陆加密常用功能介绍一下在Ionic框架里如何调用已有Java类里的方法。

Ionic开发App的效率确实惊人，在已有后台Java登陆系统的情况下，笔者只用了1h左右的时间就可以打包出一个简单Android版的App应用做登陆测试(此App应用其实就是在Ionic自带demo应用的基础上加入了一个登陆界面，打开应用前先路由到此登录界面)。登录界面如图1。

3.2 不做加密的登录不安全

在没有做加密登录时，用户输入的用户名和密码是作为明文直接发送到后台web应用服务器，下图是用Chrome浏览器调试时截取到的请求信息。

图2 请求信息

由此可以看出，这样发送用户登录请求是极其不安全的，所以通常都要对用户输入的个人信息做加密处理以后才提交请求给后台，后台再做解密处理来得到用户输入的真正信息。其实在做移动端App之前，通常都已经有做好后台服务端的Web应用程序，也就说现在已经有写好的处理加密解密的Java类，那么如何让App能直接使用这个Java类呢，这就本文要着重介绍的在Ionic框架里通过配置插件的方式来访问已有Java类的方法（本文的Web服务端使用的是3DES加密解密方式，对应的有一个ThreeDesUtils.java的类提供了encrypt加密方法和decrypt解密方法）。

图3 Android目录结构

3.3 使用已有的加密算法制作移动端加密插件

首先来看一下使用Ionic框架打包生成的Android应用的目录结构，如图3。

这里主要看3个目录 www，plugins，platforms。其中www目录里是本文设计的展示给用户页面。

plugins目录里是注册使用的插件，platforms目录里存放的是最后打包好的App项目，这里打包的是Android应用，所以里面会生成一个Android目录。

要配置一个cordova插件，首先在plugins目录里新增一个cordova-plugin-threedes目录，目录结构如图4。

图4 cordova-plugin-threedes目录结构

手动新增一个名称为plugin.xml的配置文件，文件固定为此名称，因为用Ionic打包应用时，系统会自动扫描插件目录里所有plugin.xml文件，并进行插件的注册，plugin.xml配置文件内容如下：

根据内容可以看出，这里主要配置插件的名称，插件的引擎，使用的平台（只配置了Android平台，如果想要支持IOS平台，只需要在文件中再增加一个<platform name="ios">对应的配置即可），以及插件代码在平台代码中的生成路径，具体配置方式可以参考目录原有的其它插件。

然后需要在plugs目录下的android.json文件中再做一下配置，在文件中找到原有插件相对应的位置增加与原有插件类似的配置，具体如下代码：

最后就是编写处理加密的Java类，其中ThreeDesUtils.java就是后台Web应用的加密解密类，直接拷贝过来即可。ThreeDesPlugin.java是需要在前端AngularJS中调用的插件类，它必须要继承于Cordova插件类来实现，而且必须还要实现execute方法，这样前端

以上代码其实很简单，就是把传入的用户名和密码做一次3DES加密，具体加密方法是调用已有的java类，然后拼装一个json对象放入callbackContext回调函数中返回给前端。

最后只需要在系统登录请求发送前，调用此插件传入用户输入的用户名和密码，取得加密的用户名和密码后，再发送请求去后台Web服务端验证登录信息即可实现App的加密登录。

下面是截取的部分代码：

代码中cordova.exec就是cordova提供调用插件的方法，方法的第1参数是插件处理完成后的回调函数，第2参数是plugin.xml中配置插件的名字，第3个参数是插件类里需要传入的方法名，第4个参数是插件类里做处理时需要的参数。这里插件处理完成后的回调函数的参数result就是ThreeDesPlugin类的execute方法拼装返回的json对象，即已经加密的用户名和密码。

把以上代码应用到之前做的App应用中，然后再用Chrome浏览器监控一下登陆请求，如图5，可以看到这时请求发送的用户名和密码就已经是加密后的字符了。

（3）以次充好方面。把便宜的土豆粉混入面粉中来制作面包，甚至更有黑心的制造商为节省面粉，在制作面包的过程中加入尘土、粉笔末和融水石膏[1]。

图5 登陆请求

4 结束语

至此一个通过调用原有Java加密类来实现android版移动App加密登录的功能就完成了。可见在已有Java代码的基础上开发Android App是非常方便快速的，米维信息认为对于很多以前做Java Web 应用的开发者来说，想从事App开发，Ioinc开发框架绝对是个不错的选择。