1 Cordova是谁

PhoneGap的官方文档说的非常清楚。Cordova是PhoneGap的引擎，这两者的关系类似于WebKit与Chrome浏览器的关系。所以一些核心的基础操作对于Cordova与PhoneGap是相通的。有时候使用PhoneGap创建project的会出现一些莫名的问题，推荐使用Cordova创建。

2 下载PhoneGap与Cordova

略。

见《安装配置PhoneGap开发环境（一）》。

3 使用Cordova创建PhoneGap项目

查看当前平台的Cordova版本号：

cordova -version

创建项目：

cordova create my_project "org.yhd.helloworld" "HelloWorld"

进入项目：

cd my_project

加入Android平台支持：

cordova platform add android

生成项目：

cordova build

后面会打印出一堆信息。最后提示：

Ok！成功了。然后就能够使用模拟器执行：

cordova emulate android

注意这时候使用的是默认模拟器。假设你想指定模拟器来执行项目，则须要首先找到emulate.exe。然后启动制定的模拟器：

emulator.exe -avd "moniqi"

这里注意一定要等模拟器启动完成后，再执行项目：

cordova emulate android

成功后有提示：

在模拟器中能够看到效果：

注意到提示画面没？使用Cordova创建的项目提示信息为“APACHE CORDOVA”，而假设使用PhoneGap创建的项目提示信息则为“PHONEGAP”。图片也从PhoneGap的飞行机器人变成了Cordova的小盒子。欢迎信息略有不同，只是项目效果都是一样的。

4 建立eclipse项目

4.1 导入project到eclipse

在Eclipse中点击：

File -> import

选择选择：

Android -> Existing Android Code Into WorkSpace：

出现：

选择号项目路径之后，出现project信息。保持都选中。点击“Finish”：

当中“HelloWorld”就是我们的主project。

4.2 更改目录

打开“HelloWorld”project文件夹，能够看到：

注意看文件夹“www”，这个文件夹事实上并不真正位于project文件夹下，而是从别的文件夹链接过来的，右键->Properties：

点击“Edit”，出现：

能看到位置位于：

${PARENT-2-PROJECT_LOC}\www

这里我们详解一下这个“www”目录的位置，如果我们使用“Cordova”命令创建的project位于：

D:\Studying\phonegap\my_project

当我们为这个project加入了Android支持并编译后，这个Androidproject实际位于：

D:\Studying\phonegap\my_project\platforms\android

这也是我们的eclipseproject“HelloWorld”的实际路径。能够右键project->Properties:

这才是project的实际路径。那么好了。前面看到的：

${PARENT-2-PROJECT_LOC}\www

是什么意思呢？

事实上，“${PARENT-2-PROJECT_LOC}”表示project往上两级文件夹，也就是：

D:\Studying\phonegap\my_project

所以上面的“www”目录位于：

D:\Studying\phonegap\my_project\www

打开项目一看。这个路径下还真有一个“www”目录：

只是要注意的是。当我们执行这个Androidproject。成功看到欢迎界面的时候，事实上展示的是“www”目录里的文件：

index.html

而这个“index.html”，却并不位于刚才的路径下。而是在：

D:\Studying\phonegap\my_project\platforms\android\assets\www

之下，看一下里面的内容：

看到了吧，跟刚才的目录内容稍有不同。这才是“庐山真面目”。项目的“www”目录，事实上调用的应该是这里的资源。所以我们须要在项目中更改原有“www”目录的链接为：

${PARENT-2-PROJECT_LOC}\platforms\android\assets\www

指向“庐山真面目”，我们在eclipse中才干更准确的开发呀。

4.3 设置编码

在导入project之前，workspace的编码必须设置为“UTF-8”才行。否则导入project可能会出现故障。能够通过Window-> Preferences，打开首选项：

设置完成后。我们来測试一下。在index.html文件里加入JavaScript片段：

	document.addEventListener("deviceready", onDeviceReady, false);

	function onDeviceReady() {

	      alert("这是PhoneGap測试程序");

	}

假设发现执行后的project中还出现了乱码：

这时还须要在页面中加上编码解析信息在<head>标签中增加：

    <meta charset="utf-8">

执行看一下效果：

可以看到文字显示信息正常了。

至此使用Cordova搭建基本PhoneGap开发环境就讲完了。

