Phonegap学习入门篇

标签：

安装Node.js

安装Git

设置代理
公司内网使用时可能需要设置代理
·设置CMD代理

set http_proxy=http://127.0.0.1:8080

set https_proxy=http://127.0.0.1:8080
·设置npm代理

npm config set registry http://registry.npmjs.org

npm config set proxy="http://127.0.0.1:8080"

npm config set https-proxy="http://127.0.0.1:8080"
·设置git代理

git config --global url."https://".insteadOf git://

git config --global http.proxy http://127.0.0.1:8080

·安装phonegap

npm install -g phonegap

·配置Android开发平台

安装最新JDK
http://www.oracle.com

下载Android SDK
http://developer.android.com/sdk/index.html

下载Apache Ant
http://ant.apache.org/bindownload.cgi

配置环境变量

 ANDROID_HOME

 C:\Program Files\adt-bundle-windows-x86_64-20140321\sdk

 ANT_HOME

 C:\Program Files\apacheant

 JAVA_HOME

 C:\Program Files\Java\jdk1.8.0_05

 添加Path

 %JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

创建Android模拟器
在Android SDK的安装目录中，有SDK Manager.exe程序，在命令行中启动该程序。
在Tools->Manage AVDs中，创建一个新的Android模拟器。

第一个phonegap App

$ phonegap create my-app

$ cd my-app

$ phonegap run android

深入开发
上面的App显示的画面，其实就是我们创建的项目中的www目录下的index.html
开发一个跨平台的应用程序，只是需要我们在www目录下，做好web app就可以了。
这里的选择就更多了，可以使用BootStrap, JqueryMobile……
另外，需要再系统学习一下PhoneGap中的如何调用系统API.

方法1：通过CLI安装

模糊搜索插件

$ phonegap plugin search bar code

com.phonegap.plugins.barcodescanner - Scans Barcodes

安装插件

$ phonegap plugin add org.apache.cordova.device

$ phonegap plugin add org.apache.cordova.network-information

$ phonegap plugin add org.apache.cordova.battery-status

$ phonegap plugin add org.apache.cordova.device-motion

$ phonegap plugin add org.apache.cordova.device-orientation

$ phonegap plugin add org.apache.cordova.geolocation

$ phonegap plugin add org.apache.cordova.camera

$ phonegap plugin add org.apache.cordova.media-capture

$ phonegap plugin add org.apache.cordova.media

$ phonegap plugin add org.apache.cordova.file

$ phonegap plugin add org.apache.cordova.file-transfer

$ phonegap plugin add org.apache.cordova.dialogs

$ phonegap plugin add org.apache.cordova.vibration

$ phonegap plugin add org.apache.cordova.contacts

$ phonegap plugin add org.apache.cordova.globalization

$ phonegap plugin add org.apache.cordova.splashscreen

$ phonegap plugin add org.apache.cordova.inappbrowser

$ phonegap plugin add org.apache.cordova.console

查看已安装插件

$ phonegap plugin ls    # or ‘plugin list‘

[ ‘org.apache.cordova.console‘ ]

删除插件

$ phonegap plugin rm org.apache.cordova.console

$ phonegap plugin remove org.apache.cordova.console    # same

同时安装/删除多个插件

 $ cordova plugin add org.apache.cordova.console org.apache.cordova.device

 $ cordova plugin rm org.apache.cordova.console org.apache.cordova.device

安装指定版本号的插件

 $ phonegap plugin add org.apache.cordova.console@latest

 $ phonegap plugin add org.apache.cordova.console@0.2.1

方法2：通过plugman安装

首先通过npm安装plugman

$ npm install -g plugman

安装插件

$ plugman --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <name|url|path> [--plugins_dir <directory>] [--www <directory>] [--variable <name>=<value> [--variable <name>=<value> ...]]

删除插件

$ plugman --uninstall --platform <ios|amazon-fireos|android|blackberry10|wp7|wp8> --project <directory> --plugin <id> [--www <directory>] [--plugins_dir <directory>]

搜索插件

plugman search <plugin keywords>

更改registry

plugman config set registry <url-to-registry>

plugman config get registry

安装主要插件

cordova-plugin-battery-status plugman --platform --project --plugin org.apache.cordova.battery-status

cordova-plugin-camera plugman --platform --project --plugin org.apache.cordova.camera

cordova-plugin-console plugman --platform --project --plugin org.apache.cordova.console

