PhoneGap 简介

PhoneGap

什么是PhoneGap？

1. PhoneGap是一个能够让Web开发者快速进行移动app开发的开源框架；
2. PhoneGap主要涉及的技术：HTML5, CSS3, Javascript
3. 跨平台， 利用PhoneGap进行移动开发，只需要做非常小的改动，就可以让程序在各种平台上运行：IOS, Android, Windows Phone
4. PhoneGap开发的应用和传统方式（原生app）开发的应用效果基本一致，除了手机游戏。

PhoneGap能够干什么？

Accelerometer

设置设备屏幕的手势感应器

Camera

调用设备摄像头采集照片

Capture

使用设备的媒体应用程序调用媒体文件

Compass

获取设备移动的方向

Connection

迅速检查网络状况以及蜂窝网络的信息

Contacts

设备联系人相关操作

Device

获取设备相关信息

Events

通过javascript获取本地活动

File

通过javascript调用本地文件系统

Geolocation

使应用程序可以访问地理位置信息

Media

录制和播放音频文件

Notification

设备视觉、声音和触觉反馈

Storage

截获设备的本地存储选项

参考API：http://www.phonegapcn.com/docs/zh/cn/index.html

安装PhoneGap

命令：sudo npm install -g cordova

Cordova就是Apache基金会给PhoneGap取的一个新名字。历史缘由就是Adobe将PhoneGap核心代码贡献给了Apache基金会，现在Apache将Cordova作为一个顶级项目来运行。

Cordova 命令

创建应用程序

命令：cordova create hello com.example.hello HelloWorld 

参数： - 第一个参数：指定目录名称 - 第二个参数：包名 - 第三个参数：应用程序的title

添加特定平台支持

进入项目路目录：

命令： 

cordova platform add android 

cordova platform add ios 

移除Android平台支持:

cordova platform rm android 

编译应用程序

命令： cordova build 

添加插件支持

搜索可用的插件：

cordova plugin search bar code 

安装插件：

cordovaplugin add org.apache.cordova.device                   //设备API

cordovaplugin add org.apache.cordova.network-information  //网络（事件）

cordovaplugin add org.apache.cordova.battery-status      //电池（事件）

cordovaplugin add org.apache.cordova.device-motion     //加速器

cordovaplugin add org.apache.cordova.device-orientation     //罗盘

cordovaplugin add org.apache.cordova.geolocation         //定位

cordovaplugin add org.apache.cordova.camera                 //摄像头

cordovaplugin add org.apache.cordova.media-capture     //媒体文件处理

cordovaplugin add org.apache.cordova.media                   //媒体文件处理

cordovaplugin add org.apache.cordova.file                        //文件访问

cordovaplugin add org.apache.cordova.file-transfer          //文件传输

cordovaplugin add org.apache.cordova.dialogs                 //对话框

cordovaplugin add org.apache.cordova.vibration              //震动

cordovaplugin add org.apache.cordova.contacts               //联系人

cordovaplugin add org.apache.cordova.globalization       //全球化

cordovaplugin add org.apache.cordova.splashscreen       //闪屏

cordovaplugin add org.apache.cordova.inappbrowser             //打开新的浏览器窗口

cordovaplugin add org.apache.cordova.console                //调试控制台

查看已经安装的插件

cordova plugin ls 

删除插件

cordova plugin rm org.apache.cordova.console 

Merge 目录

一般情况下最好不要修改各自平台下的www目录下的文件。但是如果你确实需要为某个平台定制一些内容，又该怎么办呢？

项目根目录下有一个merges目录。我们以一个实例来讲解：

1. 修改www\css目录下的index.css文件，设置event.received的样式为红色： background-color:#FF0000;
2. 修改platforms\android\assets\www\css中的index.css文件，设置.event.received的样式为蓝色：background-color:#0000FF;
3. 在merges\android目录下新建一个css目录。复制www\css中的index.css文件到该目录下。
4. 修改该目录下的index.css文件中的.event.received的样式为绿色：background-color:# 00FF00;

仿真器中运行，你会发现最终呈现的结果为绿色。由此我们可知：

1） Merges目录中没有对应文件时，platform下的文件会被跟目录（www）下的文件覆盖。（即：如果Merges目录中不存在index.css文件，最终颜色将为红色）

2） Merges目录中存在对应文件时，platform下的文件会被merges下的文件覆盖。可见Merges目录主要用于为平台定制功能