phonegap入门（一）- 创建第一个phonegap

最新推荐文章于 2025-07-23 14:31:37 发布

原创最新推荐文章于 2025-07-23 14:31:37 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#phonegap #stylesheet #function #手机 #import #android

html5 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍如何在Android项目中配置PhoneGap，包括所需文件的下载、项目设置步骤及示例代码，帮助开发者快速实现跨平台应用开发。

摘要生成于 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改成 extends DroidGap

（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", yourCallbackFunction, false);

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

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

（6）效果如图所示：