基于Ionic的App跨平台混合开发技术的研究

常振业 刘佳伟 闫茜茜

摘  要： 目前市场上存在的操作系统种类繁多，针对不同的操作系统要开发不同的App。而跨平台App开发可以做到一次开发，多平台兼容。本文主要介绍了基于Ionic框架下的手机App开发，在Ionic框架下通过与Angular和Cordova框架的结合，只开发一种所需要的App版本即可去适用于当前大部分的操作系统，并以无人超市App为例简述基于Ionic框架下通过与Angular和Cordova相结合的开发流程。

关键词： 跨平台;移动App;混合开发;Ionic框架

中图分类号： TP311    文献标识码： A    DOI：10.3969/j.issn.1003-6970.2019.04.047

本文著录格式：常振业，刘佳伟，闫茜茜，等. 基于Ionic的App跨平台混合开发技术的研究[J]. 软件，2019，40（4）：215218

【Abstract】： There are many kinds of operating systems in the market，and different App are developed for different operating systems. While cross-platform App development can be done in one development and multiple platforms. This paper mainly introduces the App development based on the Ionic framework. Through the combination of the Ionic framework and the Angular and Cordova framework， it only develops one version of the App it needs to be applicable to the current operating system. Taking the unmanned supermarket App as an example， the development process of the Ionic framework and the Angular and Cordova technology is briefly described.

【Key words】： Cross-platform; Mobile App; Ionic framework

0  引言

在移動互联网高速发展的今天，App的开发与应用也发展的异常迅速。但生活中使用到的操作系统种类繁多，针对不同操作系统需开发相对应的App版本，耗时长、成本高。经过技术的不断发展与研究，我们发现可以通过基于以Angular JS为基础的Ionic跨平台移动开发框架来开发多系统相兼容的App版本。跨平台混合开发的优点就在于只需一次编写和开发，就可以实现多平台互通，简单易学，并适应于大多场景[1]-[2]。使用Ionic跨平台移动开发框架开发的产品主要是用于界面结构的网页视图模板、定制后生成的CSS渲染文件和包含数据业务逻辑的JavaScript文件等[3-4]。

1  Ionic简介

Ionic是由Angular JS衍生而来的HTML5混合开发技术，是一款混合移动应用的开发框架，针对构建混合的移动应用程序。它能让程序直接访问本地平台层，同时也是运行在浏览器内核里面的。混合应用程序的诞生肯定有许多过人之处，Ionic即是如此。首先在布局上，它的移动UI元素以及布局都是基于类原生风格。其次，Ionic作为一款前端的UI框架，一般App能设计的外观和一些UI交互它都可以做到。Ionic的类原生风格布局和它的UI元素都是Ionic和一般的响应式框架不同的具体表现。同时因为Ionic还是一款HTML5混合开发框架，所以它还要通过一款本地包装去运行原生应用，例如Cordova或PhoneGap等[5]。Ionic框架组成如图1所示。

通俗地说Ionic是在Angular基础上的一种延伸，再通过Cordova来封装的App构建方案。Ionic App本质上就是一个Web App，然后通过Cordova打包成一个Android、iOS的App或者桌面程序[6]。Ionic提供了许多符合移动平台界面外观的UI组件，以帮助开发人员开发功能强大的Internet App移动应用程序。Ionic框架的目的是使用Web技术开发移动应用程序，而基于Apache Cordova的编译平台实现了编译和打包到各种移动操作系统平台的应用程序包。Ionic专为两款流行的设备设计，具有相当完美的表现层。利用Ionic提供的CLI，只需要通过输入一个命令就可以完成创建应用初始框架、构建  测试包，将应用程序部署到指定的平台设备或模拟器[7]。基于Ionic的跨平台App混合开发的总体架构图如图2所示。

2  基于Ionic跨平台App开发的相关技术

2.1  与Ionic交互的前端介绍

App的开发肯定会涉及到HTML5前端技术以便给用户以视觉感受和操作。Ionic开发亦是如此。广义的HTML5是HTML、CSS3和JavaScript的技术组合，是为了减少浏览器对插件的依赖而提供丰富的RIA应用。狭义的HTML5是对HTML标准的第五次修订，而HTML5是规定的一个标准。HTML即超文本标记语言（Hyper Text Markup Language）， 是一种标记语言，而HTML5能使开发者的工作大大简化。

