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

益之 2014-01-09

在使用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工程,截图如下:

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

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

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

在Servers视图中点击这个(或者右键)

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

选择HTTP Preview(不要Finish)

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

将静态项目添加到预览

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

切换视图到Navigation(不会切的上网查),删除项目中的WebContent文件夹,删除后如下:

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

删除后的样子

然后打开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还是很方便的。

相关推荐

malonely / 0评论 2013-03-07