最新版phonegap 2.6.0 入门教程

Posted by Smeagol | Posted in 前端技术 | Posted on 11-04-2013

Tagged Under :

因为网上找的很多教程都是老的了,所以写了这篇新的中文教程。参考依据还是官网的guide比较靠谱,地址如下http://docs.phonegap.com/en/2.6.0/guide_getting-started_index.md.html#Getting%20Started%20Guides

那下面就是在windwos上开发android应用程序的安装流程,和怎么写个简单的phonegap应用程序。

  1. 首先,我们需要一个android的开发环境,安装这个SDK就可以了。
  2. 然后我们需要eclipse 这个java开发工具,下载eclipse classic 4.2.2 就可以了。
  3. 接着,要学习如何安装eclipse plugin 这个示例里面就是一个如何安装ADT的过程。ADT是可以让eclipse来build android应用程序的插件。
  4. 最后需要下载一份 phonegap

有了以上这些东西以后呢,我们还要准备好一些开发环境:

  1. 环境变量:
    我是在windows上弄的。所以…。先右键点击我的电脑,然后选属性,选“高级”这个选项卡,再点下面的“环境变量” ,然后在出来的窗口中找到“系统变量”里的path,点下面的“编辑”,把刚刚我们装的android sdk的路径加入到其中,比如:;C:\Development\android-sdk-windows\platform-tools;C:\Development\android-sdk-windows\tools
  2. java的环境:
    就是在命令行中输入java -version能出来版本号就可以了。网上任意一个java安装教程都有的,这个就不描述了。一般java的安装包都会自动给你配好。
  3. 安装ant:
    这个比较重要,因为创建phonegap项目的是时候需要用到他。 下载地址
    安装方法是先下载,后解压。然后在找到里面的bin这个目录路径,然后把这个路径添加到上面提到的“系统变量”的path里面。
    在命令行中输入 ant -v 验证下它是不是正确安装,如果有版本号出来说明已经装好了。

接下来我们用phonegap创建一个android项目

  1. 首先,我们要来到刚刚下载好的phonegap的目录里面(把之前下载的解压就好)。因为我们要创建android项目,所以找到phonegap-2.6.0\lib\android\bin 这个目录,然后在命令行下进入这个目录。
  2. 接下来运行下面这个命令:.\create <project_folder_path> <package_name> <project_name>
    第一个参数是项目所在的路径,你可以指定硬盘上的一个目录。(d:\workspace\hello)(创建项目时候的目录不在eclipse的工作目录下)。
    第二个参数是项目包的名称。(com.YourCompany.YourAppName)
    第三个参数是项目的名称 。(比如:hello 不能有空格。)
    运行完以后,我们就可以在那个目录下找到一些生成好的文件了。
  3. 最后,打开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

  1. 首先,我们不覆盖之前的示例代码,先在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>
    
  2. 其次,我们在res/xml/config.xml中添加<plugin name=”Camera” value=”org.apache.cordova.CameraLauncher” /> 。修改content的字段,并指向camera.html这个文件
  3. 然后,在AndroidManifest中添加<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” /> 这个调用摄像头的API的权限就打开了。(默认可能已经有了)。
  4. 重新build一下。看摄像头的调用示例是不是出来了。

如果还要继续深入的话,可以尝试添加二维码扫描的功能。具体的教程可以参考 phongap二维码插件 下载后查看readme就可以安装了,示例里面有很详细的api调用方法。

Comments:

There are (3) Comments for the 最新版phonegap 2.6.0 入门教程

Post your comment