Ionic Mac 平台开发实战

摘要: Ionic 在Mac平台的入门，安装和示例程序的建立

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)