Ionic入坑指南（创建项目）

什么是Ionic？
Ionic是一个基于Angular的手机web app开发框架，它包含了一整套手机端的UI组件，和一系列的功能服务组件，能满足大部分手机web应用的开发需求。Ionic提供了一个命令行的工具ionic-cli，可以通过选项来帮助创建不同版本项目脚手架。同时，我们在进行移动端开发时会结合Cordova来将它打包成手机应用。换句话说，Ionic提供了一整套完整的手机app开发的解决方案，从创建项目、开发、测试、打包、生成app都提供了完整的工具。是‘居家旅行’必备的好帮手。

什么是Cordova？
Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来，并依靠符合标准的API绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。

如何安装Ionic？

首先我们使用npm来进行安装。打开终端，输入以下命令

$npm install -g ionic

安装Cordova

$npm install -g cordova

创建项目

$ionic start Tabs tabs 

这里ionic start 是根据项目脚手架创建一个项目，Tabs是我们项目的名字 tabs是脚手架的模板。Ionic提供了几个模板可以让我们快速开始。通过命令$ ionic start -l可以查看，例如tabs,blank,sidemenu等。

创建完成后,ionic 会在我们的项目中使用npm install下载依赖包，但是这个时候依赖包非常的大，而且使用npm可以说几乎要么慢死，要么就是失败。所以这里手动ctrl + C停止它，然后进入我们的项目中，使用cnpm install来安装依赖。

如果没有安装过淘宝的镜像 那么就先使用以下命令安装

$ npm install -g cnpm --registry=https://registry.npm.taobao.org 

安装完成后 下载依赖。就可以在项目中找到node_modules.

运行项目

进入我们的项目根目录下，执行命令

$ ionic serve

第一次执行的时候，会提示我们 

Looks like this is an Ionic Angular project, would you like to install @ionic/cli-plugin-ionic-angular and continue?

输入yes 并回车。

然后 就可以在浏览器中打开http://localhost:8100/，我们的项目就在上面运行了。

我们通过$ionic serve 启动了在web端的项目。但是往往我们需要用Ionic来创建iOS平台和Android平台的项目，那么我们又该怎么做呢？

以博主使用的MacPro为例，来创建iOS平台和Android平台的环境。

首先我们先介绍iOS平台。

我们知道iOS平台只能通过Xcode来编写代码，相应的，如果我们要搭建iOS平台的环境，就需要先安装Xcode和iOS模拟器。

Xcode可以在苹果商店进行下载，这个就不多说了。

如果要在Ionic中来启动苹果的模拟器或者真机调试，那么就需要先在Ionic中安装模拟器和真机调试

//真机运行环境$sudo npm install -g ios-deploy

运行上面的命令 可能会出现错误，如果出现错误 就换用下面的命令来运行

$sudo npm install -g ios-deploy --unsafe-perm=true

//安装模拟器$sudo npm install -g ios-sim

现在 我们可以通过命令$ionic info 来查看对应的环境配置信息

配置好了iOS平台的环境以后我们可以通过以下命令来为我们的Ionic工程添加对应的platforms

$cordova platform add ios

同样，在运行了这条命令以后，可能会出现错误

或者

遇到上面的问题 对应的解决方法是采用以下命令

$cordova platform rm ios$cordova platform add ios --nofetch

这样就能在我们创建的项目中添加平台成功了。

成功添加平台以后 使用以下命令进行编译和运行

$cordova build ios$cordova run ios

我们就会看到我们的项目跑在iOS的模拟器上咯。

搞定了我们的iOS平台，接下来就是Android平台。Android平台配置有点麻烦，如果之前没有用过Android原生开发的朋友来说，那么从头开始配置Android的环境就得费点功夫了。

不过没关系，Kingsley会努力的把所有的步骤都介绍清楚。

首先，我们需要下载JDK和Android SDK

提供几个下载地址

Android SDK:http://developer.android.com/sdk/index.html

JDK：http://www.oracle.com/technetwork/java/javase/downloads/index.html

你可以通过下载Android Studio来搭建环境，也可以单独下载Android SDK 我这边是单独下载了Android SDK

下载安装完成后，我们就需要为它们配置应用环境

打开你的Terminal，如果你的终端使用的bash，那么就在根目录下使用命令

vim .bash_profile

如果你用的zsh，那么对应的是

vim .zshrc

然后写入 对应的配置 保存后 使用命令

source .bash_profile

或者

source .zshrc

博主这边两个文件都写入了，万一哪天抽风想换，省得麻烦

写入的环境变量配置如下

写入成功后，可以通过以下命令来验证是否成功

$java -version$adb

可以看到如下信息，就说明成功了

你以为现在就已经成功了么，别天真了，还早着呢。

接下来，你要通过android 命令召唤图形界面，进行下载对应的SDK包，哎 ，怎么辣么麻烦。耐心点，慢慢来

终端输入命令 $android 召唤

把需要的都勾上。这期间下载时间很长，够你等的。

下载成功后。

返回我们的项目下，通过之前一样的命令，添加Android平台

$cordova platform add android --nofetch

添加平台后，执行

$cordova build android

这期间，问题可就又来了咯。可能需要你安装Gradle。你可以通过homebrew 来安装

$brew install gradle

安装成功后

执行以下命令运行

$cordova run android

结果，又错了。

这是因为我们没有添加对应的模拟器机子

终端输入命令

$android avd

然后创建对应的安卓机子

再次运行$ cordova run android

模拟器打不开。这又是什么鬼，别急。有办法解救

打开我们Android SDK的解压目录

噢，原来有安装噢，接下来，在终端输入命令 需要最高权限

$sudo 目录/silent_install.sh

这样就装好了。

最后再重新运行，就成功了。