本文讲的是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;
});
是不是很神奇?
相关推荐
标题"ionic+phonegap 案例源码"表明这是一个使用了Ionic框架和PhoneGap工具开发的移动应用示例项目。Ionic是一个流行的开源HTML5移动应用框架,它允许开发者使用Web技术(如HTML, CSS, JavaScript)来构建原生感的...
【IONIC】 IONIC是一款基于...综合以上,这个压缩包提供了一个使用IONIC和PhoneGap开发的项目源码,以及关于PhoneGap的深入学习材料,对于想要学习或提升混合移动应用开发技能的开发者来说,是非常宝贵的资源。
1. **环境配置**: 首先,你需要安装Node.js、PhoneGap CLI、Android SDK或Xcode(针对iOS)等必要工具。 2. **创建项目**: 使用PhoneGap CLI创建一个新的项目,指定项目名称、ID和目标平台。 3. **编写代码**: 在...
cordova + ionic 创建的android版app,使用Strophe.js 实现xmpp客户端,实现了即时通讯聊天功能,服务端为openfire,需要自行搭建,应用可以实现账户登录,添加好友,聊天功能
总之,搭建Android+PhoneGap开发环境涉及安装JDK、Android Studio、Node.js和PhoneGap CLI,配置Android SDK,以及创建和运行第一个PhoneGap项目。掌握这个过程后,开发者就可以利用Web技术开发出能在Android平台上...
Android+ionic +phonegap 调用摄像头 $cordovaCamera; 在Android上运行,ionic打包到assetc目录;上传一个实例,是phonegap100,树根老师讲的例子+自己写了调用摄像头的案例,给各位学习。以后还会添加功能,继续...
Cordova和Ionic是移动应用开发中的两个重要框架,它们允许开发者使用HTML、CSS和JavaScript来构建原生的移动应用。Cordova是一个开源的移动开发框架,它将Web应用打包成可安装的移动应用,通过WebView在各个平台上...
完成上述基础环境配置后,可以使用Node.js的npm(Node Package Manager)来安装Cordova、Ionic和相关插件。通过命令行工具执行以下命令: ```bash $ npm install -g cordova $ npm install -g ionic ``` 至此,你...
parse-push-plugin, 在分析平台上,为 Cordova/Phonegap/ionic 推送通知插件 Parse.Push 插件Cordova/Phonegap/ionic.的Parse.Push 插件,用于宿主 Parse.com 和开放源码解析服务器。高光工作在 Parse.com 和解析...
Dcare是一款专为糖尿病患者设计的混合移动应用程序,它利用了PhoneGap、Ionic和AngularJS等前沿技术,旨在提供便捷的健康管理工具。以下是对这些技术及其在Dcare项目中应用的详细解释: 1. **PhoneGap**: ...
PhoneGap是Adobe开发的一款跨平台移动应用开发框架,它允许开发者使用HTML5、CSS3和JavaScript来构建原生的移动应用程序。Cordova是PhoneGap的开源版本,它们本质上是同一个项目,只是PhoneGap包含了额外的工具和...
PhoneGap是Adobe提供的一个基于Cordova的平台,提供了更方便的开发环境和工具链。 要开始使用Ionic测试PhoneGap或Cordova项目,你需要完成以下步骤: 1. **安装先决条件**:确保你已经安装了Node.js和npm(Node包...
"cordova-ionic-phonegap-branch-deep-linking-attribution-master" 指示这是一个项目的主分支,包含了所有必要的代码、配置文件和资源,用于在Cordova、Ionic和PhoneGap项目中集成Branch深层链接和归因服务。...
搭建Ionic开发环境需要安装Node.js、npm、Cordova和Ionic CLI、Java SDK以及Android SDK等。项目环境搭建步骤包括: 1. 安装Node.js和npm。 2. 通过npm安装Ionic和Cordova CLI。 3. 安装Java SDK。 4. 下载并安装...
本文讨论了如何使用Ionic和Cordova(PhoneGap)开发跨平台移动Hybrid App。Ionic是一个专注于使用Web开发技术,基于HTML5创建类似于手机平台原生应用的开发框架。Cordova提供了丰富的原生接口,解决了移动端原生功能...
### ionic开发及扫描二维码开发过程 #### 一、BarcodeScanner扫描二维码 在Ionic应用开发过程中,集成 BarcodeScanner 插件来实现二维码扫描功能是非常常见的需求。以下将详细介绍该插件的安装与配置流程。 #####...
您的计算机需要针对Cordova和Android开发进行设置。 安装离子npm install -g ionic 克隆项目git clone https://github.com/don/ionic-nfc-reader.git 插入支持NFC的Android手机。 然后构建并运行该应用程序。 cd ...
首先,作者介绍了如何在Windows和Android环境下搭建Cordova开发环境,这是开发移动应用的第一步。环境搭建包括安装Node.js、Java开发工具包(JDK)、Android SDK、以及Cordova CLI工具。 接下来,书中讲解了设置应用...
1. **PhoneGap安装与配置**:首先,你需要在开发环境中安装PhoneGap和Cordova(PhoneGap的基础框架)。通常,这涉及到设置Node.js环境,使用npm(Node Package Manager)安装Cordova,然后创建一个新的PhoneGap项目...