CSS3：CSS的第三个版本。CSS（层叠样式表）是一组格式规则，是对Web的页面布局，即将网页做的美观。

JavaScript：JavaScript是一种常用语Web客户端编程的脚本语言，使网页在客户端浏览器中更加动态，显示出更丰富的视觉效果。在Web应用中，我们可以理解为HTML是人的躯干，CSS是人的衣服，JavaScript是人的各种动作与思想[8]。

2.2  与Ionic交互的Angular框架简述

Angular是一个用于设计动态Web应用的结构开发框架，它是用TypeScript构建。

Angular有几大特性[9]。分别有以下几点：

（1）Angular实现了M.V.VM模式，Angular使用M.V.VM模式获得了四大好处：

1. 低耦合;

2. 可重用性;

3. 开发与设计工作可分离;

4. 可测试性。

（2）Angular实现了模块化——在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AnguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定;

（3）Angular实现了声明式界面——Angular更清晰地界定了一个Web应用的组成部分;

（4）Angular实现了双向数据绑定——实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。

2.3  与Ionic交互的Cordova框架简述

一个普通的应用程序一般具有Android或者iOS两個版本，而不论你使用那种手机操作系统，当出现应用更新时，你都必须去及时更新才可使用新功能。对于移动开发则要做到多版本及时更新才能正常使用，这将极其不方便。使用Cordova开发可以使其变得更为简便，因为Cordova可以使代码只需一次编写，就可生成适应于多版本的功能。Cordova是一种基于HTML、CSS和JavaScript的，用于创建跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手机的核心功能——包括地理定位、加速器、联系人、声音和振动等，此外Cordova拥有丰富的插件可供调用。Cordova还允许客户使用标准Web技术进行跨平台开发，以避免在每个移动平台上使用本机开发语言。应用程序在每个平台的包中执行，并依赖于符合标准的API绑定来访问每个设备功能[10]。

3  基于Ionic跨平台App的实现

方案为Hybrid App开发方式。使用Ionic框架实现系统UI，对整体框架做以布局;通过MongoDB数据库和后端数据进行交互，实现数据的实时更新;并用Cordova插件来实现底层API的硬件接口调用，使App与手机的硬件设备紧密结合起来[11]。基于此方案我们开发出一个无人超市购物App，下面简要介绍该App的环境搭建和技术开发流程。

3.1  App开发环境的搭建

在进入编写前端App代码之前，首先需要保证

服务端API的可用，因此第一步是完成服务器端环境的部署与测试，验证其可以正常工作，然后依次部署服务器端环境。

（1）安装Node.js、NPM、Ionic CLI和Cordova等相关必备工具;

（2）通过命令npm install安装后端Node.js项目依赖的npm包;

（3）通过mongo启动MongoDB后台服务进程;

（4）用ionic start market tabs命令生成带完整导航栏的应用;启动所建目录下的index.js文件;

（5）使用mongo查询所建数据库是否已被初始化[12-13];

（6）使用postman测试端口以检测前后端数据交互进程。

所需要的开发环境搭建部署成功之后，可得到用Ionic内置命令生成的完整导航栏，其文件图如图3所示;通过Visual Studio Code软件我们可以打开相应文件。接下来可以在该平台下进行所需的编程开发。

3.2  创建项目框架

方案开发是基于Ionic实现，使用CSS来布局和渲染界面以及设计组件等，在高性能完成方案的同时，要达到最优的灵活性以及兼容性。接下来为初始化项目设置与目录结构。

（1）使用Ionic CLI初始化项目目录。

（2）使用命令Ionic start market tabs即可生成当前应用最多的三段式布局，并对其编入代码即可实现前端所需页面，Ionic的顶栏区总是位于设备屏幕顶部，底栏区总是位于设备屏幕底部，而内容区则占据设备屏幕剩余空间。

（3）Ionic内置导航类组件——生命周期、页面跳转与传值和侧栏等;一个成熟的移动App在视觉上对用户来说，一般是由多个可以互相跳转的功能和页面组成的。Ionic的跳转方式一般有Nav-Con?troller、ModalController的页面跳转方式和跳转传值。

（4）Ionic内置数据展示与操作组件。前面论述了Ionic提供的布局与定义App的整体框架的内容，现在介绍用Ionic开发移动App内容部分所要用到的各种常见界面组件要素。Ionic框架做了深度的设计封装，使开发者通过较少的代码量就能轻松实现专业的界面与功能效果。例如对话框、轮播组件等;浮动框、弹出框等提供了一种非侵入的方式来显示对话框，可应用于多个场景。

