Ionic Mac 环境配置

Ionic Mac 环境配置

·        安装cordova以前要安装nodejs 会包含npm安装（npm是个包管理器），到官网下载https://nodejs.org/en/download/ 是个pkg包下载以后双击下载包运行而后 step by step，osx下会自动添加环境变量，不用手动配置，默认安装到、usr/local下，能够更改目录 

这一步就能够安装cordova了和ionic （这一步的主要问题是cordova安装包的镜像问题）

·       

若是提示上面的就表示安装成功了。$cordova –v；ionic –v

建立Ionic项目 ionic start myIonic blank

其中myIonic为咱们的项目名称 
执行过程它会从github下载项目源码，请等待。。。 
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹，这个文件夹就是Ionic项目的所在目录了。 
目录下有如下文件：

hooks           //google以后这个目录应该是在编译cordova时自定义的脚本命令，方便整合到咱们的编译系统和版本控制系统中

plugins         //cordova插件的目录，插件的安装下一节详述

scss            //scss文件，发布时编译这个目录下的文件输出到www的css目录中

www             //咱们的开发目录，页面、样式、脚本和图片都放在这个目录下

--css

--img

--js

--lib

--index.html

bower.json      //bower配置文件

config.xml      //Ionic的配置文件 ⱃ能够配置app的id，名称、描述起始页和一块儿其余配置

gulpfile.js     //gulp构建工具的执行文件，在这个文件中建立任务实现编译scss，css、js优化等

ionic.project   //Ionic的项目文件能够配置Ionic命令中livereload的监控文件

package.json    //npm配置文件

启动测试服务器：ionic serve

部署到手机和cordova插件的使用

一个简单的Web应用咱们已经开发完成了，接下来咱们就要作一些部署到移动端以前的准备了。 
Ionic支持两个平台ios、android，默认的Ionic项目并无添加这两个平台，咱们须要手动添加，cd到开发目录下执行命令：

ionic platform add android

ionic platform add ios

通常项目都须要两个平台同时部署，因此咱们就添加两个，执行完毕以后执行命令查看你已经添加的平台列表：

ionic platform list

结果：

Installed platforms: android 4.0.0, ios 3.8.0

Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8

 

接下来的部署咱们分开讲述：

http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html

Install the Java Development Kit (JDK)

Install Java Development Kit (JDK) 7 or later.

When installing on Windows you also need to set JAVA_HOME Environment Variable according to JDK installation path (for example, C:\Program Files\Java\jdk1.7.0_75).

Install the Android SDK

Install the Android Stand-alone SDK Tools or Android Studio. Procceed with Android Studio if you plan developing new Cordova for Android plugins or using native tools to run and debug Android platform. Otherwise,Android Stand-alone SDK Tools are enough to build and deploy Android application.

Detailed installation instructions are available as part of installation links above.

For Cordova command-line tools to work, or the CLI that is based upon them, you need to include the SDK'stools and platform-tools directories in your PATH. On a Mac, you can use a text editor to create or modify the~/.bash_profile file, adding a line such as the following, depending on where the SDK installs:

    export PATH=${PATH}:/Development/android-sdk/platform-tools:/Development/android-sdk/tools

This line in ~/.bash_profile exposes these tools in newly opened terminal windows. If your terminal window is already open in OSX, or to avoid a logout/login on Linux, run this to make them available in the current terminal window:

    $ source ~/.bash_profile

Android 
Android部署分真机和虚拟机，其实方法相似，在部署以前须要安装JDK、Android SDK到开发环境中，配置好JDK的JAVA_HOME和Android SDK的ANDROID_HOME到环境变量中去，并把Android SDK安装目录添加到Path中。 
配置好以后打开PowerShell输入命令返回正确：

adb version

·       1

接下来就简单了，把手机链接到电脑，并开启usb调试模式，执行命令：

ionic run android

·       1

Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用，是否是很简单？

IOS 
ios部署须要一台mac电脑，在mac电脑上面根据本篇ionic的安装过程安装环境以后，添加ios平台到项目，由于apple开发的证书限制咱们在没有申请购买apple帐号的状况下，使用虚拟机来部署咱们的应用，在部署以前须要使用npm安装一个ios-sim插件用来调用模拟器的，执行命令：

sudo npm install -g ios-sim

·       1

安装好以后，cd 到开发目录下执行：

sudo ionic build ios

4.调试

咱们在前面已经说过，在开发前期咱们通常会在web中调试，而Ionic为咱们提供了很是方面的web调试环境，只须要执行ionic serve就能够实现lievereload，而在部署到移动端后也能够开启livereload的，咱们只须要修改下咱们run命令参数：

ionic run android --livereload -c -s

·       1

这是android的调试模式，不管在虚拟机上仍是在手机上均可以实现livereload，ios则只须要把android修改成ios便可，不用每次开发完成编译再部署！-c是开启客户端日志输出，-s是开启服务器端日志输出。–livereload参数的的意义在于修改生成包中的起始页面地址，修改成远程服务器地址这样就能够作到修改即通知客户端刷新页面了。

5.ios打包、android打包

能使用Ionic来开发app的极可能对Ios和android的app打包发布流程不是很熟悉，我这里简单说明下： 
Android 
Android的打包比较简单执行命令：

ionic build android -release 

·       1

找到www/platform目录下生成的apk包，此时的apk还不能被安装到手机上，还须要一步签名操做，你们能够参考： 
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html

IOS 
ipa文件的打包须要如今apple develop网站上注册一个帐号，在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可使用xcode导出，详情参阅： 
http://blog.csdn.net/songrotek/article/details/8448331 
http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/

 

http://cordova.apache.org/docs/en/5.1.1/guide/platforms/android/index.html