基于Ionic的混合移动应用的研究与实现

摘 要： 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）

Abฌstract： 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 sถolution.

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]。Web App可以跨多个平台提供一致的用户界面，因为外观取决于浏览器而不是操作系统。但Web App完全依赖于网络，当处在离线状态时，App基本无法使用，用户体验差。

⑶ Hybrid App

Hybrid App是指混合移动应用，同时使用网页语言与程序语言编写，包含原生视图和Web视图两种方式，使用方式和Native App一致，而又继承了Web App实时更新、开发成本低等优点[2]。Hybrid App托管在使用WebView的本机应用程序中，用户界面操作逻辑及部分静态资源驻留本地，因而，App的部分功能可以离线使用。如表1所示，Hybrid App相比于其他类型App，有很多优点。在开发成本、平台独立开发和维护所需的时间方面，Hybrid App是最好的选择[3]。

表1 Native App、Hybrid App、Web App对比

[ Native App Hybrid App Web App 跨平台 差 优 优 体验 优 中 差 开发难度 难 易 易 开发周期 长 短 短 开发成本 高 低 低 安装 需要 需要 不需要 ]

2 Ionic框架

2.1 Ionic简介

Ionic是免费、开源、轻量级的Hybrid App框架，用于使用HTML5、CSS3、SASS（CSS扩展语言）和JavaScript等Web技术开发跨平台移动应用。Ionic比较注重终端用户的体验及移动应用的交互[4]，它主要有如下几个特性。 ⑴ 提供多种UI组件。Ionic为开发者提供了多种Native风格UI组件，丰富的CSS库，包括Button、Grid、List、Menu、Tab和Toggle等。这些组件颜色样式繁多，界面现代化、美观，用户体验度极高。

⑵ 将TypeScript作为编程语言。TypeScript是JavaScript的超集，因此，所有的JavaScript代码都可以用于Ionic的移动App开发。Typescript允许开发者编ฑ写用于处理用户数据的复杂逻辑，以提供良好的交互式用户体验。

⑶ 集成到Angular中。Angular是一个JavaScript框架，旨在实现前端驱动的动态Web应用程序的轻松开发。该库扩展了HTML语法，并支持依赖注入、路由、表单验证、深层链接、模板化、数据绑定等功能。

⑷ 采用Cordova插件。Cordova针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在Cordova框架下可通过JavaScript访问设备本地API[5]。Ionic Native是Cordova/PhoneGap插件的封装，开发者可通过它将所需的本地功能添加到应用中。

⑸ 使用简单。①Ionic图标库Ionicons提供许多图标供开发者使用。②Ionic的推送服务使App能够将本地推送通知发送到另一个平台上的设备。③Ionic Lab允许同时开发和测试App，每次在开发或测试过程中进行更改时，它都能快速更新源代码，实时展现App的界面。④Ionic拥有自己强大的命令行Ionic CLI，用于搭建、开发以及部署Ionic应用。

2.2 环境搭建

⑴ 安装Ionic CLI和Cordova。Ionic App主要通过Ionic命令行（“CLI”）创建和开发，并使用Cordova构建和部署为本机应用程序。因此，要创建Ionic项目，开发者需要安装最新版本的CLI和Cordova。首先安bNode.js，在官网下载Node.js 6或更高版本的安装包进行安装，然后继续安装Ionic CLI和Cordova进行App开发：$ npm install -g ionic cordova。

⑵ 创建一个Ionic项目。安装完成后，便可创建一个空白的Ionic项目：$ ionic start MyIonicProject blank，也可以使用Ionic的模板如tabs、sidemenu、super及tutorial等。

⑶ 在浏览器中调试程序。开发者可以在控制台中通过cd命令进入项目文件夹：$ cd MyIonicProject，若要在浏览器中快速预览App，可使用serve命令：$ ionic serve。