以对话框为例，其是在TypeScript代码里，先导入PopoverController并通过依赖注入页面的构造函数中，随后通过调用它的若干方法完成对浮动框的控制。而弹出框服务组件AlertController可以看成是缩小的模态框。在其完整的导航栏中添加所设计App的功能与实现代码。例如为App添加侧栏功能，导入PopoverController并通过依赖注入页面的构造函数中，通过调用它的若干方法对浮动框的控制。

（5）在使用Ionic framework生成的App中，还拥有直接与手机硬件进行交互和调用的功能，这种功能通过Cordova插件机制来实现。我们可以使用ionic cordovaplugin add命令来实现对Cordova插件的安装;Cordova插件是无法使用Angular的this对象和依赖注入的，只能通过访问全局的变量和方法来调用，此时我们可以使用它的开源Cordova插件，即Ionic Native插件集。其安装命令为ioniccordova plugin add cordova-plugin-device与npm install --save @ionic-native/device。同时我们可将Ionic Native作为依赖的模块注入App应用模块中。

（6）对所需要设计的App可通过相应的编程来实现，在此我们对我们所设计的无人超市App内容进行填充，采用上面所述的tabs与侧栏等功能来做以实现，编码完成后可通过命令Ionic cordova build --release android生成发布版的apk文件，也可对其生成iOS的apk文件。然后对其发布与签名就可以开始应用上架登记。其App部分页面圖如图4所示。

4  总结

方案前端使用Ionic框架开发，并用Cordova打包，在Ionic的Hybrid App与手机硬件调用问题中，引入了ng Cordova插件来实现。方案用目前流行的Ionic跨平台技术，实现了精准的前端页面设计，在性能方面，从加载、渲染等方面做了优化，并通过扩展等操作使用户达到良好的体验。最后简单示例了一款跨平台移动无人超市购物App，成功应用到Android与iOS平台中，验证了Ionic混合开发的良好性能，基于Ionic的App跨平台混合开发技术的研究得以实现，也验证其是一个可以开发使用的App开发模式。

参考文献

[1] 陆钢， 朱培军， 李慧云， 文锦军. 智能终端跨平台应用开发技术研究[J]. 电信科学， 2012， 28（05）： 14-17.

[2] 李丽平， 薛玉倩. 基于HTML5跨平台移动应用开发的研究与实践[J]. 河北软件职业技术学院学报， 2017， 19（02）： 35-38.

[3] 阮晓龙. HTTP协议状态检测与性能分析软件的设计与实现[J]. 软件， 2015， 36（07）： 136-141.

[4] 张呈宇. 基于HTML5的跨平台移动APP开发研究[J]. 通讯世界， 2018（08）： 46-47.

[5] 商锦， 林亮， 王雨， 张智. Ionic在混合模式APP中的应用[J]. 软件导刊， 2017， 16（05）： 132-134.

[6] 刘异， 赵辉. 基于IOS平台的移动搜课宝系统设计[J]. 软件， 2018， 39（06）： 118-124.

[7] 高兴建， 花晓慧， 邢溧萍. 基于Ionic的混合移动应用的研究与实现[J]. 计算机时代， 2018（03）： 31-34.

[8] 邢晓鹏. HTML5核心技术的研究与价值分析[J]. 价值工程， 2011， 30（22）： 157-158.

[9] 刘青丹， 王舒憬， 强杰. Ionic+AngularJS框架在跨平台旅游APP客户端系统中的应用[J]. 工业控制计算机，2018， 31（01）： 142-143.

[10] 朱凯南， 李艳平， 申闫春， 魏邓航， 余越. 基于Ionic和Cordova的跨平台移动APP的研究与应用[J]. 电脑知识与技术， 2016， 12（01）： 119-121.

[11] 臧进进， 鄂海红. 基于响应式Web设计的网页生成系统研究与实现[J]. 软件， 2015， 36（6）： 37-41

[12] 谢华成， 马学文， MongoDB 数据库下文件型数据存储研究[J]. 软件， 2015， 36（11）： 12-14.

[13] 白长清， 刘敏. MongoDB在气象传感器数据处理中的应用[J]. 软件， 2015， 36（11）： 34-37.