最新版phonegap 2.6.0 入门教程
Posted by Smeagol | Posted in 前端技术 | Posted on 11-04-2013
Tagged Under : javascript
因为网上找的很多教程都是老的了，所以写了这篇新的中文教程。参考依据还是官网的guide比较靠谱，地址如下http://docs.phonegap.com/en/2.6.0/guide_getting-started_index.md.html#Getting%20Started%20Guides
那下面就是在windwos上开发android应用程序的安装流程，和怎么写个简单的phonegap应用程序。
- 首先，我们需要一个android的开发环境，安装这个SDK就可以了。
- 然后我们需要eclipse 这个java开发工具，下载eclipse classic 4.2.2 就可以了。
- 接着，要学习如何安装eclipse plugin 这个示例里面就是一个如何安装ADT的过程。ADT是可以让eclipse来build android应用程序的插件。
- 最后需要下载一份 phonegap 。
有了以上这些东西以后呢，我们还要准备好一些开发环境：
- 环境变量：
我是在windows上弄的。所以…。先右键点击我的电脑，然后选属性，选“高级”这个选项卡，再点下面的“环境变量” ，然后在出来的窗口中找到“系统变量”里的path，点下面的“编辑”，把刚刚我们装的android sdk的路径加入到其中，比如：;C:\Development\android-sdk-windows\platform-tools;C:\Development\android-sdk-windows\tools - java的环境：
就是在命令行中输入java -version能出来版本号就可以了。网上任意一个java安装教程都有的，这个就不描述了。一般java的安装包都会自动给你配好。 - 安装ant：
这个比较重要，因为创建phonegap项目的是时候需要用到他。 下载地址
安装方法是先下载，后解压。然后在找到里面的bin这个目录路径，然后把这个路径添加到上面提到的“系统变量”的path里面。
在命令行中输入 ant -v 验证下它是不是正确安装，如果有版本号出来说明已经装好了。
接下来我们用phonegap创建一个android项目
- 首先，我们要来到刚刚下载好的phonegap的目录里面（把之前下载的解压就好）。因为我们要创建android项目，所以找到phonegap-2.6.0\lib\android\bin 这个目录，然后在命令行下进入这个目录。
- 接下来运行下面这个命令：.\create <project_folder_path> <package_name> <project_name>
第一个参数是项目所在的路径，你可以指定硬盘上的一个目录。（d:\workspace\hello）(创建项目时候的目录不在eclipse的工作目录下)。
第二个参数是项目包的名称。(com.YourCompany.YourAppName)
第三个参数是项目的名称 。(比如：hello 不能有空格。)
运行完以后，我们就可以在那个目录下找到一些生成好的文件了。 - 最后，打开eclipse，在菜单栏上选file->new->other… 在出来的窗口中选android，选中里面的android project from existing code ，接下来点next，把刚刚用命令创建的项目加入进来，点finish就好了。
因为默认已经有一些代码在创建好的项目里面，所以我们可以直接编译发布了。由于android虚拟机在win上太慢了，建议用真机，我这里是android 4.0.3。然后打开usb开发调试功能，插到电脑上，在命令行运行adb devices。 这个命令是装好前的android sdk就有的。可以查看设备是否正常连接。接下来只要点击eclipse上面的dubug或者run就可以把项目发布安装到手机上了。安装好以后只有一个phonegap的界面。
那接下来，我们写一些自己的代码上去，调用phonegap的一些功能。先试试调用摄像头吧。参考camera API
- 首先，我们不覆盖之前的示例代码，先在assets/www/下新建一个camera.html文件：
<!DOCTYPE html> <html> <head> <title>Capture Photo</title> <script type="text/javascript" charset="utf-8" src="cordova-2.6.0.js"></script> <script type="text/javascript" charset="utf-8"> var pictureSource; // picture source var destinationType; // sets the format of returned value // Wait for Cordova to connect with the device // document.addEventListener("deviceready",onDeviceReady,false); // Cordova is ready to be used! // function onDeviceReady() { pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; } // Called when a photo is successfully retrieved // function onPhotoDataSuccess(imageData) { // Uncomment to view the base64 encoded image data // console.log(imageData); // Get image handle // var smallImage = document.getElementById('smallImage'); // Unhide image elements // smallImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // smallImage.src = "data:image/jpeg;base64," + imageData; } // Called when a photo is successfully retrieved // function onPhotoURISuccess(imageURI) { // Uncomment to view the image file URI // console.log(imageURI); // Get image handle // var largeImage = document.getElementById('largeImage'); // Unhide image elements // largeImage.style.display = 'block'; // Show the captured photo // The inline CSS rules are used to resize the image // largeImage.src = imageURI; } // A button will call this function // function capturePhoto() { // Take picture using device camera and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50, destinationType: destinationType.DATA_URL }); } // A button will call this function // function capturePhotoEdit() { // Take picture using device camera, allow edit, and retrieve image as base64-encoded string navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true, destinationType: destinationType.DATA_URL }); } // A button will call this function // function getPhoto(source) { // Retrieve image file location from specified source navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, destinationType: destinationType.FILE_URI, sourceType: source }); } // Called if something bad happens. // function onFail(message) { alert('Failed because: ' + message); } </script> </head> <body> <button onclick="capturePhoto();">Capture Photo</button> <br> <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br> <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br> <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br> <img style="display:none;width:60px;height:60px;" id="smallImage" src="" /> <img style="display:none;" id="largeImage" src="" /> </body> </html> - 其次，我们在res/xml/config.xml中添加<plugin name=”Camera” value=”org.apache.cordova.CameraLauncher” /> 。修改content的字段，并指向camera.html这个文件
- 然后，在AndroidManifest中添加<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” /> 这个调用摄像头的API的权限就打开了。（默认可能已经有了）。
- 重新build一下。看摄像头的调用示例是不是出来了。
如果还要继续深入的话，可以尝试添加二维码扫描的功能。具体的教程可以参考 phongap二维码插件 下载后查看readme就可以安装了，示例里面有很详细的api调用方法。
