最近想学习一下手机上的web app开发,朋友推荐phonegap是一个很不错的跨平台开发框架,下面是初次使用的一些总结总结。
1、开发环境配置
系统要求可以具体参考:http://developer.android.com/sdk/requirements.html,下面是操作的具体步骤。
a、安装jdk,jdk是android sdk的安装基础。下载地址:http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-432154.html。windows下推荐使用 jdk-7-windows-i586。
b、安装eclipse,需要3.4以上版本,下载地址:http://www.eclipse.org/downloads/download.php?file=/eclipse/downloads/drops/R-3.7-201106131736/eclipse-SDK-3.7-win32.zip。如果不想安装就使用eclipse classic版本。
c、安装android的SDK,下载地址:http://developer.android.com/sdk/installing.html
安装时需要记录sdk的安装目录,比如:C:\Program Files\Android\android-sdk,在eclipse中导入sdk时使用。导入方法:打开eclipse -> Window -> Preferences -> 选择 android -> 在SDK location填入SDK的安装目录。
注意:1)SDK的路径中不能有空格,可将“Program Files”替换成“PROGRA~1”。2)打开eclipse -> Window -> Android SDK and AVD Manager -> 选择合适的android版本,update all, 保证SDK安装完整。
e、下载安装 ADT Plugin,是一款Eclipse的插件,用于快速开发Android应用。
安装步骤:打开eclipse -> Help -> Install New Software -> add -> Name填ADT Plugin,Location填 https://dl-ssl.google.com/android/eclipse/ -> ok,安装完成后重启eclipse。
注意:如果安装时出现错误,请尝试将 https 改为 http 。
f、下载最新的phonegap稳定版本并解压,可在官方网站下载(www.phonegap.com)。这里使用的是1.1.0。
2、创建project
a、打开eclipse -> File -> New -> Project -> Andorid Project
b、填写项目信息,包括项目名称、选择系统版本(在这里使用的是Android 2.2),Package name等,填完之后finish就创建了一个基本的android应用程序。如下图:
c、创建AVD(android virtual device),为程序选择执行环境。
打开eclipse -> window -> Android SDK and AVD Manager,照下图进行创建:
注意:因为项目在创建时选择了Android2.2,所以选在AVD的target版本应该不能比2.2高。
此时右键选中项目根目录 -> Run as -> Android Application 执行会得到下面的效果:
d、导入phonegap框架
1)在根目录下建libs文件夹,将下载的phonegap解压后的android下的jar包(此处为phonegap-1.1.0.jar)拷到libs目录下。
2)在根目录下的assets目录下建www文件夹,将下载的phonegap解压后的android下的phonegap的js(此处为phonegap-1.1.0.js)拷贝到www目录下。
3)将下载的phonegap解压后的android下的xml文件夹拷贝到项目根目录的res文件夹下。
4)在www目录下建index.html,在html中引入phonegap的js,并调用phonegap的api做一些简单的事情(API的具体含义请参考官方网站),代码如下:
5)修改主程序FirstAppActivity.java,原来代码为:
修改后为:
此时会出现错误,是因为phonegap的jar包没有引入到build path中,右键点击libs -> Build Path -> Configure Path,如下图操作添加jar包到build path中。
6)修改AndroidManifnest.xml文件,将下面的内容添加到版本号的后面。
在activity 节点中添加 android:configChanges="orientation|keyboardHidden"。
7)此时执行,会得到如下基于phonegap的页面:
3、当项目搭建好后,就可以在index.html中使用js、html、css和phonegap的api创建和丰富自己的应用了,大功告成!