我们在使用Cordova之前，需要先设置一些东西以及安装一些组件。
软件和说明
NodeJS 和 NPM
NodeJS是Cordova开发所需平台。看看下面的链接=&
Android SDK
对于Android平台，需要机器上安装Android&SDK。看看下面的链接=&&
对于iOS平台，那么需要机器上安装Xcode。&看看下面的链接=&&
安装Cordova
在我们开始之前，需要知道，在教程我们将使用 Windows 命令提示符。
步骤 1 - 安装git
即使你不使用git，Cordova安装也要使用它的一些后台进程。下载git&。安装 git 后，打开环境变量，操作如下：
右键单击我的电脑
高级系统设置
在复制变量值字段放到末尾如下。这是&git&的安装的默认路径。如果安装在其它路径上，你应该使用你的安装路径，而不是我们下面的示例代码。
;C:\Program Files (x86)\Git\C:\Program Files (x86)\Git\cmd
现在，在命令提示符处输入 git 来测试是否安装成功。
步骤2 - 安装Cordova
这一步将下载并安装Cordova全局模块。打开命令提示符，运行以下命令&-
D:\worksp&cordova&npm install -g cordova&
通过运行以下命令检查安装的版本&-
D:\worksp&cordova&cordova -v&
这里我们是在Windows操作系统上开发Cordova&应用程序。在我们的下一个教程中，将向你展示如何创建第一个应用程序。
易百教程移动端：请扫描本页面底部(右侧)二维码并关注微信公众号，回复："教程" 选择相关教程阅读或直接访问：http://m.yiibai.com 。
加QQ群啦，易百教程官方技术学习群
注意：建议每个人选自己的技术方向加群，同一个QQ最多限加3个群。
Java技术群：
（人数：2000，等级：LV5，免费：否）
MySQL/SQL群：
（人数：2000，等级：LV5，免费：否）
大数据开发群：
（人数：2000，等级：LV5，免费：否）
Python技术群：
（人数：2000，等级：LV5，免费：否）
人工智能深度学习：
（人数：2000，等级：LV5，免费：否）
测试工程师(新群)：
（人数：1000，等级：LV1，免费：是）
前端技术群(新群)：
（人数：1000，等级：LV1，免费：是）
C/C++技术(新群)：
（人数：1000，等级：LV1，免费：是）
Node.js技术(新群)：
（人数：1000，等级：LV1，免费：是）
PostgreSQL数据库（新群）：
（人数：1000，等级：LV1，免费：否）
Linux技术：
（人数：2000，等级：LV5，免费：否）
PHP开发者：
（人数：2000，等级：LV5，免费：是）
Oracle数据库：
（人数：2000，等级：LV5，免费：是）
C#/ASP.Net开发者：
（人数：2000，等级：LV5，免费：是）
数据分析师：
（人数：1000，等级：LV1，免费：是）R语言，Matlab语言等技术在上一个教程中，我们学习了如何安装Cordova&并设置了环境。在这一个节中我们创建第一个混合Cordova应用程序。
第1步 - 创建App
在命令提示符下打开要安装应用程序的目录。我们将在桌面上创建它。
D:\worksp\cordova&cordova create CordovaProject io.cordova.hellocordova CordovaApp
CordovaProject&是创建应用程序的目录名。
io.cordova.hellocordova&是默认的反向域名值(类似Java包的命名)。如果可能使用自己的域名的值。
CordovaApp&是应用程序的标题。
第2步 -&添加平台
你需要在命令提示符下，打开您的项目目录。在我们的例子是CordovaProject。您应该只选择您需要的平台。为了能够使用指定的平台，你需要安装特定的平台SDK。由于我们使用的是Windows开发，我们可以使用下面的平台。我们还安装了Android&SDK中，所以我们将只针对安装Android平台来讲解本教程。
D:\worksp\cordova\CordovaProject& cordova platform add android
有时候也可以在Windows操作系统中使用其他平台。
D:\worksp\cordova\CordovaProject\CordovaProject&cordova platform add wp8
D:\worksp\cordova\CordovaProject\CordovaProject&cordova platform add amazon-fireos
D:\worksp\cordova\CordovaProject\CordovaProject&cordova platform add windows
D:\worksp\cordova\CordovaProject\CordovaProject&cordova platform add blackberry10
D:\worksp\cordova\CordovaProject\CordovaProject&cordova platform add firefoxos&
如果您在Mac上开发，可以使用&-
$ cordova platform add IOS
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos&
您也可以从项目中删除使用的平台&-
D:\worksp\cordova\CordovaProject&cordova platform rm android
第3步&- 构建和运行
在这一步中，我们正在为应用程序指定平台，所以我们可以在移动设备或模拟器中运行它。
D:\worksp\cordova\CordovaProject& cordova build android
执行上面的命令后，它会自动下载相关依赖包，需要等一段时间(根据你的网络带宽决定时间)。注：每次修改HMTL代码最好重新构建过代码。
现在我们可以运行应用程序。如果使用的是默认的模拟器，应该使用&-
D:\worksp\cordova\CordovaProject& cordova emulate android
如上提示，需要更新模拟器到最新的 android-23 版本，在 Android Studio 中配置并更新对应的 SDK 版本后再次执行，它将启动模拟器(比较慢，需要点耐心)。如下图：
当仿真器启动后，可使用仿真器或真实设备应调试使用&-
D:\worksp\cordova\CordovaProject& cordova run android&
注&- 可以考虑使用 genymotion&Android 模拟器，因为它比默认的速度更快，反应更迅速。可以从这里。也可以通过启用选项从USB调试，并通过USB连接线将其连接到您的电脑使用真实的设备进行测试。&对于某些特定设备还需要安装USB驱动程序。
打开 Android Studio 导入上面创建成功的工程，运行这个工程，得到结果如下：
当我们运行应用程序，将在我们指定平台上安装它。如果一切都没有错误并执行完成后，输出显示的默认启动应用程序的屏幕如下所示。
可能出错信息：
D:\worksp\cordova\CordovaProject&cordova build android
ERROR building one of the platforms: Failed to find 'ANDROID_HOME' environment v
ariable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.
You may not have the required environment or OS to build this project
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting i
t manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.
解决参考：配置环境变量
ANDROID_HOME=E:\Program Files\adt-bundle-windows-x86_64-\sdk
PATH=%PATH%;%ANDROID_HOME%\%ANDROID_HOME%\platform-tools
附上cordova常用命令列表
cordova create &工程路径& &包名& &工程名&
创建cordova工程，例如：cordova create helloworld_prj "com.yiibai.helloworld" "helloworld"
cordova build android
给cordova项目添加android平台。
cordova run android
编译和运行项目。
cordova install android
将编译好的应用程序安装到模拟器上。
cordova plugin add &插件完全限定名&
给项目添加插件。
cordova plugin remove &插件完全限定名&
删除插件。
cordova plugin list
查看插件列表。
cordova platforms add android&
添加平台支持。
cordova build android
cordova emulate android
在模拟器上运行(前提是创建好AVD)
cordova serve android
在浏览器运行&
cordova run android
通过USB直接安装到真机
在我们接下来的教程中，我们将告诉你如何配置Cordova应用。
易百教程移动端：请扫描本页面底部(右侧)二维码并关注微信公众号，回复："教程" 选择相关教程阅读或直接访问：http://m.yiibai.com 。
上一篇：下一篇：
加QQ群啦，易百教程官方技术学习群
注意：建议每个人选自己的技术方向加群，同一个QQ最多限加3个群。
Java技术群：
（人数：2000，等级：LV5，免费：否）
MySQL/SQL群：
（人数：2000，等级：LV5，免费：否）
大数据开发群：
（人数：2000，等级：LV5，免费：否）
Python技术群：
（人数：2000，等级：LV5，免费：否）
人工智能深度学习：
（人数：2000，等级：LV5，免费：否）
测试工程师(新群)：
（人数：1000，等级：LV1，免费：是）
前端技术群(新群)：
（人数：1000，等级：LV1，免费：是）
C/C++技术(新群)：
（人数：1000，等级：LV1，免费：是）
Node.js技术(新群)：
（人数：1000，等级：LV1，免费：是）
PostgreSQL数据库（新群）：
（人数：1000，等级：LV1，免费：否）
Linux技术：
（人数：2000，等级：LV5，免费：否）
PHP开发者：
（人数：2000，等级：LV5，免费：是）
Oracle数据库：
（人数：2000，等级：LV5，免费：是）
C#/ASP.Net开发者：
（人数：2000，等级：LV5，免费：是）
数据分析师：
（人数：1000，等级：LV1，免费：是）R语言，Matlab语言等技术博客分类：
Cordova每次大版本的发布都会带来系统架构很大的变化，很多资料、文档都要结合它所对应的版本来看。
（1）2.0.0之前版本
Cordova 2.x之前的版本比较老，只简单说说早期版本是如何导入cordova的。
Android版：
1)打开Eclipse，新建Android Application Project
2)把以下文件放置到相应的位置
引用& /libs
&&& cordova-2.0.0.jar
& /assets/www
&&& cordova-2.0.0.js
& /res
&&& xml
3)修改MainActivity，继承自DroidGap
4)替换setContentView()为super.loadUrl("file:///android_asset/www/index.html")
iOS版：
通过Cordova-based Application模板来生成的Project。
（2）2.x(2.0.0 - 2.9.7)
使用Cordova-CLI来管理project（其实真正普及是从2.2.0开始的），并且导入Cordova-JS各平台间统一支持JavaScript接口。
引用$ /path/to/cordova-android/bin/create.bat /path/to/my_new_cordova_project com.example.cordova_project_name CordovaProjectName
$ /path/to/my_new_cordova_project/cordova/debug.bat
$ /path/to/my_new_cordova_project/cordova/emulate.bat
（3）3.x(3.0.0 - 3.7.0)
采用全新的Plugin架构，把Plugin的代码从Cordova-Lib中玻璃出去，需要的时候再添加。
（4）4.x(4.0.0 - 4.3.0)
把各Platform的实现也剥离出去（Pinned Platform）。
（5）5.x(5.0.0 - 5.4.1)
1）插件从Cordova plugins registry（CPR）全部移到npm，并且重新命名
& ***org.apache.cordova.* → cordova-plugin-*
&&&& 旧）$ cordova plugin add org.apache.cordova.console
&&&& 新）$ cordova plugin add cordova-plugin-console
& ***CPR也从7月15号开始只读，10月15号以后停止
2）Cordova Android@4.0.0发布，支持Pluggable WebViews、API 22、白名单需要添加插件（$ cordova plugin add cordova-plugin-whitelist）。
（6）6.x(6.0.0 - )
1）支持Android 6和iOS 9
2）Cordova CLI可以通过npm、git或本地文件的模板来创建应用
3）完全移去了Cordova Plugins Registry只支持npm、git或本地文件。
所有以上说到的版本都是针对Cordova-CLI(Cordova-Lib、Cordova-Plugman)，我们一般说的版本也指的是Cordova-CLI的版本。而Cordova-JS、Cordova-Plugin、Cordova-Platform都还有自己的版本管理。
发布Cordova 5.0.0!
发布Cordova 6.0.0!
浏览 25884
rensanning
浏览: 2451763 次
来自: 大连
浏览量：28681
浏览量：535620
浏览量：514529
浏览量：49898
浏览量：205458
浏览量：24252
浏览量：10467
博主，能否提供完整源码用于学习？邮箱：@q ...
IT小新 写道您好啊博主，就是为什么是这样的五张表呢，名字就是 ...
你好，我下载了你的例子安装在我7.1.2的手机上，但发现会有个 ...
请问titanium项目如何转化成正常的eclipse或者An ...
scripts/googleGEO.coffee
我的链接可 ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'Cordova 如何实现所有的h5html 来自于远程服务器呢？
<a data-traceid="question_detail_above_text_l&&
Cordova 如何实现所有的h5html 来自于远程服务器呢？网上搜了半天，竟然没有人问这个问题，是说大家都把Cordova 里面的www目录一起打包到apk 里面么
所有的html 来自于远程服务器还用cordova干球啊，直接浏览器访问不就行了
--- 共有 9 条评论 ---
: 兄弟，我也遇到了远程加载后调不到加载的插件了，你解决了么 求分享
: 改成远程地址后，远程网页怎么使用项目自定义的插件呢
: 不行的呀！后台用struts2写的,url都是类似http://123.123.0.12/asd/asd.action,而且后台有过滤器,每次请求都要验证身份,我要是每次都把cookie传过去,就要在后台添加受信任的域，比如http://192.168.0.101:8080
不行的呀！后台用struts2写的,url都是类似http://123.123.0.12/asd/asd.action,而且后台有过滤器,每次请求都要验证身份,我要是每次都把cookie传过去,就要在后台添加受信任的域，比如http://192.168.0.101:8080
: 跨域的话，打成app之后就不会有这个问题了，本地调试的时候我是用Ripple
把根目录的config.xml里面的content改成远程链接后，这个链接对应的网址是在app里打开的，但是这个页面里面如果还有链接，再点击就会调用手机浏览器而不是在app里打开，怎么处理？谢谢！
--- 共有 2 条评论 ---
: 你这个是跨域问题，直接将远程地址添加到cordova白名单里面就可以了
你好，请问这个问题解决了吗？可有什么方法?PhoneGap 白名单安全机制 navigator.app 加载外部页面返回以及退出介绍
时间： 00:32:12
&&&& 阅读：4934
&&&& 评论：
&&&& 收藏：0
标签：一、 Phonegap 白名单安全机制
　　Phonegap应用的页面大多存在于本地,但有时需要加载外部的Web页面到应用内置的浏览器
　　视图中已完成特定的应用功能,出于安全性考虑,PhoneGap 设立了白名单安全机制,通过它来 控制能够加载到内置浏览器视图的内容来源.
　　Android 不通过白名单安全机制的话调用外部浏览器
　　IOS 不通过白名单安全的话 会直接拒绝
二、Android 配置白名单
　　在res/xml/config.xml这个文件里进行配置
三、IOS 配置 以及 Wp7/wp8配置白名单 查看文档
　　　　&http://www.phonegap100.com/doc/guide_whitelist_index.md.html#Domain%20Whitelist%20Gu ide
四、Navigator.app 主要对象阐述
　 &navigator.app.loadUrl() 加载 web 页面的应用程序中或者系统默认的浏览器中
　　navigator.app.cancelLoadUrl() 在 web 页面成功加载之前取消加载
　　navigator.app.backHistory() 返回上一次浏览页面
　　navigator.app.clearHistory() 清空浏览历史
　　navigator.app.clearCache() 清空程序的资源文件缓存
　　navigator.app.exitApp() 退出应用程序
　　navigator.splashscreen.show(); 调用显示启动应用程序的背景图片
　　navigator.splashscreen.hide();　　调用隐藏启动应用程序的背景图片
&!DOCTYPE html&
&meta charset="utf-8"&
&title&jQuery
Web 应用程序&/title&
&link href="../jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/&
&script src="../jquery.js" type="text/javascript"&&/script&
&script src="../jquery.mobile-1.3.2.js" type="text/javascript"&&/script&
&script src="../cordova.js" type="text/javascript"&&/script&
&script type="text/javascript"&
$(document).ready(function(){
document.addEventListener("deviceready", myDeviceReadyListener, false);
function myDeviceReadyListener(){
//这里设备一加载完毕就跳转
//navigator.app.loadUrl("http://m.chinaz.com/", {wait:0, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000});
console.log("设备加载完毕!");
$(‘#loadUrl‘).click(function(){
loadUrl();
$(‘#exitApp‘).click(function(){
exitApp();
$(‘#splashscreenShow‘).click(function(){
splashscreenShow();
function exitApp() {
navigator.app.exitApp();
//加载外部页面
第一个参数表示要打开的网站的地址
第二个参数是一个对象，对象里有三个参数分别是：
1、wait:2000
表示当触发加载外部页面的时候先等2秒钟，2秒后才加载
2、loadingDialog:"Wait,Loading App" 这个参数是没有效果的
3、loadUrlTimeoutValue: 60000
表示超时，但加载外部页面60秒后还没加载到的话就视为超时
function loadUrl(){
navigator.app.loadUrl("http://m.chinaz.com/", {wait:2000, loadingDialog:"Wait,Loading App", loadUrlTimeoutValue: 60000});
//调用显示启动应用程序的背景图片
function splashscreenShow(){
navigator.splashscreen.show();
&div data-role="page" id="indexPage"&
&div data-role="header"&
&div data-role="content"&
&a href="#" data-role="button" id="loadUrl"&加载chinaz&/a&
&a href="#" data-role="button" id="splashscreenShow"&splashscreenShow&/a&
&a href="#" data-role="button" id="exitApp"&退出app&/a&
&div data-role="footer"&
&h4&底部&/h4&
&标签：原文地址：http://www.cnblogs.com/LO-ME/p/4574405.html
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！