安装配置PhoneGap开发环境（二）——使用Cordova取代PhoneGap创建项目的更多相关文章

  1. Fedora Linux 下安装配置C开发环境Code::Blocks

    一.提前的话要说C语言和Linux的关系大家应该都不会陌生,Linux系统内核就是用C语言开发的,所以所有的Linux系统下面 都会有C的编译调试工具,不过这些工具都是命令式的,正式开发的话会很不方便 ...

  2. python_在windows下安装配置python开发环境及Ulipad开发工具

    最近开始学习Python,在网上寻找一下比较好的IDE.因为以前用C#做开发的,用Visual Studio作为IDE,鉴于用惯了VS这么强大的IDE,所以对IDE有一定的依赖性. Python的ID ...

  3. 在windows下安装配置python开发环境及Ulipad开发工具（转）

    最近开始学习Python,在网上寻找一下比较好的IDE.因为以前用C#做开发的,用Visual Studio作为IDE,鉴于用惯了VS这么强大的IDE,所以对IDE有一定的依赖性. Python的ID ...

  4. 在windows安装配置Git开发环境

    开始配置Git的开发环境.首先从google  code下载最新的windows的git安装包msysgit,当时我下载的是Git-1.7.4-preview20110204.exe,然后就开始安装了 ...

  5. 安装配置Android开发环境SDK

    引言: 好搞事情,搞点移动端测试高大尚的东西,首先先得把环境搭建起来: 1.下载 握了个草,很多网站都直接推荐到android官网去下载,叔不知google官网早就被我大天朝给墙了,对于不喜欢FQ的天 ...

  6. ubuntu16安装,配置前端开发环境

    1.安装ubuntu    使用usio制作U盘安装工具 2.安装搜狗输入法 3.安装QQ 4.安装nodejs node-v0.12.4 node-v0.12.4.tar.gz root@ubunt ...

  7. mac下安装配置java开发环境

    可以使用homebrew下载相关软件,以下具体讲一下环境的配置: mac下安装jdk vi .bash_profile 输入i,进入编辑模式 输入以下配置,其中JAVA_HOME是你的jdk安装目录 ...

  8. 安装与配置Flutter开发环境

    这篇博客我们介绍了Flutter,并且对比了H5,React Native,Flutter. 由于Flutter是跨平台的开发框架,开发一次可以同时运行在Android和iOS上面,所以我们开发时最好 ...

  9. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

随机推荐

  1. Sound.loadCompressedDataFromByteArray

    前不久Adobe发布了Flash Player 11的release版本, Flash Player 11 带来了很多新特性, 最最红火的就是Stage3D了,但是这里讲的是这个版本的另一个新特性, ...

  2. 关于fmri数据分析的两大类，四种方法

    关于fmri数据分析的两大类,四种方法: 数据驱动: tca:其实这种方法,主要是提取时间维的特征.如果用它来进行数据的分析,则必须要利用其他的数据方法,比如结合ICA. ica:作为pca的一般化实 ...

  3. 重新总结flex布局（flex，flex-direction，justify-content，align-items，flex-wrap，align-self）

    1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...

  4. #include &lt;NOIP2008 Junior&gt; 双栈排序 ——using namespace wxl;

    题目描述 Tom最近在研究一个有趣的排序问题.如图所示,通过2个栈S1和S2,Tom希望借助以下4种操作实现将输入序列升序排序. 操作a 如果输入序列不为空,将第一个元素压入栈S1 操作b 如果栈S1 ...

  5. OpenGL: 你不知道的左右手坐标系

    左右手坐标系 众所周知,OpenGL使用的是右手坐标系,而Direct3D使用的是左手坐标系. 除了上面Z轴的方向不一样外,左右手坐标系的还有其他区别: 正向旋转方向:在左手系中用Left-Hand ...

  6. Orchard运用 - 理解App_Data目录结构

    了解一个系统,应该基本上要了解目录结构及其组织形式.这样对于开发人员更是必备的知识,比如开发模块最终安装到哪,主题Themes是如何配置启用. 今天跟大家分享其实是个笔记记录,就是看到有一篇文章介绍A ...

  7. C# 窗体WinForm中动态显示radioButton实例

    一个项目中用到的实例,根据数据库查询出待显示的radioButton的个数,显示在一个新的窗口中. //动态显示radioButton public void showRadioButton(int ...

  8. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

  9. Android之旅 自我图示总结四大组件

    最近学完了Android的四大组件的基础知识,自己总结了一个图示,希望自己看到这个图的时候能回忆起相关的知识点,与大家分享!

  10. Python 谷歌翻译

    #coding=utf-8 import re import urllib import urllib2 url_google = 'http://translate.google.cn' reg_t ...