使用WTP与原生开发环境共同开发PhoneGap项目

在使用PhoneGap进行开发的过程中，由于大部分界面信息是用html5和CSS3进行搭建的，所以使用WTP对其中的HTML进行调试是比较方便的，这里介绍个人喜欢的调试方法，如下：

1. 创建一个PhoneGap项目：在该项目的www文件夹（不同系统ios和android似乎不同）下存储着项目HTML部分。
2. 使用WTP创建静态HTML项目，并使用HTTP Preview进行这个项目的调试。
3. 使用linkedResources将www文件夹link到WTP项目中。
4. 使用浏览器调试该项目。

具体操作如下：

一、创建PhoneGap项目，具体可以参见：Windows下PhoneGap移动开发环境搭建-Android  。

二、使用WTP创建静态WEB工程，注意，要下载使用最新的WTP，低版本的可能存在问题。下载地址如下：http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/keplersr1 。

下载完成后可以创建一个空的静态Web工程，截图如下：

三、使用HTTP Preview对上述项目进行调试：

在Servers视图中点击这个（或者右键）

选择HTTP Preview（不要Finish）

 

将静态项目添加到预览

四、使用linkResource连接www文件夹：

切换视图到Navigation（不会切的上网查），删除项目中的WebContent文件夹，删除后如下：

删除后的样子

然后打开project，修改，加入linkResource标签，加入后样子如下：

 

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
	<name>TmallDemo</name>
	<comment></comment>
	<projects>
	</projects>
	<buildSpec>
		<buildCommand>
			<name>org.eclipse.wst.jsdt.core.javascriptValidator</name>
			<arguments>
			</arguments>
		</buildCommand>
		<buildCommand>
			<name>org.eclipse.wst.common.project.facet.core.builder</name>
			<arguments>
			</arguments>
		</buildCommand>
		<buildCommand>
			<name>org.eclipse.wst.validation.validationbuilder</name>
			<arguments>
			</arguments>
		</buildCommand>
	</buildSpec>
	<natures>
		<nature>org.eclipse.wst.common.project.facet.core.nature</nature>
		<nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature>
		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
	</natures>
	<linkedResources>
		<link>
			<name>WebContent</name>
			<type>2</type>
			<location>F:/mobile/TmallDemo/platforms/android/assets/www</location>
		</link>
	</linkedResources>
</projectDescription>

 

其中绝对路径为你的PhoneGap项目中的www文件夹。

五、使用浏览器调试项目：启动刚才创建的HTTP Preview，使用浏览器访问该服务，将在浏览器端看到PhoneGap项目的样子，当然会有些出入，但是调试布局和JS还是很方便的。