phonegapandroid配置文档.docx
《phonegapandroid配置文档.docx》由会员分享,可在线阅读,更多相关《phonegapandroid配置文档.docx(17页珍藏版)》请在冰豆网上搜索。
phonegapandroid配置文档
终
端
配
置
文
档
(android部分)
版本修改记录
序
修改人
修改内容
批准人
修改日期
版本号
1
周传健
最初版本
2012-5-15
V0.1
2
3
4
前言
本文档主要描述基于phonegap的跨平台移动应用开发,中android平台上的phonegap代码移植部分,包括了两大部分:
环境的搭建部分我们可以了解到android平台环境的搭建,sdk和adt等安装。
Phonegap插件导入与开发部分主要讲了如何在android平台上进行phonegap跨平台的编写应用和phonegap最重要的插件概念及其导入与自己开发简单插件的步骤
目录
前言II
目录III
第一章环境搭建IV
1.1Android开发环境配置IV
1.2Phonegap导入配置与运行VII
第二章Phonegap插件导入与开发XV
2.1Phonegap插件导入XVI
2.2Phonegap插件开发XVII
第三章结束XIX
第一章环境搭建
1.1Android开发环境配置
1.1.1JDK安装
如果你还没有JDK的话,可以去这里下载,接下来的工作就是安装提示一步一步走。
设置环境变量步骤如下:
1.我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量:
2.JAVA_HOME值为:
D:
\ProgramFiles\Java\jdk1.6.0_18(你安装JDK的目录)
3.CLASSPATH值为:
.;%JAVA_HOME%\lib\tools.jar;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\bin;
4.Path:
在开始追加%JAVA_HOME%\bin;
5.NOTE:
前面四步设置环境变量对搭建Android开发环境不是必须的,可以跳过。
安装完成之后,可以在检查JDK是否安装成功。
打开cmd窗口,输入java–version查看JDK的版本信息。
出现类似下面的画面表示安装成功了:
图1、验证JDK安装是否成功
1.1.2Eclipse安装
如果你还么有Eclipse的话,可以去这里下载,下载如下图所示的EclipseIDEforJavaDevelopers(92M)的win32bit版:
图2、Eclipse下载
解压之后即可使用。
1.1.3AndroidSDK安装
在AndroidDevelopers下载android-sdk_r05-windows.zip,下载完成后解压到任意路径。
1.运行SDKSetup.exe,点击AvailablePackages。
如果没有出现可安装的包,请点击Settings,选中Misc中的"Forcehttps:
//..."这项,再点击AvailablePackages。
2.选择希望安装的SDK及其文档或者其它包,点击InstallationSelected、AcceptAll、InstallAccepted,开始下载安装所选包
3.在用户变量中新建PATH值为:
AndroidSDK中的tools绝对路径(本机为D:
\AndroidDevelop\android-sdk-windows\tools)。
图2、设置AndroidSDK的环境变量
“确定”后,重新启动计算机。
重启计算机以后,进入cmd命令窗口,检查SDK是不是安装成功。
运行android–h如果有类似以下的输出,表明安装成功:
图3、验证AndroidSDK是否安装成功
1.1.4ADT安装
打开EclipseIDE,进入菜单中的"Help"->"InstallNewSoftware"
点击Add...按钮,弹出对话框要求输入Name和Location:
Name自己随便取,Location输入http:
//dl-
确定返回后,在workwith后的下拉列表中选择我们刚才添加的ADT,我们会看到下面出有DeveloperTools,展开它会有AndroidDDMS和AndroidDevelopmentTool,勾选他们。
如下图所示:
然后就是按提示一步一步next。
完成之后:
1.选择Window>Preferences...
2.在左边的面板选择Android,然后在右侧点击Browse...并选中SDK路径,本机为:
3.D:
\AndroidDevelop\android-sdk-windows
4.点击Apply、OK。
配置完成。
1.1.5创建AVD
为使Android应用程序可以在模拟器上运行,必须创建AVD。
1.在Eclipse中。
选择Windows>AndroidSDKandAVDManager
2.点击左侧面板的VirtualDevices,再右侧点击New
3.填入Name,选择Target的API,SDCard大小任意,Skin随便选,Hardware目前保持默认值
4.点击CreateAVD即可完成创建AVD。
注意:
如果你点击左侧面板的VirtualDevices,再右侧点击New,而target下拉列表没有可选项时,这时候你:
5.点击左侧面板的AvailablePackages,在右侧勾选
https:
//dl-
6.然后点击InstallSelected按钮,接下来就是按提示做就行了。
要做这两步,原因是在1.1.3、AndroidSDK安装中没有安装一些必要的可用包(AvailablePackages)。
1.2Phonegap导入配置与运行
1.2.1下载和安装Phonegap
下面的步骤是下载和安装Phonegap
1.访问Phonegap下载页面,下载最新Phonegap资源压缩包。
2.解压下载好的资源压缩包到你的本地目录。
下面你就将创建第一个基于android平台的Phonegap工程。
注意:
下面的创建步骤是基于Phonegap1.5版本的,上面的phonegap下载界面包含了多个phonegap版本,一般我们下载最新的版本,已支持最新的特性。
1.2.2创建新android工程
一下将创建一个新的Android工程:
1.选择New>Androidproject(图1)
图1.创建一个新的android工程
当你常见了一个新的、标准的android时,接下来你就要将其转化成Phonegap工程:
2.在新建android工程的弹出对话框中,在“projectname”中输入工程名称并选择“createnewprojectinworkspace”选项(图2)。
3.点击next。
图2。
创建新的android工程对话框
4.选择构建版本android2.2,点击next(图3)
图3.选择编译版本类型
5.在应用程序信息界面,“pacakgename”中输入你主程序的包名(图4)。
这也就显示你工程目录的结构。
比如:
com.yourcompany.youproject。
6.点击finish。
图4。
输入包名
1.2.2添加phonegap运行所需文件
经过上面的步骤,eclipse已经创建了一个新的android工程,但是它还没被配置运用phonegap运行,下面我们就开始配置。
1.在新创建的android工程目录下新建文件夹目录“assets/www”和“libs”。
Phonegap工程中所有的html文件和javascrip文件都会放置在目录“assets/www”下(图5)。
图5.phonegap文件目录
2.将phonegap工程所需要的文件导入进来,首先到你下载到本机的phonegap资源文件目录下,进入“lib”目录下的“android”目录(图6)。
图6.下载下来的phonegap资源文件的lib/android目录
3.将cordova-1.5.0.js拷贝到我们新工程刚刚新建的文件夹“assets/www”目录下。
4.将cordova-1.5.0.jar拷贝到我们新工程刚刚新建的文件夹“libs”目录下。
5.将xml文件下的文件cordova.xml和plugins.xml文件拷贝到新工程“res”目录下的xml文件加下(图7)
图7.相应目录
6.下面我们要在“assets/www”目录下创建一个html文件名叫“index.html”此文件也将作为phonegap程序的主入口文件。
7.在index.html文件中输入以下代码,作为用户界面开发的开始。
8.将“cordova-1.5.0.jar”库添加到工程编译路径(buildpath)中去(图8)。
图8
1.2.2修改Activity类
现在你将要修改Android工程开始运用phonegap。
1.打开你创建的的android工程文件的主activity文件,该文件名与我们的工程名是一样的。
2.在主activity类中,增加一行导入org.apache.cordova.DroidGap的语句:
3.将主activity类中继承的基类class改成DroidGap:
4.将主activity类中“setContentView()”语句替换成加载本地“assets/www”目录下的index.xml文件的语句:
(图9)
注意:
在phonegap项目中我们可以用一个Url“file:
///android_asset”加上目录文件名来引用“assets”目录下的资源文件。
原理是Url“file:
///android_asset”映射了“assets”目录。
图9。
修改主activity文件
1.2.2配置AndroidManifest.xml文件
配置AndroidManifest文件,来运行phonegap。
下面的步骤就是配置改文件来使phonegap能运行。
1.在Android工程目录中双击打开AndroidManifest.xml文件(图10):
图10
2.在AndroidManifest.xml文件中,添加如下代码:
1.2.3运行phonegap
在Android模拟器中运行phonegap程序(图11):
图11
当你已经配置了AVD,就运行模拟器。
若没有的话你可以配置一个,若你不配置Android将会默认运行一个模拟器。
这样一个android平台上的phonegap程序就运行起来了。
第二章Phonegap插件导入与开发
到现在最新的phonegapapi中只提供了有限的本地功能的调用如:
访camera,accelerometer,filesystem,GPSlocation,andmedia等。
所以当我们的应用中需要调用其它的本地功能,phoneListener,powermanager,softkeyboard等。
这些功能是目前phonegap没有直接提供的。
目前有三种解决的途径:
1.随着phonegap的版本更新可能后续会更新丰富插件。
2.一般这些都有人实现了所以我们只要下载这些插件,导入我们的工程即可。
3,对于一些特殊的需求,我们要自己编写插件,供前段web开发人员调用。
此处我们只讨论第二和第三种方法。
2.1Phonegap插件导入
这里我们以一个播放视频文件的插件为例,我们此时因项目功能需求要添加该插件到工程中,一般插件包含两个部分的文件:
native实现文件(android为.Java文件)和调用native方法的javascript钩子文件。
此时我们有VideoPlayer.java和video.js文件,导入步骤如下
1.将VideoPlayer.java和video.js分别导入下图所示的目录下:
2.修改上图中xml目录下的plugins.xml文件的内容,注册添加的插件,添加如下代码:
3.然后前端web开发人员就可以再需要调用的html文件中导入video.js了。
4.然后前端web开发人员就可以根据video.js提供的接口调用视频播放功了,至此一个插件就添加完毕了。
2.2Phonegap插件开发
这里我们仍然以VideoPlayer为列。
1.编写AndroidVideoPlayer的具体实现代码:
每个插件都要继承com.phonegap.api.Plugin,然后overrideexecute方法,方法原型
PlugResultexecute(Stringarg0,JSONArrayarg1,Stringarg2);
1.arg0–js调用时所传的action。
2.arg1–js调用时所传的args。
3.arg2–这个是用来回调的指定id,由js部分自动生成,并传递给java。
返回的是一个PlugResult的,如果是同步调用,直接在execute函数中返回一个带状态的标示的PlugResult
即可,比如
returnnewPlugResult(PluginResult.Status.INVALID_RESULT);或者
returnnewPlugResult(PluginResult.Status.OK,content);
content既是jssuccesscallback参数而如果是异步调用,则需要返回一个NO_RESULT状态的PlugResult,并设置keepCallabck,然后记录下arg2,如下:
callback=arg2;
PlugResultresult=newPlugResult(PlugResult.Status.NO_RESULT);
result.setKeepCallback(true);
之后,在需要回调时,调用this.success(newPlugResult(PlugResult.Status.OK,content),this.callback);
想了解跟多内容和原理请自行查看phonegap源码或phonegap官网。
2.编写video.js,提供给web开发端的接口定义,定义了一个VideoPlayer类和play函数,参数为要播放的文件视频地址,代码如下:
下面要调用就非常简单了:
window.plugins.videoPlayer.play("http:
//path.to.my/video.mp4");
window.plugins.videoPlayer.play("file:
///path/to/my/video.mp4");
3.当我们写好之后可以参照前面导入插件的方法将自己的插件导入到工程中去。
第三章结束