技术干货：前端开发之IONIC移动端开发

本文作者：上海驻云Web前端工程师 著名2.5次元患者 黄志彪 （头像与真人一模一样）

以下正文

一：前言

Ionic是一套HTML5 Hybrid Mobile应用开发框架，基于AngularJS框架，使用Sass框架编写核心CSS代码，并且提供了一套CSS组件库和JavaScriptUI库,支持订制Android和IOS插件，支持PhoneGap库开发移动端原生应用，使用Ionic可以很方便的开发跨平台的移动应用。接下来介绍如何在MAC下搭建Ionic开发平台和开发移动端应用。

二：Ionic开发环境搭建

其实Ionic开发环境搭建起来很简单，大家可以先到其官网上看看了解下，官网上还提供了Ionic Lab工具用于实时预览项目效果和Ionic View用于分享你的项目。官网地址（http://ionicframework.com/getting-started/）。

搭建开发环境主要包括以下几个步骤：

步骤一：

npm install -g cordova ionic （全局安装ionic和cordova）

步骤二：

安装Android SDK用于安装Android模拟器和将Ionic打包成AndroidAPP，在MAC下你可以使用HomeBrew安装，在终端输入：brew install android-sdk。安装成功以后在终端输入android命令，打开Android SDK Manager工具，并且选择最新的版本进行安装。

注意，如果在安装过程中出现JAVA版本问题，你需要更新JAVA版本。如果出现Ant的报错信息，你可以通过brew install ant 来安装Ant。

三：Ionic项目开发

环境安装好以后，开始进行我们的项目开发，创建一个Ionic的项目，在终端输入ionic start来创建我们的项目，在Ionic官网上有三个模板可供我们选择，分别是blank、tabs和sidemenu。接下来我们创建一个名为myproject的项目，并且使用tabs模板创建默认带上tabs的项目，运行ionic start myproject tabs命令，创建成功后进入该项目目录运行npm install和bower install安装依赖的包，依赖包安装成功以后我们可以用ionic serve运行我们的项目，这样我们就可以在浏览器中看到项目的运行结果。

接下来我们来看看通过命令来编译和在模拟器中查看我们的app。首先得为我们的项目添加IOS和android的两个平台。

使用ionic platform add ios 来添加IOS环境：

使用ionic platform add android 来添加android环境：

安装完成后，我们开始在ios和android平台下编译我们的项目。使用ionic build ios和ionic build android来分别编译ios平台和android平台，IOS编译最后出现BUILD SUCCEEDED 和 Android编译最后出现BUILD SUCCESSFUL及代表编译成功。编译成功后，我们可以在模拟器上查看我们的项目，首先，我们通过ionic emulate ios将项目安装到IOS simulator里面，如果出现错误：

Error: ios-sim was not found. Please download, build and install version 1.7 or greater from https://github.com/phonegap/ios-sim into your path. Or 'npm install -g ios-sim'; using node.js: http://nodejs.org/

那就执行npm install –g ios-sim。

Ionicemulate ios命令执行成功后，系统会打开ios simulator，并且安装我们的项目：

接下来我们执行ionic emulate android命令来启动我们的android模拟器安装并查看我们的项目:

在模拟器上可以看出ionic在不同的平台显示效果会有所差异，这是根据不同平台用户使用习惯来自动设置的，比如在ios下，tabs都是在下面，而在android下却是在上面，当然我们可以通过代码配置来设置tabs始终在上面或者下面，在项目目录www/js/目录下，找到app.js，在该文件中加入一段代码：$ionicConfigProvider.tabs.position('bottom');这样，tabs就始终被设置到底部了。

上面我们介绍完了通过命令行来编译及在模拟器中查看我们的项目，我们也可以使用ionic Lab工具来编译查看项目，如图：

四：Ionic+Cordova开发

Cordova插件允许通过JavaScript调用移动端原生应用及组件，比如摄像头、播放器、文件系统、弹出框等等，使得我们的应用更加接近Native App。接下来我们通过安装device插件来了解下如何使用cordova插件,在安装插件之前，我们需要先安装ngCordova依赖包，在终端输入命令bower installngCordova，然后在index.html引入ngcordova的JavaScript文件：

首先通过进入到我们的项目跟目录里面，通过命令：ionicplugin来查看项目中已经安装的插件：

当前列出来的即使项目中已经安装的插件，插件列表大家可以进入网站：https://cordova.apache.org/plugins/?platforms=cordova-android%2Ccordova-ios中查看,如图：

接下来我们安装我们的插件cordova-plugin-device插件，在终端执行命令:ionic pluginadd cordova-plugin-device 将插件添加到项目中，如图：

然后我们在angular的controller中通过$cordovaDevice服务来获取设备信息，如：

效果如图：

五、常用命令介绍

除了上面提到的一些命令，Ionic还有其他的几个常用命令，如下：

ionic server 在浏览器中启动项目

ionic platform 查看已经安装的平台或者可以安装的平台。

onic platform add 添加平台

ionic platform remove 移除平台

ionic build 编译已经安装的所有平台

ionic build 编译指定的平台

ionic plugin 查看已经安装的所有插件

ionic plugin add 安装指定的插件

ionic plugin remove 删除指定的插件

ionic emulate 启动所有已安装平台的模拟器

ionic emulate 启动指定平台的模拟器

ionic run 在没有连接设备的情况下相当于ionic emulate

ionic run 在指定设备中部署运行项目，没有设备连接的情况下相当于ionic emulate

六、其他

1、如果项目在ios9及以上版本出现显示的问题，可以打个补丁,进入github：

https://gist.github.com/IgorMinar/863acd413e3925bf282c下载补丁，并在项目中引入该JS文件。

2、在MAC下，将应用运行在iphone上面实时查看效果：

打开xcode，选择“文件->打开”进入到项目根目录下/platform/ios,然后在“device”中选择自己的iphone手机设备然后点击左侧的运行按钮即可安装到手机中，点击如图中框住的地方进行device选择：

好啦~本文到这里就结束了，同时，如果喜欢我们的话就赶紧订阅我们吧~~~每天定时推送新鲜干货~~~也可以关注我们的微信公众号：架构云专家频道每天同步更新哟~~~