Ionic开发环境构建

ionic简介

The beautiful, open source front-end SDK for developing hybrid mobile apps with HTML5.
Ionic是帮助你用HTML5，CSS和JavaScript等Web开发技术构建具有原生味道移动应用的开发框架。
Ionic同时也是一个开源的前端框架。
Ionic注重的是视觉效果和用户体验，使用了AngularJS和SASS来构建很各种界面的效果。
Ionic结合Cordova(PhoneGap的开源版)的编译平台，可以轻松实现编译打包各个平台的应用程序。

安装ionic与cordova

如果要开始Ionic开发，需要先安装 Node.js
官网地址：https://nodejs.org/
下载安装好nodejs之后，运行以下命令安装ionic与cordova：

$ npm install -g cordova ionic

安装完后在cmd或者终端输入ionic：

看到命令提示，就表示安装成功啦。

开始构建一个ionic App

ionic提供多种模版来构建项目：

$ ionic start myApp tabs   //创建带有tab导航栏的示例项目   
$ ionic start myApp sidemenu  //创建带有左侧带有menu栏的示例项目   
$ ionic start myApp blank   //创建空白项目   

运行ionic App

$ cd myApp   
$ ionic serve

在chrome浏览器里面打开服务地址，并且按F12打开开发者工具进行调试：

开发者工具打开设备模式，在emulation选项中，选择需要的模拟器设备类型。

添加Android平台

安装android平台首先需要搭建Android开发环境。

$cd myApp   
$ionic platform add android 
$ionic build android   
$ionic emulate android   

真机调试，打包需要安装Ant，安装完毕后运行:

$cd myApp    
$ionic run android 

常见错误

...android/cordova/build: command failed with code 8   
you may not have the required environment or OS to build this project   
error:......

目前cordova 版本是4.3.0，默认对应android api 21；之前使用cordova版本4.2.0 ，默认对应android api 19
如果使用的是android api 19 ，可以尝试将cordova 降级到 4.2.0 版本或者升级SDK到21
降级方法：

$npm uninstall cordova -g   
$npm install [email protected] -g

添加IOS平台

需要先安装ios-sim

$npm install -g ios-sim

然后执行命令

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios