ionic框架配置

ionic概述

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

教程索引：(持续更新)
ionic中文教程

转载请注明出处：http://www.haomou.net/2014/08/07/2014_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目录。即可，经测试有效。

css组件

参考我的另一篇文章：ionic中文详解CSS组件

谢谢！

转载出处：http://www.haomou.net/2014/08/07/2014_ionic/