本文讲的是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;
});
是不是很神奇?
相关推荐
Ionic3.x+、Angular4.x+ Cordova 介 绍以及Ionic3.x+环境搭建 一、Ionic 介绍............................................................................................................................1 二...
cordova + ionic 创建的android版app,使用Strophe.js 实现xmpp客户端,实现了即时通讯聊天功能,服务端为openfire,需要自行搭建,应用可以实现账户登录,添加好友,聊天功能
Android+ionic +phonegap 调用摄像头 $cordovaCamera; 在Android上运行,ionic打包到assetc目录;上传一个实例,是phonegap100,树根老师讲的例子+自己写了调用摄像头的案例,给各位学习。以后还会添加功能,继续...
Cordova_Ionic_AngularJs环境安装及Eclipse开发HybridApp的配置 Cordova(以前叫PhoneGap)提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、 麦克风等。 Cordova还...
parse-push-plugin, 在分析平台上,为 Cordova/Phonegap/ionic 推送通知插件 Parse.Push 插件Cordova/Phonegap/ionic.的Parse.Push 插件,用于宿主 Parse.com 和开放源码解析服务器。高光工作在 Parse.com 和解析...
这是cordova 3.4的JS主文件,用于开发Phonegap,cordova,ionic等
Cordova PhoneGap Ionic的Branch SDK文档查看
您的计算机需要针对Cordova和Android开发进行设置。 安装离子npm install -g ionic 克隆项目git clone https://github.com/don/ionic-nfc-reader.git 插入支持NFC的Android手机。 然后构建并运行该应用程序。 cd ...
cordova扫码插件phonegap-plugin-barcodescanner,修复了在ios10上面的内存泄漏导致的闪退bug
提供客户支持的Kommunicate Cordova(Ionic / PhoneGap)聊天SDK 适用于Ionic和PhoneGap应用程序的开源Cordova Live Chat SDK 概述 Kommunicate在Cordova中提供了开源的实时聊天SDK,可与Ionic和PhoneGap应用程序...
iBeacon-nfc 使用ibeacon + nfc ionic,cordova,phonegap测试信标添加了插件的cordova cli项目等等NFC phonegap构建+离子项目
离子项目 使用ionic框架测试phonegap cordova项目
Apache Cordova是Apache基金会支持的一套开源移动APP的开发工具,其前身是phonegap。phonegap被收购后,开发者将其核心代码部分捐给Apache,并取名Cordova。它允许移动APP开发者使用HTML+CSS+JavaScript来访问本地...
Learn how to build app store-ready hybrid apps with the Ionic 2, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools ...
将blinkid-cordova添加到您的应用程序您可以通过克隆存储库并按照下面的说明或通过运行来添加blinkid-cordova cordova plugin add blinkid-cordova 所示指令是针对Cordova的, Ionic和PhoneGap的指令几乎是相同的,...
该插件符合Cordova插件规范,可以使用Cordova / Phonegap命令行界面进行安装。 phonegap plugin add cordova-plugin-advanced-http cordova plugin add cordova-plugin-advanced-http 用法 平原科尔多瓦 该插件注册...
Integrate PhoneGap plugins with NG-Cordova Test your apps to improve and optimize performance In Detail Hybrid Apps are a promising choice in mobile app development to achieve cost-effectiveness and...
使用Kommunicate cordova插件的Ionic / Cordova / Phonegap示例应用程序 概述 Kommunicate在Ionic中提供了开源的实时聊天SDK。 Kommunicate SDK灵活,轻巧且易于集成。 它使您可以轻松地在移动应用程序和网站中添加...
ionic-cordova-phonegap-examples 在此存储库中,您将找到一些 ionic 和 cordova/phonegap 示例
测验 使用 PhoneGap Build 在 Ionic、Angular、Cordova 中构建的跨平台测验应用程序