对于新手来说最郁闷的是没人告诉你phonegap3.4和phonegap2.8的使用方式不一样,结果根据教程总是无法进行下去,我就是这样一个新手,经过两天的折腾,总算有点眉目,今天在这里总结一下。
对于新手来说最好使用ADT Bundle,虽然使用Eclipse安装插件的形式也可以,但是在目前网络环境不佳的情况下,加上本来就对Eclipse IDE就不熟悉,所以直接下载ADT Bundle是最省事的,下载解压即可以用,而且android的sdk、插件都已经给你配置好了。
下载页面:http://developer.android.com/sdk/index.html?hl=sk,选择一个适合你的版本(比如32位、64位的)
这个下载下来之后,解压即可使用,但是要配置一个环境变量PATH,将sdk目录下的platform-tools目录和tools目录加到PATH中,如下图:
开发android程序来说jdk是必备的,其实很多其它开发环境也要求jdk,可能你都已经装好了,没有的话去oracle官网下载一个:
下载页面:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
当然还是下载离线版本的,很多工具在线安装都出奇的慢。
这个安装完成之后,应该是自动配置好环境变量JAVA_HOME的,如果没有,就自己配置上去,如下图:
打包jar用的工具,下载页面:http://ant.apache.org/bindownload.cgi
这个ant下载下来解压之后就可以使用,但是要配置一下环境变量PATH,把ant\bin目录加到PATH中,如下图:
需要用到nodejs中的npm来安装phonegap3.4,这个直接在官网上下载就可以:http://nodejs.org/
直接点INSTALL,它会自动选择匹配你系统的版本下载。
安装完成之后,设置一下NODE_PATH环境变量,比如你的nodejs安装在d:\nodejs下,则NODE_PATH设置为d:\nodejs\node_modules,该目录就是以后通过npm安装的所有包的安装路径,而且使用npm安装时不要使用-g选项,而是直接到d:\nodejs目录下,使用npm安装,因为我不喜欢将包安装在C盘下一个很深的目录下,找都找不到。
python很多地方也需要用到,所以最好安装上,而且建议安装2.7.3版本,同样也在官网上下载(官网上有的绝不再其他地方下载)
下载页面:https://www.python.org/download/releases/2.7.3
下载完成,安装之后,需要设置两个环境变量:
PYTHON:%PYTHONPATH%\python.exe
PYTHONPATH:D:\Python27
这里PYTHONPATH是Python的安装路径,PYTHON是python的执行文件。
至此,开发环境应该准备完成了,打开eclipse先试一个hello world吧:
只需要填写”Application Name“,然后一路Next>,最后Finish
可以看到工程learn1已经新建出来而且还有一个伴随的工程appcompat_v7(我也是新手,还没来得及研究这个什么意思),先不管这个什么意思,你还会看到工程名称前面有红色的感叹号,红色的叉号(什么?新建出来的工程就有错误?),别急,等会儿这个提示就消失了,然后你就在learn1工程上点击右键,选择”Run As“->”Android Application“,哦,对,Android虚拟机还没有创建,怎么运行程序呢?android程序需要在一个模拟的Android机器上运行,或者直接在一个Android真机上运行。如果你有android手机的话,用usb连接手机,打开手机上的调试模式(如果手机驱动没有安装,请先安装驱动,具体怎么安装请Google)。如果一切准备就绪,你Run AS->Android Application将看到这么一个对话框:
选择那个正在运行的设备,开始运行吧。
当然你可以创建虚拟机(Android Virtual Device),只不过虚拟机的运行非常慢,启动都非常慢,不要怪我没提醒你,别以为虚拟机启动不起来,其实它很慢。
第一个android程序完成了,也就是android开发环境没有问题了,下面就将说说怎么集成phonegap开发环境。
下载phonegap2.8.1版本,下载页面:http://phonegap.com/install/,选择phonegap2.8.1。下载完成解压备用。
将phonegap2.8.1/lib/android/cordova-2.8.1.jar拷贝到工程目录的libs下,
将phonegap2.8.1/lib/android/cordova.js拷贝到工程目录的assets/www目录下(没有就新建),
将phonegap2.8.1/lib/android/xml目录拷贝到工程目录的res目录下。
你看到的工程目录结构应该是这样子的:
首先修改AndroidManifest.xml文件,右键使用文本编辑器打开,在版本声明之后增加以下文本:
<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" />
然后在activity标记中添加android:configChanges="orientation|keyboardHidden”
在assets/www目录上点击右键新建一个File,取名为index.html,内容为:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
打开src/com.example.learn2下的MainActivity.java文件,修改MainActivity类,如下:
修改成:
注意onCreate需改成public,然后把MainActivity类中的其它函数都删除。
在cordova-2.8.1.jar上点击右键,选择Build Path->Add to Build Path
选择RunAS->Android Application吧,可以看到基于phonegap的android运行起来了,界面就是index.html中的界面。
phonegap3.4版本默认是没有cordova.jar文件的,做为新手的我最早下载的是2.9.1版本的,结果也是没有jar文件的,而入门教程都提到了这个文件,入门不下去啊,结果就是放弃了这个版本,转成2.8.1版本,2.8.1版本搞成之后,不甘心啊,所以继续研究3.4版本,发现3.4版本更加简单:
在nodejs的安装目录下执行npm install phonegap,有些地方写npm install cordova,反正很乱,我是执行的phonegap这个,这个安装可折磨死人了,原因你懂的。所以你需要一个代理,推荐使用goagent(我一直使用这个,很稳定,怎么安装,还是Google吧)
在你的eclipse 工作目录下执行:
$ phonegap create my-app
$ cd my-app
插上android手机
$ phonegap run android
执行最后一步phonegap run android的时候如果报这个错:
phonegap 3.4 Error: An error occurred while listing Android targets
可能是由于你没有设置将adt目录下的sdk目录下的platform-tools目录和tools目录加到PATH中,参照环境配置。
File->New ->Project->Android Project from Existing Code,如下图:
我们发现这里有两个工程HelloWorld和HelloWorld-CordovaLib,HelloWorld-CordovaLib其实就是2.8.1中的那个jar文件,两个都导入,编译完之后,运行HelloWorld,结果与phonegap run android 一样。
这里有一个问题,就是我将”Copy projects into workspace"勾上之后,导入,报了这么一个错误:
[2014-05-16 16:32:53 - HelloWorld-CordovaLib] Project has no project.properties file! Edit the project properties to set one.
而且HelloWorld的工程属性中出现这么一个错误:
目前没有解决,如果大神看到这个,指导小弟一下,不甚感激。
其实上面这一步导入,可以只导入Helloworld,而不用导入Helloworld-CordovaLib,因为Helloworld-CordovaLib就是为了生成cordova.jar库文件,我们可以自己使用ant打包生成一个然后拷贝到Helloworld工程的libs目录下即可,打包过程如下:
进入cordova的framework目录,我的目录在C:\Users\myname\.cordova\lib\android\cordova\3.4.0\framework下
c:\>cd Users\myname\.cordova\lib\android\cordova\3.4.0\framework
c:\> android update project -p . (后面有个点哦,表示当前路径,网上有篇文章漏了这个)
c:\>ant jar
正常情况下在当前目录下就生成了一个cordova-3.4.0.jar文件,将该文件拷贝到Helloworld工程的的libs下就可以了。
所以以后创建phonegap3.4工程后,导入eclipse时,就只需要导入主工程,不需要导入lib工程,然后选择Copy projects into workspace,最后将cordova-3.4.0.jar拷到libs目录下。
这个刚导入的工程你会发现assets目录下只有一个_where-is-www.txt文件(www哪儿去了),打开它,它会告诉你怎么找回来的:)
终于写完了,借着总结的契机,又入门了一遍。