首页 > 代码精文 > Program > ionic框架配置教程
2015
03-31

ionic框架配置教程

这段时间在做手机应用开发,由于目前部分缺少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目录。即可,经测试有效。

最后编辑:
作者:leehom
leehom
本博客主要是把自己的经验记录于此,方便自己以后查阅及其他遇到类似问题的朋友参考。如果你有觉得不错的文章,可以注册会员发布文章或者邮箱发给我文章地址,谢谢!
捐 赠如果觉得文章还不错,请麻烦点下广告,算是赞助下本站服务器费用,谢谢!

留下一个回复