cordova-plugin-contacts plugman --platform --project --plugin org.apache.cordova.contacts

cordova-plugin-device plugman --platform --project --plugin org.apache.cordova.device

cordova-plugin-device-motion (accelerometer) plugman --platform --project --plugin org.apache.cordova.device-motion

cordova-plugin-device-orientation (compass) plugman --platform --project --plugin org.apache.cordova.device-orientation

cordova-plugin-dialogs plugman --platform --project --plugin org.apache.cordova.dialogs

cordova-plugin-file plugman --platform --project --plugin org.apache.cordova.file

cordova-plugin-file-transfer plugman --platform --project --plugin org.apache.cordova.file-transfer

cordova-plugin-geolocation plugman --platform --project --plugin org.apache.cordova.geolocation

cordova-plugin-globalization plugman --platform --project --plugin org.apache.cordova.globalization

cordova-plugin-inappbrowser plugman --platform --project --plugin org.apache.cordova.inappbrowser

cordova-plugin-media plugman --platform --project --plugin org.apache.cordova.media

cordova-plugin-media-capture plugman --platform --project --plugin org.apache.cordova.media-capture

cordova-plugin-network-information plugman --platform --project --plugin org.apache.cordova.network-information

cordova-plugin-splashscreen plugman --platform --project --plugin org.apache.cordova.splashscreen

cordova-plugin-vibration plugman --platform --project --plugin org.apache.cordova.vibration

例：

plugman --platform android --project HelloWorld --plugin org.apache.cordova.device

如果网络问题导致安装超时，也可以通过本地安装方法安装插件

方法3：通过本地安装

安装命令：phonegap local plugin add /*path of plugin*/

如 >phonegap local plugin add E:\flashair\cordova-plugin-camera

插件可以通过访问git服务器获取:
Camera：https://github.com/apache/cordova-plugin-camera/tree/b76b5ae670bdff4dd4c716e889ab12e049f9c733
FileSystem：https://github.com/apache/cordova-plugin-file
FileTransfer：https://github.com/chanthus/cordova-plugin-file-transfer-gcs/tree/3a89374d9b834196fb0d40a40fecd7d76db3afb9

插件可以通过官方网址查询

全部插件
https://build.phonegap.com/plugins

camera插件
https://build.phonegap.com/plugins/768

FileSystem插件
https://build.phonegap.com/plugins/617

FileTransfer插件
https://build.phonegap.com/plugins/618

phonegap Camera插件的使用教程：
http://blog.csdn.net/aaawqqq/article/details/20125837

安装Camera插件

phonegap plugin add org.apache.cordova.camera 

代码部分，请参照Phonegap API文档，或者上面的使用教程

关联插件安装

$ phonegap plugin add org.apache.cordova.camera 

$ phonegap plugin add org.apache.cordova.file

$ phonegap plugin add org.apache.cordova.file-transfer

关于camera插件的sample：

HTML部分：

<div id="gallery">

   <img id="smallImage">

 </div>

 <button onclick="getPhoto()">拍照</button>

 <button onclick="getFile()">选择文件</button>

JS部分：

/**

 * 调用摄像头拍照

 */

 function getPhoto() { 

     navigator.camera.getPicture(captureSuccess, captureFail, {

         quality: 50,

         destinationType: Camera.DestinationType.FILE_URI,

         saveToPhotoAlbum: true,

         correctOrientation: true

     });

 }

 // 拍照成功后触发此函数

 function captureSuccess(imageURI) {

     showPicture(imageURI);

 }

 // 当有错误发生时触发此函数 

 function captureFail(error) { 

     alert(‘Failed because: ‘ + error.code); 

 }

 /**

 * 打开相册,供用户选择图片。

 */

 function getFile() {

     navigator.camera.getPicture(selectSuccess, selectFail, {

         quality : 50,

         destinationType : Camera.DestinationType.FILE_URI,

         sourceType : Camera.PictureSourceType.PHOTOLIBRARY

     });

 }

 // 选择成功后触发此函数

 function selectSuccess(fileURI) {

     showPicture(fileURI);

 }

 // 错误发生时触发此函数

 function selectFail(error) {

     alert("select file fail Code = " + error.code);

 }

 function showPicture(fileURI) {

     var image = new Image();

     var targetImage = document.getElementById(‘smallImage‘);

     var imageObj = {};

     var widthScale = 1, heightScale = 1, scale;

     var WIDTH = 600;

     var HEIGHT = 400;

     image.src = fileURI;

     image.onload = function() {

         widthScale = image.width / WIDTH;

         heightScale = image.height / HEIGHT;

         if (widthScale <= 1 && heightScale <= 1) {

             imageObj.width = image.width;

             imageObj.height = image.height;

         } else {

             scale = Math.max(widthScale, heightScale);

             imageObj.width = image.width / scale;

             imageObj.height = image.height / scale;

         }

         targetImage.width = imageObj.width;

         targetImage.height = imageObj.height;

         targetImage.src = fileURI;

     }

 }