⑷ 部署到设备。在App开发过程中，使用浏览器或模拟器可以快速、轻松地调试App，但最终测试Ionic Native插件或App制作完成时，App不得不在设备上进行调试以达到准确测试的目的。如果要运行App，只需在命令行运行$ ionic cordova run android/ios -device，之后便会产生App的调试版本，并在设备上运行。

2.3 Ionic懒加载

懒加载是一种设计模式，页面只在第一次启动应用时才加载。如果用户导航到新页面，那么该页面的组件将立即加载。但是，这并不意味着它总是在改变页面的时候加载组件。实际上，它只加载第一个访问页面，当我们再次访问该页面时，它不会加载。

Ionic的懒加载方式带来许多的新特性。①懒加载能够减少程序启动时间，减少打包后的体积，让用户体验更友好的加载，更快的响应，在优化内容交付和用户体验之间达成了平衡。②避免在每一个使用到某Page 的Module 或其他Page 中重复导入这个类（需要写一堆路径），大大的简化了代码量。③可以很方便的使用路由的功能，通过字符串key在任何想使用的地方获取某一Page。④让开发过程实时编译更快。

3 基于Ionic的移动微课App――JL设计

3.1 移动学习

移动学习（M-Learning）是指在移动电话或平板电脑上学习，其在数字化学习（E-Learning）中发挥了重要作用[6]。在信息化时代，移动学习的进步与发展已然成为必然的趋势。JL（Japanese Lesson）是一款基于移动学习的理念，致力于提高非专业日语学习者的学习效率与兴趣的App，主要有以下几个特点：

⑴ 个性化学习。学习者可根据自己的能力、时间安排等调节进度✪，满足了学习者的个性化需求。

⑵ 学习时间碎片化。JL所收录的微课时长为5-10分钟，简单清晰便于记忆，利于提高学习效率，极大地满足了非专业日语学习者的学习要求。

⑶ 发散性内容丰富，提高学习积极性。JL研发了单词、语法、文化等多个学习模块，学习闲暇之余，可帮助学习者提高学习趣味性。

⑷ 适用人群范围广。移动学习是建立在移动平台上的学习方式，即所有持有移动设备的适合学习的人群都是移动学习可适用范围。

3.2 JL架构设计

JL采用MVC架构模式（见图1），Model层用于封装数据及处理数据的方法，由User、Course、Dynamic、News组成，User用于存储用户数据，Course用于存储课程数据，Dynamic用于存储动态数据，News用于存储资讯数据；View层通过HTML5、CSS实现；Controller层采用TypeScript语言，通过方法监听和处理用户的请求，封装Services及API，接收基于HTTP协议的GET、POST请求，实现与Server的交互，另外，Controller层还可以调用Ionic Native已经封装好的Cordova/PhoneGap插件，实现拍照、SQLite数据库及视频播放等功能。

图1 移动微课App――JL架构图

3.3 JL界面设计

JL主要特点就是精炼，延展性强，产品的逻辑是简单化、模块化。JL的首页如图2，整体设计采用大图标模式，所见即所得，风格简约。在“我的课程”里，用户可根据自己的需求与兴趣，自定义学习，可续看自己的课程。“我的笔记”可用来写自己的学习感悟、理解和想法，并且用户可以根据自己的喜好来调节字体、颜色及模式。“活动中心”为App增加了极大的推广度，其获得一定的商业价值，让用户有参与感。

图3为全部课程的页面，用户可在此页面找到各种类别的视频。“发现”是JL独特的动态模块（见图4），用户可在此模块表达自己对日语学习的所想所感，也可以通过该平台增添学习好友，促进交流，共同进步。图5是个人信息的页面，用户可在此页面方便地管理个性化学习信息。

图2 首页 图3 课程

图4 发现 图5 我的

3.4 JL前后端交互

