ioniccordova学习环境.docx

Ionic+cordova学习笔记环境搭建2014/7/21目录1.环境搭建11.1Jdk环境配置(略)11.2Nodejs环境配置11.3Git工具安装21.4Ant安装31.5安装ionic，cordova41.6安卓环境（adt），如果是开发IOS应用，那么需要xcode环境。51.7IDEA+Genymotion（推荐）71.8Html浏览器安装，如chrome等（略）81.9开启ionic之旅8环境搭建Jdk环境配置(略)Nodejs环境配置安装nodejs，npm，通过npm安装ionic ，cordova。windows下的NodeJS安装是比较方便的（v0.6.0版本之后，支持windows native），只需要登陆官网（/），便可以看到首页的“INSTALL”按钮，直接点击就会自动下载安装了。安装过程基本直接“NEXT”就可以了。（windows的安装msi文件在过程中会直接添加path的系统变量，变量值是你的安装路径，例如“C:\Program Files\nodejs”）安装完成后可以使用cmd（win+r然后输入cmd进入）测试下是否安装成功。方法：在cmd下输入node -v，出现下图版本提示就是完成了NodeJS的安装。npm的安装。由于NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行输入npm -v来测试是否成功安装。如下图，出现版本提示便OK了。Git工具安装Npm安装ionic时，提示需要安装git。进入官网/安装git ，我们选择命令行形式，这样在window下安装过程中会自动配置path等环境变量。一路next，cmd看下安装是否成功，如图。Ant安装Ant安装，下载地址?/bindownload.cgi下载后解压，配置环境变量ANT_HOME G:\adt-bundle-windows-x86_64apache-ant-1.9.4CLASSPATH ;%ANT_HOME%lib;PATH??;%ANT_HOME%bin;安装ionic，cordova好了，现在可以安装ionic，cordova了。Cmd执行命令：npm install -g ionic cordova，如图。安装完成后，检查是否安装OK，如图：安卓环境（adt），如果是开发IOS应用，那么需要xcode环境。adt-bundle下载，本机win7 64位环境。下载地址：?/android/adt/adt-bundle-windows-x86_64zip解压压缩包，如图双击SDK，选择要下载安卓系统版本，注意全选安装SDK会占用很大空间，况且也没用。解决SDK下载超时问题：Hosts文件设置代理2）勾选 https设置IDEA+Genymotion（推荐）IDEA对angularJS、HTML5、SASS开发有很好的支持，便于编辑，而adt的Eclipse开发这些则需要下载相应插件，切插件适用性不及idea。Genymotion较avd速度较快，堪比真机。Idea genymotion插件安装。Idea genymotion配置Html浏览器安装，如chrome等（略）开启ionic之旅创建ionic种子应用，创建带底部标签的ionic应用ionic start helloworld tabs为新创建的ionic种子应用添加安卓平台，进入工程目录，执行ionic platform add androidBuild应用工程，在工程目录执行 ionic build android直接在安卓手机查看效果执行 ionic run android,cmd执行结果如图手机效果如图：将工程导入到adt中如图：将工程导入到idea中如图：种子应用在adt中导入打开下，在导入idea中更好些，否则需要在idea多做些配置修改工作。在idea中预览html5页面，点击如图chrome浏览器标识浏览效果如图