(一)phoneGap之环境搭建教程及其example分析

phoneGap之环境搭建教程及其example分析

一、环境搭建

与普通的开发android应用一样,phoneGap也同于原生android应用一样,环境相同,只是有部分不同,下面就我做理解,进行说明,不足之处还请大家及时提醒,谢谢!
       一.安装

在安装PhoneGap开发环境之前,需要按顺序安装以下工具:

1.Java SDK

java sdk,不安装的话不能正常安装Android SDK。

安装成功检测:启动DOS窗口start-->run-->cmd,在DOS窗口中键入:java -version,如能显示版本信息说明安装正常。

2.Eclipse

java开发工具,这我就不用多说了,推荐装classic版的。

3.Android SDK

下下来安装完之后是一个Android SDK Manager,你需要下载以下组件,可能需要较长时间:

4.ADT Plugin

这是一个Eclipse插件,作用是关联Android SDK,使你的Eclipse能够新建Android工程,安装方法如下:

打开Eclipse中的菜单 “Help”->”InstallNewSoftware”进入软件安装界面,点击“Add”按钮,如下图设置即可下载。

5.PhoneGap

下载PhoneGap,解压缩即可,打开里面的libs>android文件夹:

其中标红的三个文件夹是我们需要用到的。

二.新建一个PhoneGap项目

1.在eclipse中新建Android Project,名字神马的随便取吧;

2.在项目的目录下,建两个文件夹:

/libs

/assets/www

3.进入将刚刚下载并解压的PhoneGap包里Anroid目录,我们需要的资源都在这个目录下。

将phonegap-x.x.x.js这个js文件(具体名称视当时下载的版本而定)copy到/assets/www目录下,

把phonegap.jar文件copy到/libs目录下。

再把xml目录copy到android项目的res目录下。

4.在/assets/www下建立index.html文件,内容看起来像这样:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>PhoneGap</title>
  5. <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
  6. </head>
  7. <body>
  8. <h1>Hello World</h1>
  9. </body>
  10. </html>

5.将以下权限配置的xml内容copy到AndroidManifest.xml文件中:

  1. <supports-screens
  2. android:largeScreens="true"
  3. android:normalScreens="true"
  4. android:smallScreens="true"
  5. android:resizeable="true"
  6. android:anyDensity="true"
  7. />
  8. <uses-permission android:name="android.permission.CAMERA" />
  9. <uses-permission android:name="android.permission.VIBRATE" />
  10. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  11. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  12. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  13. <uses-permission android:name="android.permission.READ_PHONE_STATE" />
  14. <uses-permission android:name="android.permission.INTERNET" />
  15. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  16. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  17. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  18. <uses-permission android:name="android.permission.READ_CONTACTS" />
  19. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  20. <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" />

6.将以下内容添加到AndroidManifest.xml文件的activity标签中:

android:configChanges="orientation|keyboardHidden

这是为了保证机器在横竖屏切换的时候不会重新执行Activity的onCreate方法;

7.AndroidManifest.xml最后看起来会像这样:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="com.example.shawn"
  4. android:versionCode="1"
  5. android:versionName="1.0">
  6. <supports-screens
  7. android:anyDensity="true"
  8. android:largeScreens="true"
  9. android:normalScreens="true"
  10. android:resizeable="true"
  11. android:smallScreens="true"
  12. android:xlargeScreens="true" />
  13. <uses-permission android:name="android.permission.CAMERA" />
  14. <uses-permission android:name="android.permission.VIBRATE" />
  15. <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  16. <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  17. <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  18. <uses-permission android:name="android.permission.INTERNET" />
  19. <uses-permission android:name="android.permission.RECEIVE_SMS" />
  20. <uses-permission android:name="android.permission.RECORD_AUDIO" />
  21. <uses-permission android:name="android.permission.RECORD_VIDEO" />
  22. <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  23. <uses-permission android:name="android.permission.READ_CONTACTS" />
  24. <uses-permission android:name="android.permission.WRITE_CONTACTS" />
  25. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  26. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  27. <uses-permission android:name="android.permission.GET_ACCOUNTS" />
  28. <uses-permission android:name="android.permission.BROADCAST_STICKY" />
  29. <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" />
  30. <application android:label="@string/app_name"
  31. android:icon="@drawable/ic_launcher"
  32. android:theme="@style/AppTheme">
  33. <activity
  34. android:name="outer"
  35. android:configChanges="orientation|keyboardHidden"
  36. android:label="@string/app_name" >
  37. <intent-filter>
  38. <action android:name="android.intent.action.MAIN" />
  39. <category android:name="android.intent.category.LAUNCHER" />
  40. </intent-filter>
  41. </activity>
  42. </application>
  43. </manifest>

其中<application>标签我们可以看做是我们当前的应用,而<activity>代表我们应用内的一个界面,<intent-filter>标签里我们给当前页面设置了一个权限

android.intent.action.MAIN表示是最先启动的的界面;

android.intent.category.LAUNCHER决定应用程序是否显示在程序列表里;

