phonegap3.1环境搭建

发布时间:2014-10-23 23:23:49
来源:分享查询网

由于Phonegap采用了新的插件架构,而网上的教程又寥寥可数,参考了从各个博客收集过来的文章,花了点时间研究了下PhoneGap3.1环境搭建。 一、 1.准备环境nodejs(http://nodejs.org/download/) 2.ant(http://ant.apache.org/bindownload.cgi) 二、环境安装 1. nodejs的安装比较简单,直接在官网上下载msi文件进行安装 2. ant安装: 将官网上下载下来的文件解压后,配置环境变量 新增环境变量 ANT_HOME :E:\ant\apache-ant-1.9.2-bin\(目录为ant主目录) 并在Path变量里面附加内容 :%ANT_HOME%\bin\ 3. 确保你的android sdk的tools目录也在Path环境变量中,如没有,需手动加入; 三 、完成以上步骤后,你可以打开命令提示符,输入:npm install -g phonegap 此时nodejs会去下载phonegap所需的一些资源,下载完成后在cmd中输入:phonegap -h便可以看到该命令的帮助信息了。 四、工程搭建 1)进入你想要存放工程的目录: 2)输入如下命令: phonegap create demo1 com.demo "Demo1" (demo1:存放的子文件夹、com.demo:包名、Demo1 :类名) 由此我们便创建了一个工程,并打开了工程目录(cd demo1) 运行命令 :phonegap local build android(此时便创建了一个安卓工程) 接着输入如下命令:phonegap local plugin add org.apache.cordova.camera(参照官方api) (官方api中使用的是cordova命令,两种命令都能达到我们想要的效果,这里我们使用 phonegap命令) 之后phonegap会在E:\PhoneGap\demo1\platforms\android(这个目录是你自己定制的) 下生成你所需要的工程及插件源码, 打开目录,我们需要的文件是: 1)src目录下生成的java源码:(包括Demo1及我们定制好的照相机插件源码) 2)assets/www目录下的cordova.js、cordova_plugins.js 3)assets/www目录下的子文件夹plugins 4)res/xml目录下的config.xml 5)当然不能漏了jar文件 将这些文件拷贝到我们的工程下 -------------------------------------------------------------------------------------------------------------------------------------------------------- 在你的.html文件中引入cordova.js 不需要在额外引入插件对应的js) 这里提供PhoneGap调用照相机的js代码: ------------------------------------------------------------------------------------------------------------------------- var pictureSource; var destinationType; $(function(){ document.addEventListener("deviceready", onDeviceReady, false);    //phonegap准备就绪 }); function onDeviceReady() {     pictureSource = navigator.camera.PictureSourceType;     //照相机初始化     destinationType = navigator.camera.DestinationType; } /****拍照****/ function capturePhoto() {     navigator.camera.getPicture(cameraSuccess, cameraError, { quality: 50,         //拍照开始         destinationType: destinationType.FILE_URI     }); } function cameraSuccess(imageURI) {     alert(imageURI); } function cameraError(message) {     alert('拍照失败的原因: ' + message); } /****拍照 END****/ --------------------------------------------------------------------------------------------------------------------------------------------------------------------- 转载请注明出处

返回顶部
查看电脑版