Cordova环境搭建 & HelloWorld
目前的手机APP有三类:原生APP,WebAPP,HybridApp;HybridApp结合了前两类APP各自的优点,越来越流行。
Cordova就是一个中间件,让我们把WebAPP打包成HybridAPP,并且它提供了非常多的插件,方便我们使用原生APP的功能。
本文我们在win7中搭建 Cordova 开发环境,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等。
然后我们来实现个简单的demo,开始吧!
1 安装Cordova
(Cordova开发环境的安装,包括所涉及的Node.js、Cordova CLI、JDK及Android SDK等,然后创建一个HelloWord项目。)
1.1 安装Node.js
https://nodejs.org 直接去官网下载并按默认路径安装就可以了。
安装完成后在命令行: (测试成功!)
$ npm
1.2 安装Cordova CLI
命令行:
$ npm install -g cordova
如果安装不成功,一般是网络原因,可以找个翻墙软件。我这边用的是proxy999。
安装成功后命令行: (测试成功!)
$ cordova
1.3 部署Android开发环境
Cordova是一种Hybrid开发,可以被部署到android,ios等多个手机平台。这里我们以android为目标平台。
接下来我们开始android平台下相关环境的部署。
这里我们安装AndroidStudio,可以访问 http://www.android-studio.org/
里边有国内的下载镜像。
1.3.1 安装JDK
oracle官网 http://java.oracle.com/ (下不来的翻墙~~)
或国内镜像 http://jdk.android-studio.org/
下载安装后,配置环境变量:http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html
1.3.2 安装Android SDK
下载并安装AndroidStudio,http://developer.android.com/sdk/index.html
安装完成后配置sdk环境变量(cordova命令要用到):http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html
1.3.2 安装Ant
Ant是java平台下一个打包部署的工具,使用cordova命令的时候需要借助这个工具。
http://ant.apache.org/bindownload.cgi,下载zip压缩包,解压后配置环境变量:http://www.cnblogs.com/yuzhongwusan/archive/2013/03/26/2982411.html
2 创建Cordova的第一个应用 HelloWorld
我们在d:\\test 目录下新建一个项目
$ d:
$ cd test
先进入到目标文件夹,然后执行下面的命令
运行到浏览器:
$ cordova serve android
3. AndroidStudio导入Cordova项目
经过上一步的cordova项目build成功后,我们打开下面目录,会看到一个build.gradle,它就是我们项目的关键,因为项目本身就是用gradle来构建的。
最后一步,我们打开AndroidStudio来导入上面看到的.gradle文件,就可以在AndroidStudio中来编写我们的应用了,也可以很方便的在模拟器上预览。
初次导入的时候会从网络下载gradle相关的东西,要等个10分钟。导入完成后我们运行模拟器,效果:
好了,Cordova的环境搭建已经好了。其实本文更多的都是在说android的环境搭建,花的时间最多的也是这个,而且会有国内外网络的问题,会花不少时间。
下一篇,我们来用AngularJs+Ionic+Cordova这个非常棒的组合来快速地开发HybridAPP:
《搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo》
Cordova环境搭建 & HelloWorld的更多相关文章
- cordova环境搭建,搭建项目,以及拍照功能的实现
一.配置环境 1.配置java环境: 下载对应系统环境的jdk:http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-13 ...
- cordova 环境搭建
安装环境前题是nodejs已安装,android环境搭建完成,android环境没有通过http://www.androiddevtools.cn/安装,安装使用 淘宝 NPM 镜像 方式 1.运行c ...
- sencha touch 2.3 结合cordova 环境搭建
sencha touch 2.3环境搭建必备工具 sencha touch 2.3 包sencha cmd 4.0以上JAVA JDK 1.7以上(注意JDK和JRE的区别)Ruby 1.9.3或更早 ...
- jni 入门 android的C编程之旅 --->环境搭建&&helloworld
需要进行jni的开发有一下几个条件: 1:能初步使用C/C++如果不会,请参读 谭浩强的 C编程语言 2:android应用开发已经基本入门,如果没有,请先行学习 这两个条件基本满足后,我们开始了: ...
- cordova环境搭建
首先,需要了解一下cordova 和 phonegap 的关系.phoneGap是原先的名字,Cordova是phoneGap被捐给apache之后 用的项目名,phoneGap的名字也被保留了. 1 ...
- WebStorm 之 Cordova 环境搭建
一.环境搭建 Cordova 环境配置之前,应先下载安装 Node.js ,中文官网:http://nodejs.cn/. 以管理员身份运行 cmd 命令行工具: 1.查看 Node.js 是否已安装 ...
- iOS下JS与OC互相调用(七)--Cordova 环境搭建
Cordova大家可能比较陌生,但肯定听过 PhoneGap ,Cordova 就是 PhoneGap 被 Adobe 收购后所改的名字.它是一个可以让 JS 与原生代码互相通信的一个库,并且提供了一 ...
- webapp开发学习---Cordova环境搭建
Cordova 使用HTML, CSS & JS进行移动App开发;多平台共用一套代码;免费开源 步骤:(来自Cordova官网) 1.安装Cordova(在node.js环境下进行安装) 命 ...
- Cordova环境搭建与hello word
一.环境下载 1.下载并安装Node.js 安装一路下一步即可 2.下载并安装Git 安装一路下一步即可 3.配置Android开发平台环境 (1)下载JDK (2)下载AndroidSDK (3)下 ...
随机推荐
- C语言学习 第十一次作业总结
作业总结 两次的作业,都是和指针有关.从第一次的作业开始,我就多次让同学们思考这个问题:为什么要用指针,为什么在函数的形参中要使用指针.如果能够想明白这2个问题,那么同学们应该会指针的了解就差不多足够 ...
- 【C#】toString("Format") 格式化
1..ToString("P");//得到小数点后2位的百分比,自动 加上%号;//9512.35% 这个比较厉害! furenjun yoolonet
- 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)
现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...
- PowerBuilder笔记
powerbuilder中怎样新建一个pbl文件 在创建pbw之后,右键单击pbw,点新建,弹出对话矿,按图操作,就能创建pbl 主程序入口: 主程序入口代码: // Profile ahzbmysq ...
- Java学习笔记(二)
再次更新,有问题大家一起讨论 Java中的class文件转换成.java文件 下载转换器Java Decompiler 使用此转换器打开.jar文件 就可以看到由.class转换来的.java文件 亲 ...
- sass 安装、配置,css规则
http://blog.csdn.net/oyuemijindu/article/details/51036096 --sass 安装 一安装 1.ruby下载,可以到官网下载 ,注意如果是系统如果 ...
- Oracle 性能优化
(1) 选择最有效率的表名顺序(只在基于规则的优化器中有效):ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table) ...
- [转]CSS 类名的单词连字符:下划线还是横杠?
问题 CSS 类或 ID 命名时单词间连接通常有这几种写法: 驼峰式: solutionTitle.solutionDetail 用横杠连接: solution-title.solution-deta ...
- 网站中使用echart
在网站开发中,可能会使用折线图,圆饼图,等等 来丰富网页对数据的展示,可以使用echart http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E ...
- zapewnia stale poprawiając relacje związane
W porównaniu do LG5, ta http://www.butyrunning.com/lunarestoa-2-m%C3%84%C2%99skie-c-2_70_71.html kon ...