Ionic 是一个用来开发混合手机应用的Html5代码库,绑定了AngularJS和Saas.这个框架的目的是从Web的角度开发混合的手机应用,基于Cordova(Phonegap的核心)的编译平台,可以实现编译成各个平台的应用程序。Once write,Run everywhere.
Ionic整合了Cordova,AngularJS,一个CSS组件库和一个Javascript 的UI库,同时支持定制的android和IOS插件。
本人是在Mac 10.11.2 版本下进行开发的,需要安装的软件包括Node.js,Cordova,Ionic Android SDK和Xcode.
1 安装Node
在https://nodejs.org/en/官网下载最新版的Node.js,在运行的过程中,需要用到Node.js的npm包管理器。
2 安装ionic和Cordova
npm install -g cordova ionic
3 安装SDK
安装Android SDK
由于Google 在中国使用不了,所以可以从国内的镜像网站找到对应的android SDK,这里介绍的是中科院开源镜像协会的网站。http://mirrors.opencas.cn/android/ .下载android-sdk_r24.0.2-macosx.zip的SDK包,然后解压。
我是放在了/Users/用户/Library/Android/sdk目录下面,然后设置好系统变量。
进入控制行界面, 输入cd ~,进入主目录。
创建.bash_profile文件,如果有的话就直接添加。
输入export PATH = ${PATH}:/Users/用户名/Library/sdk/android-sdk-macosx/tools
然后保存,在控制台输入$PATH.
如果配置成功,会出现例如下所示的提示:
-bash: /usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin:/opt/X11/bin:/Users/dev/Library/Android/sdk/android-sdk-macosx/tools: No such file or directory
android sdk下面的各个目录功能如下:
docs:离线文档
extras:Google和其它设备的驱动程序
platform-tools:开发和调试工具
tools:更多的测试和调试工具
platforms:各个 Android SDK的安装目录
sources:所安装SDK的源码
然后开始配置Android SDK.
在控制台输入 android sdk,出现 sdk的管理界面。这里我们要设置一个国内的镜像代理,东软的镜像: mirrors.neusoft.edu.cn 。
在Android SDK Manager->Preferences中
http proxy server 输入mirrors.neusoft.edu.cn ,端口是80,然后把Force https:// 勾上,然后在Tools->Manage Add-on Site,中的User Defined Sites 中,将以下网址一个一个输入:
http://mirrors.neusoft.edu.cn/android/repository/addon-6.xml
http://mirrors.neusoft.edu.cn/android/repository/addon.xml
http://mirrors.neusoft.edu.cn/android/repository/extras/intel/addon.xml
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-tv/sys-img.xml
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android-wear/sys-img.xml
http://mirrors.neusoft.edu.cn/android/repository/sys-img/android/sys-img.xml
http://mirrors.neusoft.edu.cn/android/repository/sys-img/google_apis/sys-img.xml
http://mirrors.neusoft.edu.cn/android/repository/sys-img/x86/addon-x86.xml
http://mirrors.neusoft.edu.cn/android/repository/addons_list-2.xml
http://mirrors.neusoft.edu.cn/android/repository/repository-10.xml
然后勾选需要的Android API平台。这里介绍一个网址http://www.cnblogs.com/yjmyzz/p/4219829.html
专门设置android镜像代理。
将需要的平台建立之后,就可以建立一个Android模拟器。
输入 android avd,建立模拟器。输入模拟器的名称,设备(这里选nexus 5),目标平台(这里选API 22)及其它信息。启动模拟器,启动过程可能会比较长。还有一点需要注意,在ionic调试过程中,如果要调试Android平台,那么要先启动模拟器,不然会出现错误。
安装xcode编辑器
在app store上面直接找到xcode 编辑器进行安装,现在我需要的xcode版本是 6.x 以上。
所有的环境都安装完了之后,就可以开始项目的开发:
首先创建一个程序
ionic start myapp tabs/blank/sidemenu
myapp是项目名称,tabs/blank/sidemenu是ionic内置的网站模版
进入项目
cd myapp
ionic platform add ios //添加ios平台,android 平台改为android, 可在项目目录下输入 ionic platform看支持的平台
// ionic platform list
ionic build ios //编译ios
ionic emulate ios //模拟运行
也可以现在浏览器下面先试看运行效果
ionic serve
选择运行的地址,然后可以直接在浏览器中进行live load(实时加载)开发。
在运行过程中,可能出现类似的权限问题,可以直接添加sudo来运行,这是由于我们在安装npm包时用了sudo去安装导致的权限问题。
Error: EACCES, permission denied '/Users/dev/.config/configstore/update-notifier-cordova.json'
You don't have access to this file.
at Object.fs.openSync (fs.js:427:18)
at Object.fs.readFileSync (fs.js:284:15)
at Object.create.all.get (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:34:26)
at Object.Configstore (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/node_modules/configstore/index.js:27:44)
at new UpdateNotifier (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:34:17)
at module.exports (/usr/local/lib/node_modules/cordova/node_modules/update-notifier/index.js:123:23)
at checkForUpdates (/usr/local/lib/node_modules/cordova/src/cli.js:64:20)
at cli (/usr/local/lib/node_modules/cordova/src/cli.js:114:5)
at Object.<anonymous> (/usr/local/lib/node_modules/cordova/bin/cordova:41:1)
at Module._compile (module.js:456:26)