七步配置phonegap cordova ionic开发环境

本文讲的是android混合移动开发环境搭建，IOS的环境配置以后再补吧。在开始之前，你需要配置好JDK，如果你自己写后台，还需要配置tomcat等。这里用的开发工具是eclipse火星版，你也可以使用sublime或webstorm都可以，使用CLI把应用装在真机上调试，只是我更熟悉eclipse开发安卓应用罢了。

安装phonegap cordova ionic七步曲

1、JDK的配置不提了，太LOW了，自己弄吧，我这里用的是JDK7。
我花了一整天去配置好整个环境，写此文的目的是不想让大家也花这么多时间，主要是下载SDK太费时间了，谷歌的服务器你懂的，墙后下载很慢，也很难找到好用的代理，尤其是模拟器的虚拟包，动折好几个G，只能呵呵了，后来还是放弃了模拟器，安卓真机啦么便宜，弄一个就行了，另外ionic的开发可以打开服务在chrome浏览器上调试，完全不用模拟器，虽然会遇到点问题，但是文中会给出解决办法的。
2、ANT找个目录放，配置下ANT_HOME变量，这个也上百度找吧。
3、下载SDM，几乎所有的东东都可以到下面这个地址下载：

http://www.androiddevtools.cn/

• 1

按照里面的方法配置好SDM的代理就可以更新SDK了，速度比墙外的快多了。我把SDK更新到23(android 6.0)，目前在这个版本下开发。

把你需要的东西都下下来吧，还包括带了ADT插件的eclipse（这个eclipse不是JEE版本的，对html,js不会感知变色，编辑起来不放便，但里面的plugins和features目录下有对应的插件，到eclipse官网上下个火星版，把插件拷进去就可以了）。安装ADT不要去弄什么官网的地址，神马改hosts的，大多也不灵，别去折腾了，到上面地址里下离线的吧。
4、折腾完上面的操作后，你的安卓开发环境已经弄好了，这是原生的开发环境，下面我们要搞混合开发的。
5、安装nodejs 注意，最好是安装stable版本的。我安装的是nodejs stable 5.3，现在有更高的版本了。机器是64位的，所以装的东西也都是64位的。
6、安装phonegap和cordova，两者有啥区别呢？这个问题上百度查一下吧，安装前心里至少有个数吧。直接使用nodejs的npm下载安装：
npm install -g phonegap
npm install -g cordova
检验语句:
phonegap -version
cordova -version
如果上面安装成功，就可以使用phonegap创建混合开发应用了：
phonegap create my-app
cd my-app
phonegap run android
你可以试着开发一下，还是蛮爽的，可是，UI不好做呀，别急，我们安装ionic，一套强大的移动开发组件，基于angularjs做的，它有一套自己的UI组件，CSS是bootstrap的精简版，MVVM。
7、先去ionic中国上了解下吧（这是对应的中文翻译站，也可以去英文官网上看，资讯更全些。）

http://www.ionic.wang/

• 1

安装

$ npm install -g cordova ionic

• 1

创建项目

$ ionic start myApp tabs

• 1

注意tabs是一个模板，创建的项目是tab页的方式展现的。
添加平台支持

$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios或真机运行ionic run

• 1
• 2
• 3
• 4

改成android就是android的平台了。

从这里开始你的混合开发征程吧，一开始你就会体现到它的强大。

在浏览器环境调试程序

我们不想每改一处代吧都在真机上跑一次，怎么办呢，可以通过下面的命令启动项目，在浏览器里实时查看(导航到www目录的外面)：

ionic serve

• 1

启动后他会自动打开默认浏览器查看网站，还会实时监控www中文件的修改，因此你可以放心编码了，最重要的是，你可以在谷歌浏览器里“审查元素”，查看实际生成的HTML和CSS，让你深入地了解ionic组件。

安装完ionic提示找不到命令的问题

安装完ionic后在CMD里运行ionic -version提示找不到命令，可以把这个目录配置到path环境变量里：

C:\Users\your-user\AppData\Roaming\npm

• 1

ionic程序里的ajax跨域问题-CORS

在真机上运行时，我们可以配置白名单，使ajax访问成功，但通过ionic serve运行时，谷歌浏览器是不允许跨域访问的，因此所有连网请求都失败，怎么办呢？
ionic提供了一种代理的方法，原理我理解就是把ajax请求交给ionic的CLI去处理，比如你启动的地址是：

http://localhost:8100

• 1

也就是把你ajax请求的地址投射到localhost:8100这个地址上去，就是你项目的origin，而这个origin就是ionic 的CLI，而我们知道只有客户端环境会有跨域问题，对JAVA,C 这种语言是不存在跨域的，OK，找到你www目录的上一层，有个ionic.project文件，打开他：

1 { 2 'name': 'app', 3 'app_id': '', 4 'proxies': [{ 5 'path': '/api/forecast', 6 'proxyUrl': 'https://api./forecast/APIKEY/' 7 }] 8 }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

好，在程序里这么访问就OK了：

1 $http.get('/api/forecast/').success(function (forecast) { 2 $scope.forecast = forecast; 3 });

• 1
• 2
• 3

是不是很神奇？