关于file-transfer插件的sample：

说明：上传的是上一个例子中id为smallImage的<img>标签中的图片。

HTML：

<button onclick="uploadPic()">传送到服务器</button>

JS：

 /**

   * 调用file-transfer插件上传图片

   */ 

 function uploadPic() {

    var options = new FileUploadOptions();

    var imageURI = document.getElementById(‘smallImage‘).src;

    options.fileKey="file";

    var params = new Object();

    params.value1 = "test";

    params.value2 = "param"; 

    options.params = params; 

    var ft = new FileTransfer();

    // 通过resolveLocalFileSystemURI可以得到文件的绝对路径。

    window.resolveLocalFileSystemURI(imageURI, function(imageURI) {

        imageURI = imageURI.toURI();

        options.fileName="app_" + imageURI.substr(imageURI.lastIndexOf(‘/‘)+1);

        ft.upload(imageURI, encodeURI("http://flashair/upload.cgi"), uploadWin, uploadFail, options);

    });

 }           

 //调用成功触发此函数

 function uploadWin(r) {

      alert("upload successful");

      console.log("Code = " + r.responseCode);

      console.log("Response = " + r.response);

      console.log("Sent = " + r.bytesSent);

 }

 //调用失败触发此函数

 function uploadFail(error) {

      alert("An error has occurred: Code = " = error.code);

 }

phonegap file-system插件

https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md

HTML5 file-system-api

http://www.html5rocks.com/en/tutorials/file/filesystem/
http://www.w3.org/TR/2011/WD-file-system-api-20110419/

HTML5 file-writer

http://www.w3.org/TR/2012/WD-file-system-api-20120417/#dfn-filewriter

HTML5 文件操作API（中文翻译）

http://blog.csdn.net/fwwdn/article/details/8349657/

关于路径

测试代码：

 console.log("cordova.file.applicationDirectory :" + cordova.file.applicationDirectory);

 console.log("cordova.file.applicationStorageDirectory :" + cordova.file.applicationStorageDirectory);

 console.log("cordova.file.dataDirectory :" + cordova.file.dataDirectory);

 console.log("cordova.file.cacheDirectory :" + cordova.file.cacheDirectory);

 console.log("cordova.file.externalApplicationStorageDirectory :" + cordova.file.externalApplicationStorageDirectory);

 console.log("cordova.file.externalDataDirectory :" + cordova.file.externalDataDirectory);

 console.log("cordova.file.externalCacheDirectory :" + cordova.file.externalCacheDirectory);

 console.log("cordova.file.externalRootDirectory :" + cordova.file.externalRootDirectory);

在android上的输出：

 cordova.file.applicationDirectory                :file:///android_asset/

 cordova.file.applicationStorageDirectory         :file:///data/data/com.phonegap.myApp/

 cordova.file.dataDirectory                       :file:///data/data/com.phonegap.myApp/files/

 cordova.file.cacheDirectory                      :file:///data/data/com.phonegap.myApp/cache/

cordova.file.externalApplicationStorageDirectory :file:///mnt/sdcard/Android/data/com.phonegap.myApp/ cordova.file.externalDataDirectory               :file:///mnt/sdcard/Android/data/com.phonegap.myApp/files/ cordova.file.externalCacheDirectory              :file:///mnt/sdcard/Android/data/com.phonegap.myApp/cache/

 cordova.file.externalRootDirectory               :file:///mnt/sdcard/

在file-system的API中可以直接使用上面的变量，得到当前机器的可读写路径。

