高兴建 花晓慧 邢溧萍

摘 要： Ionic框架是一种开源软件开发工具包（SDK），用于开发具有HTML5，CSS和JavaScript的混合移动应用。开发者可使用HTML5、CSS、TypeScript来创建可在Android，iOS和Windows Phone上有效部署的移动应用程序。文章讨论了这三种开发模式的优缺点，阐述了如何基于Ionic开发混合移动应用，并通过开发实例——移动微课App，证明了方案的有效性。

关键词： Ionic； 混合应用； HTML5； Angular； TypeScript； Cordova

中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2018）03-31-04

Research and implementation of Ionic based hybrid mobile application

Gao Xingjian1， Hua Xiaohui1， Xing Liping2

（1. Institute of Computer Science & Technology， Nantong University， Nantong 226019， China； 2. Institute of Foreign Languages， Nantong University）

Abstract： Ionic framework is an open source Software Development Kit （SDK） for developing hybrid mobile application with HTML5， CSS， and JavaScript. Developers can use HTML5， CSS， TypeScript to create mobile application that can be effectively deployed on Android， iOS and Windows Phone. This article discusses the advantages and disadvantages of three development modes， and elaborates how to develop an Ionic based hybrid mobile application. And through a development instance， the mobile micro-class App， proves the effectiveness of the solution.

Key words： Ionic； HybridApp； HTML5； Angular； TypeScript； Cordova

0 引言

移动智能终端得到普及，移动学习逐渐兴起。日语学习者已不满足于书面化的资源，對在线学习资源的需求日益增加，现有的网络资源良莠不齐，难成体系，难以满足人们利用碎片化时间自主学习日语的需求。同时由于所需设备多，系统版本各异，移动学习平台的开发与维护成本较高。企业成本的增加，会间接增加日语学习者的学习费用。

可喜的是，近年来Ionic、Cordova、React Native、Xamarin及Framework7等一系列跨平台移动应用框架的出现，大大减少了App的开发成本，同时又不影响用户体验，是企业移动开发的首选。本文以Ionic框架为例，在基于对Ionic的研究之上利用Web技术构建一个移动微课App。

1 App开发模式

现如今，有三种主流的App开发模式：Native App、Web App和Hybrid App。

⑴ Native App

Native App是一种基于智能手机操作系统的本地化应用，静态资源下载在本地，可以支持在线或离线访问资源，具有良好的交互性和可靠性，用户体验非常优秀，是高品质产品的首选开发模式。但由于设备众多，系统版本各异，开发与维护较为复杂，App的开发成本很高。

⑵ Web App

Web App，即网络应用。它是一种依赖于Web浏览器，通过网络进行访问的应用程序[1]。……