Ionic与后端存在于完全独立的空间中，后端所使用的技术与Ionic是完全不相关的。Ionic不直接与后端集成，只是与它通信。为使Ionic能够与后端交互，后端需要实现Ionic应用可以进行HTTP请求的各种API。JL的前后端是分离的，通信通过跨域请求，页面路由由前端处理，所有数据均通过HTTP请求获得，因而前后端开发互不影响，更有利于进行维护。JL的前端中可集中所有数据，所有页面均可以访问这些数据，从而避免了重复请求获取相同数据的现象，也减少了用户等待数据加载的时间。

3.5 JL数据库架构设计

JL数据库采用Apache+PHP+MySQL的组合，即Apache作为Web服务器，PHP实现数据库与服务器的连接，MySQL作为后台数据库。Apache是一个开放源代码的网页服务器。由于其可以在大多数电脑操作系统下运行和具有较高的安全性而被广泛使用，是目前使用排名第一的Web服务器[7]。若要访问MySQL数据库，JL先要利用HTTP协议发送Request请求给Apache，PHP根据请求访问MySQL数据库，并将读取的数据库内容封装成JSON格式，回传给JL客户端，JL客户端再对JSON解析，生成相应的页面。

3.6 JL优化

由于Android系统碎片化比较严重，不同Android版本的Webview的HTML5能力也有较大差异，导致Ionic应用的一致性难以保证。为了增强JL的性能，使JL在装有低版本Android系统的设备上也能流畅地运行，Crosswalk作为渲染运行时的引擎被集成到JL中。 此外，Crosswalk还在不同的移动系统中作为运行时引擎运行，以自动更新基于不同平台的渲染引擎[8]。为减小带宽压力，同时给用户人性化体验，JL对其所播放的视频进行编码处理。视频采用HEVC/H.265编码。HEVC可提高视频编码效率，在相同的图像质量前提下，压缩率比H.264/AVC高档次（high profile）提高一倍；支持各类规格的视频，从QVGA（320×240）到1080p（1920×1080），直至超高清视频4320p（7980×4320）；在计算复杂度、压缩率、鲁棒性和处理延时之间妥善折中处理[9]。

4 结束语

Ionic拥有一个庞大的国际开发商和贡献者社区，促进其成长，在4年的快速发展中，Ionic已成为世界上最受欢迎的移动应用开发框架之一。随着硬件的升级、框架的优化，Ionic App逐渐趋近于Native App的体验，以Ioinc为代表的混合移动应用逐渐变成了一种趋势。

参考文献（References）：

[1] 章斓.基于HTML的Web App的开发与探索[J].长沙大学学

报，2015.29（5）：50-53

[2] 陆钢，朱培军，李慧云等.智能终端跨平台应用开发技术研究[J].

电信科学，2012.5：14-17

[3] A. Khanderparkar， R. Gupta and B. Sindhya. An

introduction to Hybrid Platform Mobile Application Development[J]. International Journal of Computer Applications，2015.118（15）：31-33

[4] R. Khanna， M. Harlington. Getting Started with Ionic[M].

Birmingham， UK： Packet Publishing Ltd， 2016.

[5] 朱P南，李艳平，申闫春等.基于Ionic和Cordova的跨平台移

动APP的研究与应用[J].电脑知识与技术， 2016.12（1）：119-121

[6] M. Saylor. The Mobile Wave： How Mobile Intelligence Will

Change Everything[M]. US： Vanguard Press，2012.

[7] 凌质亿，刘哲星，曹蕾.高并发环境下Apache与Nginx的I/O

性能比较[J].计算机系统应用，2013.22（6）：204-208

[8] Ning Wang， Xuemin Chen， Gangbing Song， Qianlong Lan，

Hamid R.Parsaei. Design a New Mobile Optimized Remote Laboratory Application Architecture for M-Learning[J]. IEEE Transactions on Industrial Electronics，2017.64（ღ3）：2382-2391

[9] 朱秀昌，李欣，陈杰.新一代视频编码标准―HEVC[J].南京邮

电大学学报（自然科学版），2013.33（3）：1-11