基于Ionic的App跨平台混合开发技术的研究常振业刘佳伟闫茜茜摘要：目前市场上存在的操作系统种类繁多，针对不同的操作系统要开发不同的App。而跨平台App开发可以做到一次开发，多平台兼容。本文主要介绍了基于Ionic框架下的手机App开发，在Ionic框架下通过与Angular和Cordova框架的结合，只开发一种所需要的App版本即可去适用于当前大部分的操作系统，并以无人超市App为例简述基于Ionic框架下通过与Angular和Cordova相结合的开发流程。关键词：跨平台;移动App;混合开发;Ionic框架：TP311：ADOI：10.3969/j.issn.1003-6970.2019.04.047本文著录格式：常振业，刘佳伟，闫茜茜，等.基于Ionic的App跨平台混合开发技术的研究[J].软件，2019，40（4）：215218【Abstract】：Therearemanykindsofoperatingsystemsinthemarket，anddifferentApparedevelopedfordifferentoperatingsystems.Whilecross-platformAppdevelopmentcanbedoneinonedevelopmentandmultipleplatforms.ThispapermainlyintroducestheAppdevelopmentbasedontheIonicframework.ThroughthecombinationoftheIonicframeworkandtheAngularandCordovaframework，itonlydevelopsoneversionoftheAppitneedstobeapplicabletothecurrentoperatingsystem.TakingtheunmannedsupermarketAppasanexample，thedevelopmentprocessoftheIonicframeworkandtheAngularandCordovatechnologyisbrieflydescribed.【Keywords】：Cross-platform;MobileApp;Ionicframework0引言在移動互联网高速发展的今天，App的开发与应用也发展的异常迅速。但生活中使用到的操作系统种类繁多，针对不同操作系统需开发相对应的App版本，耗时长、成本高。经过技术的不断发展与研究，我们发现可以通过基于以AngularJS为基础的Ionic跨平台移动开发框架来开发多系统相兼容的App版本。跨平台混合开发的优点就在于只需一次编写和开发，就可以实现多平台互通，简单易学，并适应于大多场景[1]-[2]。使用Ionic跨平台移动开发框架开发的产品主要是用于界面结构的网页视图模板、定制后生成的CSS渲染文件和包含数据业务逻辑的JavaScript文件等[3-4]。1Ionic简介Ionic是由AngularJS衍生而来的HTML5混合开发技术，是一款混合移动应用的开发框架，针对构建混合的移动应用程序。它能让程序直接访问本地平台层，同时也是运行在浏览器内核里面的。混合应用程序的诞生肯定有许多过人之处，Ionic即是如此。首先在布局上，它的移动UI元素以及布局都是基于类原生风格。其次，Ionic作为一款前端的UI框架，一般App能设计的外观和一些UI交互它都可以做到。Ionic的类原生风格布局和它的UI元素都是Ionic和一般的响应式框架不同的具体表现。同时因为Ionic还是一款HTML5混合开发框架，所以它还要通过一款本地包装去运行原生应用，例如Cordova或PhoneGap等[5]。Ionic框架组成如图1所示。通俗地说Ionic是在Angular基础上的一种延伸，再通过Cordova来封装的App构建方案。IonicApp本质上就是一个WebApp，然后通过Cordova打包成一个Android、iOS的App或者桌面程序[6]。Ionic提供了许多符合移动平台界面外观的UI组件，以帮助开发人员开发功能强大的InternetApp移动应用程序。Ionic框架的目的是使用Web技术开发移动应用程序，而基于ApacheCordova的编译平台实现了编译和打包到各种移动操作系统平台的应用程序包。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即超文本标记语言（HyperTextMarkupLanguage），是一种标记语言，而HTML5能使开发者的工作大大简化。CSS3：CSS的第三个版...