这段时间在做手机应用开发，由于目前部分缺少Android开发人员，所以想做个WebApp的形式，然后用phoneGap打包，先做第一个样品试用。研究了比较多的开发框架，后来自己用AngularJS和Ratchet搭建了一个小框架，做的差不多了，然后感觉有些限制，用cordova编译之后，在Android平台上的运行效果并是不太好。所以又看了一下其他的框架，比如：Lungo和QuoJS等，突然发现了一个目前比较先进的框架ionic，所以就拿来用用。目前文档比较少，有的也仅是翻译官网的，所以我把自己的配置过程记录一下，分享给喜欢的同学。 教程索引：(持续更新) ionic中文教程

ionic简介

ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。目前绑定的与angularJS和SASS。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

ionic安装

首先需要安装cordova和android环境。这个参考我的另一篇文章：phoneGap之Android环境搭建，上面写的很详细，还有常见的错误及解决办法。 然后安装ionic:

1	npm install -g ionic

安装完成之后，就可以使用ionic创建项目了。

1 2 3

ionic start myApp tabs //创建带有top栏和bottom栏的示例项目 ionic start myApp sidemenu //创建带有左侧带有menu栏的示例项目 ionic start myApp blank //创建空白项目

具体效果，可以查看官网： http://ionicframework.com/getting-started/ 然后可以使用：

1	ionic serve

该命令会自动启动流浏览器，查看当前效果。

添加Android平台

添加android平台之前，需要先搭建Android开发环境。参考phoneGap之Android环境搭建 如果是MAC系统，请参考苹果MAC之Android环境搭建与phonegap集成
执行下面的命令,

1 2 3 4

cd myApp ionic platform add android //这行可能会报错 ionic build android ionic emulate android

其实上面的使用方法和cordova差不多，添加android的时候可能会报错，如下：

1 2 3 4 5 6 7 8

The error is: ======================================= events.js:72 throw er; // Unhandled 'error' event ^ Error: spawn ENOENT at errnoException (child_process.js:1000:11) at Process.ChildProcess._handle.onexit (child_process.js:791:34)

解决的方法很简单，将ionic换成cordova即可，经测试works fine。

1 2 3 4

cd myApp cordova platform add android //这行可能会报错 cordova build android cordova emulate android

添加ios平台

需要先安装xcode，升级mac系统，安装最新的xcode版本。安装完xcode之后要启动一下，会安装一些组件。 首先安装ios-sim，然后添加ios平台。

1 2 3 4 5

npm install -g ios-sim cd myApp ionic platform add ios //这行可能会报错 ionic build ios ionic emulate ios

需要注意的坑爹事情来了，这是我亲自实践的，爬了好多的stack overflow，尝试了很多次，最后得到了结果。 在mac Mavericks 10.9.5 上安装Xcode 6.0.1之后，自动安装的是ios模拟器 是ios8.0版本，这个版本下不论你怎么搞，使用模拟运行命令时都是会报错的。错误如下：

1 2 3 4 5 6

Session could not be started: Error Domain=DTiPhoneSimulatorErrorDomain Code=2 "Simulator session timed out." UserInfo=0x7fe6e8f240d0 {NSLocalizedDescription=Simulator session timed out.} Error: /Users/chale/ionic/iosApp/platforms/ios/cordova/run: Command failed with exit code 1 at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:135:23) at ChildProcess.emit (events.js:98:17) at maybeClose (child_process.js:766:16) at Process.ChildProcess._handle.onexit (child_process.js:833:5)

关于这个错误网上的解决办法是, 直接启动模拟器，然后如下图操作，选择reset content： 但是这个在ios 8.1下面是没用的，试了好多次，或许在早些版本有用。参考stack overflow的朋友的解决方法是： 进入Xcode->Preferences->Downloads，下载安装ios 7.1 simulators，然后在Product->Destination 中选择ios7.1，这样就正常了。 参考地址：http://stackoverflow.com/questions/12932750/ios-simulator-failed-to-install-the-application
今天又试了一下，成功了，还是ios8.1 但是是iphone 6.看下图： 上面是实例项目: 4.1 ionic文件选择与上传

xcode和模拟器sdk下载

如果你的xcode和ios sdk下载慢，试试下面的地址，已经共享到网盘。 Xcode下载 Xcode 6.2 Beta 2: http://pan.baidu.com/s/1c0pNFC8 Xcode 6.2 Beta: http://pan.baidu.com/s/1i3xe1qH Xcode 6.1.1 GM SEED: http://pan.baidu.com/s/1hqKhaGO 支持Yosemite和Mavericks。 Xcode 6.1 正式版: http://pan.baidu.com/s/1dDtOkJv 这个应该就是6.1的正式版了，支持Yosemite和Mavericks，包含iOS 8.1、OS X 10.10 、OS X 10.9的SDK，其中对Swift的语法和一些方法又有一些小改动。 Xcode 6.1 GM seed for OS X Yosemite： http://pan.baidu.com/s/1gdAEFBl Xcode 6.1 Beta3： http://pan.baidu.com/s/1gdxNxej Xcode 6.1 Beta2（Swift 1.1）： http://pan.baidu.com/s/1c0GPT8c Xcode 6.1 Yosemite版： http://pan.baidu.com/s/1bnH7LwV Xcode6 GM版： http://pan.baidu.com/s/1mgl1veC Xcode6 Beta7： http://pan.baidu.com/s/1q5u1K Xcode6 Beta6： http://pan.baidu.com/s/1c0peVsc 这是修复崩溃Bug的版本，版本号是(6A280e)。国内小水管下载相当不易。。支持的顶一下。。。 注：如果安装Xcode6 Beta6之后，编译之前的项目出现forceBridgeFromObjec以及getter、setter的问题，具体看这里。 Xcode6 Beta5： http://pan.baidu.com/s/1sjPmaW9 可以说目前Xcode的每一个Beta版都修复了很多问题，如果你在用Beta版的话，保持最新总能解决很多疑难杂症。这一版中，对Swift的跳转定义终于变得好用了。
模拟器下载 安装SDK就等于安装了模拟器，如果你嫌Xcode下载SDK太慢的话，可以选择手动安装，具体的手动安装方法：解压后放到以下目录即可。 /Applications/Xcode.App/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs
iPhone Simulator 8.0 SDK: http://pan.baidu.com/s/1nt0XE8T iPhone Simulator 7.1 SDK: http://pan.baidu.com/s/1sjO6enF iPhone Simulator 6.1 SDK: http://pan.baidu.com/s/1F7mto

其他常见错误

1. 生成项目(ionic start myApp tabs)时可能会报错，如下：

1	Error: command failed:fatal:could not create work tree dir:'C: Users/ADMINI~1 AppData Local Temp plugman git 1402853493773'.:No such file or directory

解决办法：进入上面对应的目录，建立对应的文件。比如在temp目录下建立plugman目录，在plugman目录下建立git目录，然后再git下建立1402853493773目录。即可，经测试有效。

本文链接:https://it72.com/1702.htm