读取文件

 // 错误处理

 function errorHandler(e) {

    var msg = ‘‘;

    switch (e.code) {

    case FileError.QUOTA_EXCEEDED_ERR:

      msg = ‘QUOTA_EXCEEDED_ERR‘;

      break;

    case FileError.NOT_FOUND_ERR:

      msg = ‘NOT_FOUND_ERR‘;

      break;

    case FileError.SECURITY_ERR:

      msg = ‘SECURITY_ERR‘;

      break;

    case FileError.INVALID_MODIFICATION_ERR:

      msg = ‘INVALID_MODIFICATION_ERR‘;

      break;

    case FileError.INVALID_STATE_ERR:

      msg = ‘INVALID_STATE_ERR‘;

      break;

    default:

      msg = ‘Unknown Error‘;

      break;

    }

    console.log(‘Error: ‘ + msg);

 }

 // 操作fileEntry

 function testReader(fileEntry) {

    // Get a File object representing the file, 

    // then use FileReader to read its contents. 

    console.log(‘testReader.‘);

    fileEntry.file(function (file) {

      var reader = new FileReader();

      reader.onloadend = function (e) {

        console.log(‘read result:‘ + this.result);

        var txtArea = Ext.ComponentQuery.query("textareafield")[1];

        txtArea.setValue(this.result);

        // txtArea.value = this.result;

      };

      console.log(‘read file:‘ + file.name);

      reader.readAsText(file);

    }, errorHandler);

 }

 // 操作file-system

 function testFileSystem() {

    function onInitFs(fs) {

      console.log(‘Opened file system: ‘ + fs.name);

      // 使用phonegap提供的全局变量，操作可读写文件。

      var file = cordova.file.externalDataDirectory + ‘log.txt‘;

      // 使用phonegap提供的resolveLocalFileSystemURL函数，得到该目录的directoryEntry。

      resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function (newEntry) {

        console.log("Successfully resolved.");

        console.log(newEntry.toURL());

        // 操作directoryEntry

        newEntry.getFile(‘log.txt‘, {

          create: true,

          exclusive: false

        }, function (fileEntry) {

          console.log(‘name: ‘ + fileEntry.name);

          console.log(‘fullPath: ‘ + fileEntry.fullPath);

          console.log(‘isFile: ‘ + fileEntry.isFile);

          console.log(‘isDirectory: ‘ + fileEntry.isDirectory);

          console.log("Temporary file is at " + fileEntry.toURL());

          testReader(fileEntry);

        }, errorHandler);

      }, console.error("resolveLocalFileSystemURL"));

    }

    window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024 /*5MB*/ , onInitFs, errorHandler);

 }

 testFileSystem();

写入文件

 // 错误处理

 function errorHandler(e) {

    var msg = ‘‘;

    switch (e.code) {

    case FileError.QUOTA_EXCEEDED_ERR:

      msg = ‘QUOTA_EXCEEDED_ERR‘;

      break;

    case FileError.NOT_FOUND_ERR:

      msg = ‘NOT_FOUND_ERR‘;

      break;

    case FileError.SECURITY_ERR:

      msg = ‘SECURITY_ERR‘;

      break;

    case FileError.INVALID_MODIFICATION_ERR:

      msg = ‘INVALID_MODIFICATION_ERR‘;

      break;

    case FileError.INVALID_STATE_ERR:

      msg = ‘INVALID_STATE_ERR‘;

      break;

    default:

      msg = ‘Unknown Error‘;

      break;

    }

    console.log(‘Error: ‘ + msg);

 }

 // 操作fileEntry写入文件

 function testWriter(fileEntry) {

    // Create a FileWriter object for our FileEntry (log.txt). 

    console.log(‘testWriter.‘);

    fileEntry.createWriter(function (fileWriter) {

      fileWriter.onwriteend = function (e) {

        console.log(‘Write completed.‘);

      };

      fileWriter.onerror = function (e) {

        console.log(‘Write failed: ‘ + e.toString());

      };

      fileWriter.onwrite = function (evt) {

        console.log("writting");

      };

      var txtArea = Ext.ComponentQuery.query("textareafield")[0];

      var text = txtArea.getValue();

      console.log(‘Write string: ‘ + text);

      fileWriter.write(text);

    }, errorHandler);

 }

 // 操作file-system

 function testFileSystem() {

    function onInitFs(fs) {

      console.log(‘Opened file system: ‘ + fs.name);

      console.log("Temporary root is(toURL) at " + fs.root.toURL());

      console.log("Temporary root(toInternalURL) is at " + fs.root.toInternalURL());

      //** 下面的方法等同于：resolveLocalFileSystemURL(cordova.file.externalDataDirectory)

      // fs.root.getDirectory(cordova.file.externalDataDirectory, {

      //   create: true,

      //   exclusive: false

      // }, function (directoryEntry) {

      //   console.log(‘getDirectory success!‘);

      // }, errorHandler);

      var file = cordova.file.externalDataDirectory + ‘log.txt‘;

      console.log(‘will create file: ‘ + file);

      // 使用phonegap提供的resolveLocalFileSystemURL函数，得到该目录的directoryEntry。

      resolveLocalFileSystemURL(cordova.file.externalDataDirectory, function (newEntry) {

        console.log("Successfully resolved.");

        console.log(newEntry.toURL());

        newEntry.getFile(‘log.txt‘, {

          create: true,

          exclusive: false

        }, function (fileEntry) {

          console.log(‘name: ‘ + fileEntry.name);

          console.log(‘fullPath: ‘ + fileEntry.fullPath);

          console.log(‘isFile: ‘ + fileEntry.isFile);

          console.log(‘isDirectory: ‘ + fileEntry.isDirectory);

          console.log("Temporary file is at " + fileEntry.toURL());

          testWriter(fileEntry);

        }, errorHandler);

      }, console.error("resolveLocalFileSystemURL"));

    }

    window.requestFileSystem(window.PERSISTENT, 5 * 1024 * 1024 /*5MB*/ , onInitFs, errorHandler);

 }

 testFileSystem();

