phonegap (apache cordova)开发环境搭建教程

[ 2012-12-31 10:34:30 | 作者: admin ]
字号: | |
p.s. 因为phonegap已经改名为apache cordova,所以下面的教程只能参考,最新的教程可以参考。
就是先搭建好android开发环境,然后再具体的安卓项目中添加phonegap的插件

http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html




Eclipse+android+jdk+phonegap 开发环境教程

基于Android SDK安装PhoneGap框架

首先,要明白一点,就是要利用PhoneGap框架开发移动应用时,也是必须在开发环境上安装对应移动设备应用的SDK的。

比如你要开发一个运行在Android上的应用,则必须安装 Android的SDK包,开发iphone应用,就要安装iphone sdk。

本文将介绍如何安装基于Android SDK下安装PhoneGap。

无论是开发基于哪种平台的移动应用,首先要到PhoneGap的官方网站下载

PhoneGap包,地址是:http://www.phonegap.com/download
目前最新的版本是0.9.1,下载之后,解压缩后,会发现如下图所示的若干个文件夹:这里,由于我们是构建Android应用,因此只有phonegap-android对我们是有用的。

由于PhoneGap是通过Ruby语言以及所开发的目标移动设备的SDK一起搭配工作的,因此除了下载PhoneGap外,开发者还必须安装如下的软件(以Android为例)

我的版本:

Android SDK, android-sdk_r12-windows(最新的那个)

Eclipse IDE eclipse-SDK-3.7-win32(这个也是最新的)

 

JDK jdk-6u10-rc2-bin-b32-windows-i586-p-12_sep_2008(最新地)

Android 的Eclipse插件ADT( http://developer.android.com/sdk/eclipse-adt.html )(可省略,安装完之后可以直接下载android所有插件包)

phonegap

我只列出我实际操作中用到的软件,系统是windows。

Eclipse 以及 Android 的安装查看以下网页 http://mobile.51cto.com/android-227548.htm ,还算详细。

今天主要说以下phonegap的构建,因为我发现网上的一些教程出来的效果都是错误的,可能是版本问题。

有英文基础的查看 http://www.phonegap.com/start#android

英文不好的看下面。

首先进入eclipse界面,新建android工程 new > android project

然后在该工程目录下建立两个文档

/libs 和 /assets/www

把之前下载好的phonegap中的phonegap.js 拷贝到 /assets/www下

phonegap.jar拷贝到/libs下(一般会带版本号,自己改下文件名)

下面是被大家忽略的一步(网上大部分教程少了这步)

复制phonegap下的xml文件夹到 /res下

接下来是修改工程的一些文件,修改src文件下的java文件

把class extent 的activity改成DroidGap

Replace the setContentView() line with super.loadUrl("file:///android_asset/www/index.html");

Add import com.phonegap.*;

Remove import android.app.Activity; (国内很多教程也没有这步,虽然不会报错,但是会出现感叹号,举手之劳删了吧)


接下来你可能会看见边框出现一些红色叉叉,没事。

只是因为eclipse没有找到phonegap.jar而已,帮他找到就好了。

右击 libs文件夹 进去Build Paths/ > Configure Build Paths

java Build Path > Libraries 单击Add JARs(似乎和AddExternal JARs没啥差别)

找到libs下的phonegap.jar路径,单击ok。再按F5刷新下就可以了。

接下来打开 总目录下的AndroidManifest.xml文件 右击 Open With > Text Editor

在版本号下面添加下面这段代码
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" />



添加 android:configChanges="orientation|keyboardHidden"进去activity的属性里面

把第二段代码添加进入第一个activity标签的后面

<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter> </intent-filter> </activity>



最后,在assets/www下创建一个index.html文件

代码如下:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>

</html>



保存,右击工程run as ->Android Application

备注:

Eclipse will ask you to select an appropriate AVD. If there isn't one, then you'll need to create it.

Make sure USB debugging is enabled on your device and plug it into your system. (Settings > Applications > Development)Right click the project and go to Run As and click Android Application


PS:参照官网教程可以省下好多问题,我就是懒得去看英文,才浪费了这么多时间,看来以后还是得硬着头皮看英文说明才是。
[最后修改由 admin, 于 2012-12-31 13:25:19]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=1952

这篇日志没有评论。

此日志不可发表评论。