另外需要注意的是:

  1. <activity
  2. android:name="outer"
  3. android:configChanges="orientation|keyboardHidden"
  4. android:label="@string/app_name" >

我们的<activity>标签中有这样一个类名outer,我们可以自己定义它,一会儿我们会用到这个类名。

8.在刚刚新建的Android Project中找到libs目录并在cordova-2.0.0.jar上点击右键,选择 Build Path->Add to Build Path

9.最后再修改下src下的Java主文件(如果没有就自己创建一个),我们要做以下几件事:

1)添加import com.phonegap.*;

2)删掉import android.app.Activity;

3)还记得刚才的outer类么?这里将outer继承为DroidGap;

4)把setContentView()这行替换为super.loadUrl("file:///android_asset/www/index.html");

5)最后看起来就像这样:

  1. package com.example.shawn;
  2. import android.os.Bundle;
  3. import org.apache.cordova.*;
  4. public class outer extends DroidGap {
  5. @Override
  6. public void onCreate(Bundle savedInstanceState)
  7. {
  8. super.onCreate(savedInstanceState);
  9. super.loadUrl("file:///android_asset/www/index.html");
  10. }
  11. }

三、解析说明

大家可以看到其实phoneGap充当了一座桥梁,是链接html和原生app的桥梁,通过js进行链接。

来自为知笔记(Wiz)

时间: 2024-10-26 05:19:28

(一)phoneGap之环境搭建教程及其example分析的相关文章

Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程

这篇文章主要介绍了Win2012 R2 IIS8.5+PHP(FastCGI)+MySQL运行环境搭建教程,需要的朋友可以参考下 准备篇 一.环境说明: 操作系统:Windows Server 2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.5.8-nts-Win32-VC11-x86.zip 2.MySQL下载地址:

[PhoneGap]开发环境搭建与简单应用

目前,随着Google的Android手机和苹果的iphone手机的逐渐普及,越来越多开发者加入到移动应用开发的大军当中.其中,Android应用是基于Java语言基础上进行开发的,而苹果公司的iphone则是基于C语言开发的.如果开发者编写的应用需要同时在不同的移动设备上运行的话,则必须要掌握多种开发语言.而为了进一步简化移动应用的编程,Nitobi公司推出了一套开源的移动应用解决方案PhoneGap(http://www.phonegap.com). PhoneGap是一款开源的手机应用开发

Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境搭建教程

原文地址:http://www.osyunwei.com/archives/7378.html 搬运是为了自己找资料方便. 准备篇 一.环境说明: 操作系统:Windows Server 2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.5.8-nts-Win32-VC11-x86.zip 2.MySQL下载地址: htt

Windows Server 2003 IIS6.0+PHP5(FastCGI)+MySQL5环境搭建教程

准备篇 一.环境说明: 操作系统:Windows Server 2003 SP2 32位 PHP版本:php 5.3.14 MySQL版本:MySQL5.5.25 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.3.14-nts-Win32-VC9-x86.zip 2.MySQL下载地址: http://gd.tuwien.ac.at/db/mysql/Downloads/MySQLInstaller/my

Windows Server 2012 R2 IIS8.5+PHP(FastCGI)+MySQL环境搭建教程

准备篇 一.环境说明: 操作系统:Windows Server 2012 R2 PHP版本:php 5.5.8 MySQL版本:MySQL5.6.15 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.5.8-nts-Win32-VC11-x86.zip 2.MySQL下载地址: http://cdn.mysql.com/Downloads/MySQLInstaller/mysql-installer-com

Windows Server 2008 R2 IIS7.5+PHP5(FastCGI)+MySQL5环境搭建教程

准备篇 一.环境说明: 操作系统:Windows Server 2008 R2 PHP版本:php 5.4.4 MySQL版本:MySQL5.5.25 二.相关软件下载: 1.PHP下载地址: http://windows.php.net/downloads/releases/php-5.4.4-nts-Win32-VC9-x86.zip 2.MySQL下载地址: http://gd.tuwien.ac.at/db/mysql/Downloads/MySQLInstaller/mysql-ins

phoneGap开发环境搭建(android)

1.  首先安装nodejs  (http://nodejs.org/) 2.  然后在命令行输入 npm 回车 如果出现下图: 则表示安装成功 3. 安装 npm install -g cordova 4.  安装JDK 这里最麻烦的就是环境变量的配置了 配置环境变量:右击"我的电脑"-->"高级"-->"环境变量" 1)在系统变量里新建JAVA_HOME变量,变量值为:C:\Program Files\Java\jdk1.6.0_

windows下vue.js开发环境搭建教程

这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说

phonegap 开发环境搭建

一.基本android开发环境搭建 Eclipse + adt插件 + android sdk + ant 环境变量配置 path路径下加入 D:\eclipse\plugins\org.apache.ant_1.9.2.v201404171502\bin D:\apache-ant-1.9.2\bin; D:\android-sdk-windows\platform-tools D:\android-sdk-windows\tools 二.phonegap开发环境搭建 1.搭建好基本的andr