android Phonegap项目的HelloWorld
2014-03-17 10:33
197 查看
下面是整个创建phonegap项目的步骤:
在 Eclipse 中创建项目
请按照以下步骤在 Eclipse 中创建新的 Android 项目:选择 New > Android Project(参见图 1)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig01.jpg)
图 1. 创建新的 Android 项目。
创建全新的标准 Android 项目后,将更新该项目以使用 PhoneGap。
在 New Android Project 对话框中,键入项目名称,然后选中 Create New Project In Workspace(参见图 2)。
单击 Next。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig02.jpg)
图 2. New Android Project 对话框。
选择 Android 2.2 作为构建目标,然后单击 Next(参见图 3)。
注意:选择 Android 2.2 作为构建目标会将该编译器配置为以 Android 2.2 SDK 为目标,这样可确保您的 PhoneGap 应用程序在运行 Android 2.2 及更新版本的操作系统的设备上运行。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig03.jpg)
图 3. 选择构建目标。
在 Application Info 屏幕上,键入您的主要 Android 应用程序的程序包名称(参见图 4)。这将是一个从逻辑上展示程序包结构的命名空间,例如
com.yourcompany.yourproject。
单击 Finish。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig04.jpg)
图 4. 指定程序包名称。
配置项目以使用 PhoneGap
此时,Eclipse 创建了一个空白的 Android 项目。但是,并未将它配置为使用 PhoneGap。接下来,您需要执行以下操作在新 Android 项目内创建一个 assets/www 目录和一个 libs 目录。PhoneGap 应用程序界面的所有 HTML 和 JavaScript 均将驻留在 assets/www 文件夹内(参见图 5)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig05.jpg)
图 5. 新项目目录。
要将 PhoneGap 的必要文件复制到项目内,首先找出下载 PhoneGap 的目录,然后导航至 lib/android 子目录(参见图 6)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig06.jpg)
图 6. PhoneGap lib/android 目录。
将 cordova-1.5.0.js 复制到 Android 项目内的 assets/www 目录。
将 cordova-1.5.0.jar 复制到 Android 项目内的 libs 目录。
将 xml 目录复制到 Android 项目内的 res 目录(参见图 7)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig07.jpg)
图 7. 复制资源。
接下来,在 assets/www 文件夹中创建一个名为 index.html 的文件。此文件将用作 PhoneGap 应用程序界面的主要入口点
在 index.html 中,添加以下 HTML 代码作为用户界面开发的起点:
<!DOCTYPE HTML><html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body></html>
您需要将 cordova-1.5.0.jar 库添加到该 Android 项目的构建路径。右键单击 cordova-1.5.0.jar,然后选择 Build Path > Add To Build Path(参见图 8)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig08.jpg)
图 8. 将 cordova-1.5.0.jar 添加至构建路径。
更新 Activity 类
现在,您已经为更新 Android 项目以确保其开始使用 PhoneGap 做好准备。打开您的主应用程序活动文件。此文件的名称与您的项目相同,并会在后面加上 "Activity" 一词。它将位于您先前在此流程中指定的项目程序包的
src文件夹下。
对于我的项目(名为 HelloGap)而言,主 Android 活动文件名为 HelloGapActivity.java,位于我在 New Android Project 对话框中指定的程序包 com.tricedesigns.hello 中。
在主 Activity 类中,为
org.apache.cordova.DroidGap添加以下导入语句:
import org.apache.cordova.DroidGap;
将基类从
Activity更改为
DroidGap;它位于类定义中
extends一词的后面:
public class HelloGapActivity extends DroidGap {
用从您此前创建的本地 assets/www/index.html 文件加载 PhoneGap 界面的引用替换
setContentView()调用函数(参见图 9)。
super.loadUrl("file:///android_asset/www/index.html");
注意:在 PhoneGap 项目中,您可以引用位于 URL 引用为 file:///android_asset 的 assets 目录中的文件,然后引用该文件的路径名称。file:///android_asset URI 将会映射到 assets 目录。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig09.jpg)
图 9. 主 Activity 类更新。
配置项目元数据
现在,您已经将 Android 项目内的文件配置为使用 PhoneGap。最后一步是配置项目元数据,以使 PhoneGap 运行。首先,在您的项目根中打开 AndroidManifest.xml 文件。使用 Eclipse 文本编辑器,方法是右键单击 AndroidManifest.xml 文件,然后选择 Open With > Text Editor(参见图 10)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig10.jpg)
图 10. 打开 AndroidManifest.xml。
在 AndroidManifest.xml 中,添加以下
supports-screen XML节点作为
manifest根节点的子节点
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />
supports-screen节点可识别您应用程序支持的屏幕大小。您可以通过更改此条目的内容来调整屏幕和外观设置支持。要阅读有关
<supports-screens>,的更多信息,请访问 Android 开发人员主题
– 支持屏幕元素。
接下来,您需要为 PhoneGap 应用程序配置权限。
复制以下
<uses-permission>XML 节点,并粘贴它们作为 AndroidManifest.xml 文件
<manifest>根节点的子节点:
<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" /><uses-permission android:name="android.permission.BROADCAST_STICKY" />
<uses-permission>XML 值可识别您要为应用程序启用的功能。上述代码行可启用 PhoneGap 所有功能正常运行所需的全部权限。构建完应用程序后,您可能希望删除不会实际用到的所有权限;这将会删除应用程序安装过程中出现的安全警告。要阅读有关 Android 权限和
<uses-permission>元素的更多信息,请访问
Android 开发人员主题 – 用户权限元素。
应用程序权限配置完毕后,您需要修改现有的
<activity>代码。
找到
<activity>节点,它是
<application>XML 节点的子节点。将下面的属性添加到该
<activity>节点:
configChanges="orientation|keyboardHidden"
接下来,您需要再为
org.apache.cordova.DroidGap类创建一个
<activity>节点。添加下面的
<activity>节点作为现有
<activity>XML 节点的同级节点。
<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>
此时,已将您的项目配置为作为 Android PhoneGap 项目运行。如果您遇到任何问题,请根据
Android PhoneGap 入门网站提供的示例验证您的配置。
运行应用程序
要在 Android 模拟器中启动您的 PhoneGap 应用程序,请右键单击项目根目录,然后选择 Run As > Android Application(参见图 11)。![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig11.jpg)
图 11. 启动 Android 应用程序。
如果您尚未设置任何 Android 虚拟设备,那么系统将提示您配置一台 Android 虚拟设备。要了解有关配置 Android 模拟器虚拟设备的更多信息,请访问
Android 开发人员设备指南。
Eclipse 将自动启动 Android 模拟器实例(如果尚未运行的话),为该模拟器部署您的应用程序,然后启动该应用程序(参见图 12)。
![](http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android/gs_pg_android_fig12.jpg)
图 12. Android 模拟器中的应用程序。
注意事项:1。phonegap现在的版本是3.4.0,而且官网不提供下载,只能在linux或者windows的命令行中进行下载,而且比较坑!暂时未找到合适的下载方式!
2。一个小错误的解决:Connection to server was unsuccessful
Tip for anyone building HTML 5 apps using PhoneGap (now called Cordova). If you are seeing inconsistent/transient error messages saying something like [Connection to server was unsuccessful to "www/assets/index.html"] when starting up your app.
This is caused by your App timing out. You can either increase the time-out time, but will only reduce the frequency of the issue, or you can:
Rename your index.html to “main.html”
Create a new “index.html” and put the following content into it:
<!doctype html> <html> <head> <title>tittle</title> <script> window.location='./main.html'; </script> <body> </body> </html>
Rebuild your app! No more errors!
Another good idea is to give your application a “splash screen”, so that the user gets instant feedback that your app is loading/working, before it is fully ready.
好了,先写这么多,随后补充!
相关文章推荐
- Android开发之旅:HelloWorld项目…
- PhoneGap 2.0.0安装,命令行构建,编译Android项目
- PhoneGap开发的android项目环境搭建简单流程
- 第一个Android项目HelloWorld
- Android开发3:项目目录介绍&HelloWorld
- 初学者之Android HelloWorld项目
- phonegap helloworld 之android
- Android开发之旅:HelloWorld项目的目录结构
- Android开发之旅:HelloWorld项目的目录结构
- Android入学第一步---> 项目helloworld
- Android下HelloWorld项目的AndroidManifest.xml文件介绍
- Android基础学习-----创建第一个Android项目HelloWorld(二)
- Phonegap Android 项目使用Cordova
- Android开发之旅:;HelloWorld项目的目录结构; android架构
- Android开发之旅:HelloWorld项目的目录结构
- 【Android】3、分析HelloWorld项目目录结构
- Android开发之旅:HelloWorld项目的目录结构
- phoneGap(Cordova)Android项目搭建
- android Hybird开发,phonegap项目,node grunt 压缩、混淆 angularjs/ionic
- Android开发之旅:HelloWorld项目的目录结构