phonegap命令

E:\Work\workspace\phonegap>phonegap help                                                                                 

Usage: node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js [options] [commands]            

Description:                                                                                                             

 PhoneGap command-line tool.                                                                                            

Commands:                                                                                                                

 create <path>        create a phonegap project                                                                        

 serve                serve a phonegap project                                                                         

 build <platform>     build the project for a specific platform                                                        

 install <platform>   install the project on for a specific platform                                                   

 run <platform>       build and install the project for a specific platform                                            

 local [command]      development on local system                                                                      

 remote [command]     development in cloud with phonegap/build                                                         

 platform [command]   update a platform version                                                                        

 plugin [command]     add, remove, and list plugins                                                                    

 help [command]       output usage information                                                                         

 version              output version number                                                                             

Options:                                                                                                                 

 -d, --verbose        allow verbose output                                                                              

 -v, --version        output version number                                                                            

 -h, --help           output usage information                                                                          

Platforms:                                                                                                              

 keyword            | local environment   | remote environment                                                          

 -------------------|---------------------|-------------------                                                         

 android            | Yes                 | Yes                                                                         

 ios                | Yes                 | Yes                                                                        

 wp8                | Yes                 | Yes                                                                        

 Blackberry 10      | Yes                 | No                                                                          

Examples:                                                                                                                

 $ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js help create                        

 $ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js help remote build                  

 $ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js create path/to/my-app              

 $ node C:\Users\gufsh.DL\AppData\Roaming\npm\node_modules\phonegap\bin\phonegap.js remote build android               

使用例

$ phonegap create my-app

$ cd my-app

$ phonegap run android

phonegap create

Description:

 Creates a new application at the provided path.

 The application name and package ID can also be customized.

 These values are set in the app manifest (www/config.xml) and are used when

 creating a native project (platforms/<platform>/).

Options:

 --name, -n <name>    application name (default: "Hello World")

 --id, -i <package>   package name (default: "com.phonegap.hello-world")

Examples:

 phonegap create path/to/my-app

 phonegap create path/to/my-app "com.example.app" "My App"

 phonegap create path/to/my-app --id "com.example.app" --name "My App"

phonegap安装插件

phonegap plugin add org.apache.cordova.camera org.apache.cordova.file org.apache.cordova.file-transfer

描述

http://docs.sencha.com/cmd/5.x/cordova_phonegap.html

http://www.sencha.com/blog/getting-started-with-sencha-touch-2-build-a-weather-utility-app-part-3/

http://phonegap.com/blog/2013/11/20/SenchaPhoneGap/

http://sensai-touch.com/building-an-ios-and-android-app-with-sencha-touch-2-3-and-cordova/

创建app

$ sencha -sdk /path/to/touch generate app MyApp .

/path/to/touch sencha touch的解压路径.
MyApp 应用的名字
. 应用的路径

