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

来源 :软件 | 被引量 : 0次 | 上传用户:dianq
下载到本地 , 更方便阅读
声明 : 本文档内容版权归属内容提供方 , 如果您对本文有版权争议 , 可与客服联系进行内容授权或下架
论文部分内容阅读
  摘  要: 目前市场上存在的操作系统种类繁多,针对不同的操作系统要开发不同的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.
其他文献
摘 要: 为有效评估软件化雷达(software defined radar, SDR)系统的软件质量,建立了软件质量评估指标体系总体架构,给出了各评价指标的概念定义和评测方法。首先介绍了SDR的概念内涵、体系架构和典型特征。然后,在对系统软件进行分类的基础上,结合现有的软件质量评估指标,增加反映SDR系统典型特征的指标,并从功能性、可靠性、易重构性、合规性等8个方面,对系统软件的各项指标进行探讨
期刊
摘 要: 装配式斜交空心板桥受力比较复杂,在设计装配式斜交空心板桥时一般按正交桥来计算配筋,然而在竖向荷载作用下,其内力、应力、挠度都与相应的正交桥有明显的差别。本文通过对一座已建装配式斜交空心板桥分别进行单梁、整体梁格Midas civil模型计算,并与荷载试验结果相对比,得出了装配式斜交空心板桥的受力特点,指出了按正交桥来设计装配式斜交空心板桥在内力、应力、挠度等方面所存在的误差,为今后类似装
期刊
摘 要: 本文对X线肠胃诊断床旋转控制方法进行研究,采用可变差动支点结构实现X线肠胃机诊视床在旋转的同时床体斜向上升,利用单片机控制电机速度,实现床身旋转过程中床尾不会触及地面。  关键词: X线胃肠机;可变差动支点;单片机控制  中图分类号: TP211+.4 文献标识码: A DOI:10.3969/j.issn.1003-6970.2019.04.021  本文著录格式:张敏燕,王雅楠,
期刊
摘 要: 文章简述了DevOps概念、基于DevOps的软件开发流程,并以D平台为例对开发流程的每一步给出了示例。DevOps本质上是将IT开发与运维合并,借助强大的管理工具,引入容器化技术使当前系统环境部署过程由IAAS转向PAAS,用以规范系统间调用关系,并基于PAAS基础之上整改配置项及数据,使其与系统服务分离,实现灵活配置,快速实施。DevOps是软件开发管理未来的发展趋势。  关键词:
期刊
摘 要: 从超声图像中准确分割甲状腺区域是甲状腺疾病手术计划的关键之一。本文一方面,针对甲状腺超声3D图像,提出利用边缘指示函数和面积项系数改进的距离正则化水平集演化(Distance Regularized Level Set Evolution,DRLSE)模型来实现甲状腺区域的有效分割;另一方面,根据3D超声图像相邻帧之间甲状腺变化较小的特点,通过计算已分割图像的质心,作为相邻帧图像分割初始
期刊
摘 要: 电力通信网普遍应用OTN网络,OTN网络运行维护对电网安全生产起到重要作用,通过不断研究、实践,确立OTN网络运行四要素:光功率、色散、光信噪比、非线性效应,从这四个方面结合OTN网络主要性能参数指标,对网络维护进行深入研究,探索OTN系统多波平坦度维护要点,放大器标称参数优化,线路调整对OTN网络影响情况。  关键词: OTN;电力通信网;光信噪比;色散;非线性效应;平坦度  中图分类
期刊
摘 要: 随着我国的新能源电站的装机容量的不断增加,区域电网限电现象越来越严重。本文针对新能源电站发电受限时,如何公平的制定各电站调度计划的问题,提出了一种基于IAFSA-SFLA的新能源电站公平调度方法。本文所提方法主要包括两部分,第一部分为新能源电站二阶段公平调度模型,第二部分为基于IAFSA-SFLA(改进人工鱼群-蛙跳算法)用来对调度模型进行求解。通过测试函数验证本文所提算法的有效性,并编
期刊
摘 要: 为了研究地理空间信息语义层次上的统一描述,文章在对地理空间信息特征分析的基础上,基于本体论的语义构建思想,选取五元组GeO=的本体组织基础结构,其中C表示概念集合或者类(各种实体和现象)、R表示关系集合(属性和空间关系等)、F表示函数(计算概念间某些特定关系的函数)、M表示公理(针对概念或关系的约束条件)、I表示实例(对象);以旅游出行计划为例,对概念、关系
期刊
摘 要: 在互联飞速发展的过程中,云计算技术的使用能够在智慧校园建设中起到较大的作用,不仅能够提高学校的数字服务管理水平,还能够促进教育的进步。所谓“智能校园建设”就是将云计算技术与物联网技术相结合,为教育提供新的发展思路,为学校更好地培养人才,通过云计算,能够加强智慧校园建设。  关键词: 云计算;智能化;校园建设  中图分类号: G613.4 文献标识码: A DOI:10.3969/j.
期刊
摘 要: 探讨椎动脉阻断前后基底动脉瘤的血流动力学变化。采集基底动脉瘤患者颅内CTA影像DICOM格式数据,应用MIMICS 21.0软件三维重建椎动脉模型,应用3-matic软件对初步获得的模型进行修复,并使用Ansys ICEM软件对模型进行离散化网格划分,最后通过Ansys fluent软件对动脉瘤有限元模型进行数值模拟运算,获得颅内正常动脉与术前、术后动脉瘤部位血流速度、壁切应力、壁压力的
期刊