七步配置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/
按照里面的方法配置好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/
安装
$ npm install -g cordova ionic
创建项目
$ ionic start myApp tabs
注意tabs是一个模板,创建的项目是tab页的方式展现的。
添加平台支持
$ cd myApp $ ionic platform add ios $ ionic build ios $ ionic emulate ios或真机运行ionic run
改成android就是android的平台了。
从这里开始你的混合开发征程吧,一开始你就会体现到它的强大。
在浏览器环境调试程序
我们不想每改一处代吧都在真机上跑一次,怎么办呢,可以通过下面的命令启动项目,在浏览器里实时查看(导航到www目录的外面):
ionic serve
启动后他会自动打开默认浏览器查看网站,还会实时监控www中文件的修改,因此你可以放心编码了,最重要的是,你可以在谷歌浏览器里“审查元素”,查看实际生成的HTML和CSS,让你深入地了解ionic组件。
安装完ionic提示找不到命令的问题
安装完ionic后在CMD里运行ionic -version提示找不到命令,可以把这个目录配置到path环境变量里:
C:\Users\your-user\AppData\Roaming\npm
ionic程序里的ajax跨域问题-CORS
在真机上运行时,我们可以配置白名单,使ajax访问成功,但通过ionic serve运行时,谷歌浏览器是不允许跨域访问的,因此所有连网请求都失败,怎么办呢?
ionic提供了一种代理的方法,原理我理解就是把ajax请求交给ionic的CLI去处理,比如你启动的地址是:
http://localhost:8100
也就是把你ajax请求的地址投射到localhost:8100这个地址上去,就是你项目的origin,而这个origin就是ionic 的CLI,而我们知道只有客户端环境会有跨域问题,对Java,C++这种语言是不存在跨域的,OK,找到你www目录的上一层,有个ionic.project文件,打开他:
{
"name": "app",
"app_id": "",
"proxies": [{
"path": "/api/forecast",
"proxyUrl": "https://api.forecast.io/forecast/APIKEY/"
}]
}
好,在程序里这么访问就OK了:
$http.get('/api/forecast/').success(function (forecast) {
$scope.forecast = forecast;
});
是不是很神奇?