或者，

$ cd /path/to/touch

$ sencha -sdk /path/to/touch generate app MyApp E:/path/appName

追加phonegap的支持

添加config.xml到根目录

参照：
https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

创建phonegap支持

//sencha phonegap init [APP_ID] [APP_NAME]

$ sencha phonegap init com.mycompany.MyApp MyApp

建立：phonegap.local.properties

在根目录下追加文件：phonegap.local.properties

# The following are supported platforms for local building (blackberry is version 10)

# android, blackberry, ios, wp7, wp8

#

# The following are supported platforms for remote building (blackberry is version 6)

# android, blackberry, ios, symbian, webos, wp7

# This property can be a single platform or a space delimited list

phonegap.platform=android

# This determines if build is remote (phonegap build) or local

phonegap.build.remote=false

# Username for PhoneGap Build

phonegap.build.remote.username={username}

# Password for PhoneGap Build

phonegap.build.remote.password={password}

运行

sencha app build -run native

编辑APP

修改根目录的
index.html
APP/*
resources/*

PhoneGap Developer app 是一个为 Web 开发者和设计者提供的测试工具，使用 PhoneGap 框架。安装后可连接到你的 PhoneGap 桌面到一个即时视图并在设备上进行测试。

相当于是在移动设备上调试 PhoneGap 应用的工具，不需要每次打包、安装就可以直接在手机上调试 PhoneGap 应用。

为使用这款应用，开发人员需要让他（或她）的开发机上有 PhoneGap CLI，并从 iOS应用商店或Google Play安装这款PhoneGap Developer App。通过在一个特定的移动应用上发出PhoneGap CLI serve指令，能把开发机变成一台服务器，它通过WiFi与一台移动设备上的PhoneGap配对。这台服务器监控代码的变动，并把它们自动地发送到那台设备上，而不用执行本地编译或代码签名。一位Adobe PhoneGap开发人员Raymond Camden说，这样甚至就可以在Windows机器上测试iOS应用了。

PhoneGap Developer App包括PhoneGap核心插件，所以任何人都不必再单独地安装它们。而且，所以任何人都可以扩展它，增加第三方插件。

当前，代码修改时会被发送到这台设备上，应用页面会被重新载入。而且，Safari或 Chrome的远程调试无法用于Developer App，但可以使用 Weinre，Camden。

还有另一种方法能做到类似的事，那就是使用LiveReload加GapReload，它们都是开源的。LiveReload能用于网络应用，能够很神奇地在iOS设备和Windows间传送代码，在下一个版本中还将支持Android，这款工具之父Andrey Tarantsov说。GapReload是一款LiveReload插件，它增加了对PhoneGap或Cordova应用的特殊支持。LiveReload的优点是某些修改不需要重新载入页面。Sebastien Paul说，“如果你修改一个CSS文件，LiveReload不会做整个页面的刷新，它将快速注入新的规则，这真的很快捷。”

使用方法：

官方主页介绍

http://app.phonegap.com/

使用方法

安装桌面版的phonegap

下载并安装APP

com.adobe.phonegap.app.apk(官方版)
PhoneGap-debug.apk(编译版)

通过无线配对app

要运行该APP，必须打开无线，否则可能无法启动（android）

开发机跟手机要在同一无线环境下

在开发机的app根目录运行以下命令。

phonegap serve

在手机端的app上输入开发机的ip地址。

调试代码

只需修改本地的js，html，css代码即可，手机端的app会自动同步最新代码。

Remote Web Inspector

1.Chrome Remote Debugging

2.GapDebug

3.Weinre

Log Messages

console.log(‘...‘)

alert(‘...‘)

Log Messages

在命令行下过滤adb logcat的输出

adb logcat | grep Console #只输出console的log。

adb logcat | grep MyApp #只输出MyApp的log。

adb logcat | grep -i myapp #忽略大小写。

adb logcat | grep --color=auto -i myapp #设置匹配字符串颜色。更多设置请查看 grep 帮助。

因为windows没有grep命令，
所以请先安装grep命令。

下载：http://sourceforge.net/projects/unxutils/

解压到某盘

将以下追加到path
盘符:\UnxUtils\usr\local\wbin

参考：
http://blog.csdn.net/listening_music/article/details/7518990

Phonegap学习入门篇

标签：

原文地址：http://www.cnblogs.com/ld1024/p/4374917.html