随着移动互联网的飞速发展, 各种基于不同智能移动操作系统的应用层出不穷。如何开发一种通用的移动应用程序, 可以经过简单修改甚至不修改就可以在不同的移动操作系统上运行是目前移动应用开发研究面临的重要核心问题。本文首先介绍了跨平台移动应用开发的基础知识HTML5和CSS3, 理论上HTML5提供了一个很好的跨平台的软件应用框架, 可以设计符合桌面计算机、平板电脑、智能电视、智能手机的应用。然后介绍了目前比较流行的移动应用程序开发框架Ionic, 以及Angular JS和Cordova框架。最后本文介绍了Ionic+Angular JS+Cordova跨平台移动应用开发环境的搭建。
HTML5与CSS3作为Web前端的主流技术, 已成为互联网的热门话题之一。2012年12月, HTML5规范定稿, Google、Microsoft等公司的最新版本的浏览器都纷纷开始支持HTML5标准规范。2014年10月, W3C发布HTML5的正式推荐标准, HTML5不仅在PC端, 在移动端上也有广泛的应用。到2015年, HTML5已在跨平台、游戏、移动开发等领域全面展开, 为移动互联网行业发展助力。
HTML5在语法上与之前的HTML版本是兼容的, 同时也增加了很多新的特性, 这些特性主要有:1) 良好的语义特性;2) 强大的绘图功能;3) 增强的音频播放和控制功能;4) HTML5的数据存储和数据处理的功能;5) 获取地理位置信息;6) 提高页面响应的多线程;7) 方便用户处理文件和访问文件系统的文件API。
与HTML5一样, CSS3则是实现良好体验和丰富交互的主流技术。2015年4月发布CSS3基本用户接口模块的标准工作草案, 逐渐成为各浏览器支持的标准。CSS3把CSS分解为一些小的模块, 更多新的模块也被加入进来。CSS3中的模块包括:盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。但CSS3的各模块仍在不断更新, 特别是浏览器对CSS3特性的支持也在不断的变化与更新。
下面就目前比较流行的几个跨平台移动应用开发框架做一个介绍。
Ionic是一个强大的HTML5应用程序开发框架。可以帮助您使用Web技术, 比如HTML、CSS和Javascript构建接近原生体验的移动应用程序。Ionic主要关注外观和体验, 以及和你的应用程序的UI交互, 特别适合用于基于Hybird模式的HTML5移动应用程序开发。Ionic是一个轻量的手机UI库, 具有速度快, 界面现代化、美观等特点。
Ionic具有如下特点:1) 基于Angular语法, 简单易学;2) 它是一个轻量级框架;3) 完美的融合下一代移动框架, 支持Angularjs的特性, MVC, 代码易维护;4) 提供了漂亮的设计, 通过SASS构建应用程序, 它提供了很多UI组件来帮助开发者开发强大的应用;5) 专注原生, 让你看不出混合应用和原生的区别;6) 提供了强大的命令行工具;7) 性能优越, 运行速度快。
Angular JS诞生于2009年, 由Misko Hevery等人创建, 后为Google所收购。是一款优秀的前端JS框架, 已经被用于Google的多款产品当中。Angular JS有着诸多特性, 最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入, 等等。
Angular JS特性如下:1) 它是一个功能强大的基于Java Script开发框架用于创建富互联网应用 (RIA) 。2) 为开发者提供的选项 (使用Java Script) 在一个干净的MVC (模型—视图—控制器) 的方式来编写客户端应用程序。3) Angular JS写的应用都是跨浏览器兼容, Angular JS使用Java Script代码自动处理适应每种浏览器;4) 它是开源的, 完全免费的, 并且由数千名世界各地的开发者开发维护。总体来说, Angular JS是一个用来构建大型应用, 高性能的Web应用程序的框架, 同时使它们易于维护。
Cordova提供了一组设备相关的API, 通过这组API, 移动应用能够以Java Script访问原生的设备功能, 如摄像头、麦克风等。Cordova还提供了一组统一的Java Script类库, 以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统:i OS, Android, Blackberry, Windows Phone, Palm Web OS, Bada和Symbian。Cordova是贡献给Apache后的开源项目, 是从Phone Gap中抽出的核心代码, 是驱动Phone Gap的核心引擎。你可以把他想象成类似于Webkit和Google Chrome的关系。
Ionic+Angular JS+Cordova跨平台移动应用开发环境的搭建主要分为以下几个步骤:
1) 安装Node.js。Node.js是一个基于Chrome V8引擎的Java Script运行环境。它使用了一个事件驱动、非阻塞式I/O的模型, 使其轻量又高效。Node.js的包管理器npm, 是全球最大的开源库生态系统。安装Node.js首先需要从网上下载最新版本的Node.js, Node.js的安装过程较简单, 安装步骤省略。安装完成后, 在命令行使用命令 (node-v) 查看Node.js的版本, 如果Node.js已经安装成功, 就会出现已经安装的Node.js的版本号。
2) 安装Ionic。在命令行输入命令 (npm install-g ionic) 安装Ionic。如果之前安装过Ionic, 需要用命令 (npm uninstall-g ionic) 先卸载掉。Ionic安装完成后, 输入命令 (ionic-version) 看Ionic的版本号, 请确保安装最新版本的Ionic。
3) 安装Cordova。安装Cordova使用命令行, 输入命令 (npm install-g cordova) 安装Cordova。Cordova安装完成后, 输入命令 (cordova-version) 查看Cordova的版本号。
4) 安装Android或者IOS开发平台。开发者可以根据自己的需要安装Android或者IOS开发平台。如果安装Android平台, 需要先安装JDK, 注意JDK的版本需要在1.8以上, 然后在安装安装Android SDK。安装完成后, 使用命令 (adb version) 检验一下Android SDK是否安装成功。
完成以上安装后, 开发人员可以使用命令 (ionic start my App tabs) 创建一个App应用。
综上所述, 本文对跨平台移动应用开发技术做了研究, 首先介绍了跨平台移动应用开发的基础知识HTML5和CSS3;然后介绍了Ionic、Angular JS和Cordova框架;最后介绍Ionic+Angular JS+Cordova跨平台移动应用开发环境的搭建。
摘要：跨平台概念是软件开发中的一个非常重要的基本概念, 既不依赖于操作系统, 也不依赖硬件环境。本文首先介绍了跨平台移动应用开发的基础知识HTML5和CSS3;然后介绍了一个强大的HTML5应用程序开发框架Ionic, 以及Angular JS和Cordova框架;最后介绍Ionic+Angular JS+Cordova跨平台移动应用开发环境的搭建。
关键词：跨平台,HTML5,移动应用,Ionic
[1] 刘德山, 章增安, 孙美乔.HTML5+CSS3Web前端开发技术[M].人民邮电出版社, 2016.
[2] 徐巍.跨平台移动开发框架的比较分析与实例开发[D].吉林:吉林大学, 2014.
[3] 梁稣.基于Ionic和Phone Gap移动跨平台开发技术研究与应用实现[D].昆明:云南大学, 2016.
[4] 房洪瑞, 姜振凤, 韩春润, 张胜龙, 李桂玲.基于HTML5的移动校园资讯平台的应用研究[J].信息技术, 2017, 1 (9) :8-10.
[5] 张玉晴, 黄瑾娉.基于HTML5的跨平台移动应用关键技术的研究与实现[J].工业控制计算机, 2013, 3 (9) :56-58.
推荐阅读：
中国移动业务管理平台09-24
英语口语100平台应用05-26
基础教育资源应用平台05-31
移动通信技术行业07-23
移动通信技术期末答案07-12
短信平台在汽车行业的应用10-03
信息平台开发合同09-10
技术平台发展规划06-03
技术服务支付平台07-12
财经类实验教学平台构建与应用论文09-22
