phonegap入门（一）- 创建第一个phonegap-CSDN博客

本文详细介绍如何在Android项目中配置PhoneGap，包括所需文件的下载、jar包的导入、Activity的修改、文件结构的搭建及index.html的编写。通过这些步骤，开发者能够将Web应用打包成原生应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、在android项目上配置phonegap，步奏如下：

（1）下载cordova-1.7.0rc1.js和cordova-1.7.0rc1.jar（网址：http://phonegap.com/download）

（2）在所建项目上导入cordova-1.7.0rc1.jar包

（3）在主Activity上导入包：import org.apache.cordova.DroidGap;

把extends Activity改成 extendsDroidGap

（4）在根目录下建立框架结构，如图所示：

其中js文件夹是放置js文件的，如cordova-1.7.0rc1.js等，css文件夹放置样式

（5） index.html是入口地址，可以写你的主页html代码，这里暂时不用jquery-mobile.js，以后会陆续讲解使用。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>You Are The Best</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable=no"> </meta> <meta name="HandheldFriendly" content="true"> <link rel="stylesheet" href="css/jquery.mobile-1.1.0.css"> <link rel="stylesheet" href="css/app.css"> <script src="js/cordova-1.7.0rc1.js"></script> <script src="js/jquery.mobile-1.1.0.min.js"></script> <script type="text/javascript"> document.addEventListener("deviceready",function(){ document.getElementById("likeMe").addEventListener("click",alertCom, false); },false); function alertCom(){ alert("hello world") navigator.notification.alert("We really do think that the best.", function(){}, "You Are The Best") console.log("alertCom() called") var elementId = this.id var greeting console.log("elementId is",elementId) } </script> </head> <body> <div id="main"> You're really great! <br> <button id="likeMe"> Tell me I'm great</button><br> <button id="likeHer">Tell her I'm great</button></div> </body></html>

代码讲解如下：

meta设置viewport元数据，可改变手机视点的大小，宽度为手机宽度，不缩放大小，不允许用户缩放 handheldfriendly主要用于通知浏览器该网页为手机专用网页

document.addEventListener("deviceready",<wbr style="text-align:left"><span style="text-align:left">yourCallbackFunction,</span><wbr style="text-align:left"><span style="text-align:left">false);</span></wbr></wbr>

这是每一个phonegap应用程序都会用到的重要事件

PhoneGap一旦完全加载就会触发deviceready事件。当设备触发该事件后，用户就可以安全进行PhoneGap函数调用。

（6）效果如图所示：