29、phonegap入门

0. PhoneGap介绍

0.1  什么是PhoneGap？

PhoneGap是一个基于HTML、CSS、JS创建跨平台移动应程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利用iPhone、Android等职能手机的核心本地功能，比如GPS、传感器、震动。

0. PhoneGap介绍

0.1  什么是PhoneGap？

PhoneGap是一个基于HTML、CSS、JS创建跨平台移动应程序的快速开发平台。与传统Web应用不同的是，它使开发者能够利用iPhone、Android等职能手机的核心本地功能，比如GPS、传感器、震动。

0.2  PhoneGap 历史

0.2.1 产生：08年、hackathon

在苹果08年举行的iOSDevCamp（黑客马拉松）中，一名iOS程序员无法忍受OC的语法，觉着简单的HTML和JavaScript如果能部署在移动端并能实现同iphone实现简单的交互（比如调用摄像头、重力感应）该多好，于是phonegap便产生了！

0.2.2 流行：流行、获奖、支持7个平台

09年，PhoneGap 0.6版本发布，这是第一个稳定版，不仅支持iOS，还支持Android、BlackBerry平台，这使得PhoneGap在移动开发领域越来越重要。

到10年7月，又实现了对WindowsMoible、Palm、Symbian的支持，支持平台达到6个。

11年7月，发布1.0版本，其中加入了很多访问本地设备的API；

11年11月，发布1.2版本，正事支持Windows Phone7，支持平台数字达到7个！

0.2.3 收购

11年10月，Adobe宣布收购PhoneGap；

收购之后PhoneGap团队将核心代码贡献给Adobe，但保留PhoneGap商标所有权，其实是做为Adobe的商业项目存在的（收购是为了挣钱！）；

Adobe将PhoneGap贡献的代码作为一个新的项目，名为Cordova

0.2.4 现在版本

截止到16年7月份，PhoneGap已经更新到了6.2.0版本，已经支持windows mobile10

0.3  Phonegap与Cordova的区别、联系

0.3.1 区别

Cordova是PhoneGap贡献给Apache的项目，是一个开源的、核心的跨平台模块。

PhoneGap是Adobe的商业产品；

0.3.2 关系

Cordova与PhoneGap的关系就像是WebKit与Chrome的关系。

0.4  为什么出现PhoneGap这种技术？

有了PhoneGap，Web开发人员便可以利用他们非常熟悉的JavaScript、HTML和CSS技术，或者结合移动Web UI框架jQuery Mobile、Sencha Touch来开发跨平台移动客户端，还能非常方便地发布程序到不同移动平台上。

0.5  核心特点

0.5.1 兼容性

完全做到了written once，run everywhere；代码编写完之后，通过phonegap的build工具构建

0.5.2 标准化

采用w3c标准，包括但不限于HTML5、CSS3、JavaScript，比如说W3C标准中的命名方式等

0.5.3 大众化

不需要手机编程基础，只要会HTML就能做应用，且能通过js调用设备底层硬件（比如摄像头、传感器。。。）

0.6  如何学习？

网站推荐：

http://phonegap.com/  https://cordova.apache.org/

http://www.phonegap100.com/

htt://cordova.apache.org

http://phonegap-plugins.com/

1、搭建环境

1.1 模式1：通过命令行安装、编译运行

1.1.1 安装

官网建议安装方式：npm install -g cordova

问题：速度很慢，基本下载不下来，怎么办？

http://npm.taobao.org/ 这是淘宝做的npm镜像，和npm官网资源保持一致（每隔10分钟更新一次）

解决方案: npm install -g cordova  --registry http://registry.npm.taobao.org info

如何检验是否安装成功？

windows+R->Cmd->cordova

cmd命令:

①删除非空文件夹 rmdir 某个目录 /s

②进入某个文件夹

cd 文件夹

③显示文件夹下的内容

dir 文件夹名称

④清除屏幕内容

cls

1.1.2 cordova 常用命令

Ÿ   cordova项目平台部署操作

增加或者删除ios平台

cordova platform add ios

cordova platform remove ios

增加或删除android平台

cordova platform add android

cordova platform remove android

查看当前项目所支持的平台

cordova platfrom ls

Ÿ   检查cordova项目build时是否具备条件（比如android，必须配置好了sdk）

cordova requirements

Ÿ   将cordova项目通过命令行的方式生产指定平台下的应用

cordova run android（检查是否有真机，没有真机的话，去模拟器执行，没有模拟器就报错）

cordova emulate android(在模拟器中执行)

Ÿ   检查cordova项目可运行的设备列表

cordova run --list

1.1.3 生成Android应用

必备条件：

①安装JDK（必须是JDK7或者更高的版本），并且配置环境变量JAVA_HOME（为JDK安装的路径）

②安装AndroidSDK，并且配置环境变量ANDROID_HOME（Android SDK安装的路径）

1.1.4 构建iOS应用

①必须在OS X操作系统的Mac上才能编译

②安装ios的SDK

③。。。

1.2 方式2 ：借助图形化工具

cordova的商业项目phonegap，为了方便开发者使用，在命令行操作的基础上，推出了图形化工具，该工具分两部分：

1.2.1桌面端

可以安装在windows、Mac操作系统中

下载地址：https://github.com/phonegap/phonegap-app-desktop/releases

移动端：可以安装在iOS、Android、WindowsPhone手机或者平板中

桌面版可以创建或者删除一个cordova项目，并且对项目做简单配置，然后提供一个服务；

1.2.2移动端

主要是用来直接在指定的设备上预览app效果，而跳过编译代码、购买设备、注册账号（苹果开发者需要支付最低688元/年的费用）等繁琐的步骤，那么移动端是如何知道你在电脑中的代码并展示呢？这是在移动端应用打开时，需要指定服务器的地址和端口号，只要连上服务器就会自动从服务器读取内容并展示！

2、第一个cordova程序

2.1 选择开发模式

我们如何来创建自己的第一个Cordova程序呢？

命令行模式虽然在企业中使用较多，但对于我们新手过于极客，我们从图形化工具作为切入点开始学习，图形化开发的模式分两块，桌面端和移动端，在我给大家提供的资料中提供了一个windows安装版本（PhoneGapSetup-win32.exe），接下来，我们找到该文件并双击安装。

接下来安装移动端应用，在实际开发的时候，有两种选择：

一是通过模拟器，启动Android模拟器，通过adb将apk安装到模拟器中。

二是通过真机进行测试，将手机通过带有存储标识的数据线插入电脑，将apk直接拷贝到手机内存中，然后在手机中查找apk文件并点击安装，安装之后，如果想能够连接服务器端，需要保证在同一局域网内

那么我们应该选择哪种呢？显然，方式2的话，每个人需要一个手机且和自己的电脑在同一网络在公司中更合适，但是目前，方式1，也就是模拟器的方式更适合我们，所以接下来大家打开我们的eclipse，并启动模拟器。

2.2 开始

2.2.1 启动桌面版

默认界面是这样的：

Ÿ   步骤1：创建用来存储项目的文件夹

首先在c盘根目录创建一个文件夹：phonegapDemo, 进入phonegaoDemo目录中

Ÿ   步骤2：创建cordova项目

点击+号，在弹窗中可以创建或者打开一个cordova项目，我们在这里点击create来创建一个新的cordova项目！

Ÿ   步骤3：判断是否创建成功

检查服务器是否跑起来

2.2.2 启动移动端

启动eclipse，启动虚拟设备管理器

接下来，需要将apk安装到虚拟机中，

有两个问题：从哪里下载apk？如何将apk安装到虚拟机中？

Ÿ   如何下载

下载方式1：

通过官方提供的方式，直接去应用市场去下载：

iOS版本需要去AppleStore中下载

Android版本需要翻墙去GooglePlay去下载

WindowsPhone版本需要去Windows Phone Stroe下载

下载方式2：

https://github.com/phonegap/phonegap-app-developer/tree/master/resources/release

比如说我要下载Android版本，怎么下载？

点击上图中的android文件夹，然后找到最新的版本：

点击下载即可。

Ÿ   如何安装

通过adb来安装，那么什么是ADB？

ADB全称为Android Debug Bridge，是一个命令行工具，可以和模拟器或者Android真机进行通讯，可以通过adb命令来讲apk应用安装到模拟器或者真机上。

adb常用命令：

adb version 查看adb的版本

adb install **.apk 安装某个应用

adb devices 获取连接到本电脑的设备列表

adb-s  "emulator-5554"  install **.apk 为指定的某个设备安装某个应用

adb shell ** 后边可以接一些命令，比如查看目录，或者查看某个文件内容

adb shell ls       //查看当前目录有哪些内容

adb shell cat init.rc | more //查看某个文件，并将文件内容多次查看

adb shell pwd //打印当前的路径
adb start-server

adb kill-server

那么我们要安装肯定要用adb install就行了，如图操作：

安装成功之后，在模拟器找到PhoneGap点击启动，启动之后修改ip地址和端口号，连接成功之后会显示一个机器人图标！

2.3 显示helloWorld

打开webStorm，将之前创建的demo01文件夹导入到项目中,如下图所示：

2.3.1 修改文件

同时修改www目录下的index.html文件，将h1内容PhoneGap修改为HelloWorld，即完成第一个cordova的helloworld项目！

2.3.2 目录介绍

Ÿ   index.html

工程根目录下的www目录的index.html文件，我们一起来分析一下：

<script type="text/javascript" src="cordova.js"></script>

cordova.js文件时phonegap的库文件，可以用来在JS中调用原生设备硬件（摄像头、联系人、GPS等），从而实现webapp无法实现的一些功能，更好的模拟原生应用。

但是我们会发现，在我们工程中是无法找到该文件的，是因为该文件已经集成apk文件，也就是Developer app或命令行的配置的工程中了

<meta name="format-detection" content="telephone=no" />

这个meta标签时在iOS系统中用来识别电话号码并自动产生连接可以直接拨号，但是很多时候像地址、ISBN或者其他数据，容易搞错，所以在这里设置为no

<meta name="msapplication-tap-highlight" content="no" />

这个是用在windowsPhone8或者以上版本用来禁止某种高亮效果等

Ÿ   app.initialize()

<script type="text/javascript">

app.initialize();

</script>

哪来的app对象？带着大家看index.js文件，在该文件中注意点如下：

事件：deviceReady，意味着Cordova设备api已经加载完毕可以调用了

index.js文件都做了那些事？

当接收到deviceReady事件之后，以冒泡的方式（第三个参数为false），执行onDeviceReady方法，在回调函数中又指定了receivedEvent方法，在这里，查找元素设置样式，就这么多！

Ÿ   config.xml

该文件是一个全局配置文件，控制着cordova应用各个方面，根元素为一个widget，属性可以设置版本号、id编号等信息。

name为app正式名字，会在设备主屏幕上和应用市场里显示的

description为在应用市场中显示的app描述信息

author为作者信息

content会指定app启动时会执行的文件，默认值为项目目录下的www文件夹中的index.html文件

plugin会指定在项目中需要准备什么插件，会默认添加到工程中

preference可以指定一些键值对，比如config.xml中的：

3、cordova基础知识

在刚才的案例中，有一个注意点是deviceReady事件，这个事件是cordova本身的事件，那么cordova除此之外都有哪些事件？cordova又是如何和硬件进行沟通从而实现读写操作的？接下来，首先我们就从如何操作硬件来学习

3.1 如何读取硬件信息

步骤1：首先，打开网页phonegap-plugins.com

步骤2：我们以device这个插件为例，在上述网页中找到device这个插件 -->

https://github.com/apache/cordova-plugin-device

步骤3：找到www目录下的device.js文件

可以看到这是个function，function有一些属性，比如platform、model，那么这些值是什么时候完成赋值的呢？在cordova进行初始化的时候，也就是在ondeviceready事件触发之前，在device.js中，会执行exec的方法，

步骤4：资料中的cordova.js

如果是在android平台运行的话，会自动触发android平台下的cordova.js文件中的androidExec方法，在这里会通过nativeApiProvider这个对象调用get方法，然后执行exec方法，得到返回的json对象，那么这个json对象哪来的？

步骤4：找到android目录下的device.java文件

在该文件中，会通过execute方法，获取到一个json对象，这个对象包含了本设备的一些基本信息，比如操作系统名称、型号信息

3.2 都有哪些事件

名称	说明
deviceready	当设备加载完毕后会触发该事件
pause	当程序被暂停到后台运行时
resume	当程序从后台激活到前台
online	网络断开切换到网络连接
offline	网络连接切换到网络断开
batterycritical	电量低于10%时会触发
batterylow	电量低于某个指定值触发
batterystatus	剩余电量发生变化会触发
backbutton	按下返回按钮
menubutton	按下菜单按钮
startcallbutton	通话按钮
endcallbutton	挂断通话按钮
volumedownbutton	按下音量减按钮
volumeupbutton	按下音量加按钮
searchbutton	按下搜索按钮

3.3 监听音量的增减操作

练习1：修改index.js文件，对音量的增减进行监听。

步骤1：在index.html文件中，在刚才修改为helloworld的h1标签下边，加一个p标签，id设置为p_id

步骤2：在index.js文件中，找到bindEvents方法，在方法中添加音量加减的监听

bindEvents: function() {

document.addEventListener('deviceready', this.onDeviceReady, false);

var p = document.getElementById('p_id');

document.addEventListener('volumedownbutton', function () {

p.innerHTML="volume down";

});

document.addEventListener('volumeupbutton', function () {

p.innerHTML="volume up";

})

},

 

 

步骤3：在保证phonegap desktop（桌面版）和移动端phonegap developer（移动端）已经连接的情况下，去查看结果

4、和硬件沟通

除了能够将HTML页面打包成可以直接安装运行的app外，phoneGap的最大优势在于通过js调用设备来访问设备上的硬件信息，从而实现一些原本只有依靠原生SDK才能达到的目的，接下来，我们利用cordova给我们提供的api来获取设备信息

4.1 获取设备信息

要想获取设备信息，必须在deviceready之后，否则是获取不到数据的。

练习2：获取设备信息（操作系统、版本）

步骤1： 在index.html文件中，添加一个p标签，设置id为device-info

步骤2：在index.js文件中，找到deviceready之后的回调函数，调用device，将设备信息展示在标签中

var deviceInfo = document.getElementById('device_info');

deviceInfo.innerHTML="设备名称："+device.name

+"<br/>操作系统为:"+device.platform

+"<br/> 操作系统版本为:"+device.version;

 

 

步骤3：检查结果

通过上述案例，我们可以看到device这个api可以获取设备信息，那么cordova都有哪些核心api？

cordova给我们提供了十几个核心api如下所示：

核心api	描述
accelerometer	加速度传感器
camera	摄像头
capture	采集
compass	罗盘
contacts	联系人
device	设备
events	事件
file	文件
geolocation	地理位置
media	媒体
notification	通知（提醒）
storage	存储

4.2 消息提示

phonegap的notification类中封装了一系列设备视觉、听觉、触觉的通知，可以为应用定制专门的消息推送、警告或者提示。

notification.alert() 弹出一个警告或者对话框

notification.confirm() 显示一个可定制的确认对话框

notification.prompt() 弹出一个对话框

notification.beep() 控制蜂鸣器发出蜂鸣声

notification.vibrate() 产生震动

练习3：调用phonegap的notification api让手机发出声音、震动

步骤1：修改index.html,添加两个h1标签

<h1 onclick="playBeep()">蜂鸣器发声</h1>

<h1 onclick="vibrate()">使设备震动</h1>

步骤2：添加点击时的回调函数

<script type="text/javascript">

app.initialize();

function playBeep() {

navigator.notification.beep(3);

};

function vibrate() {

navigator.notification.vibrate(300);

}

</script>

 

步骤3：给学生解释下，模拟器是无法观察到震动和发生操作的，怎么办？

演示下，如何通过云打包的方式来生成apk。

登录build.phonegap.com,需要登录（用户名kunyashaw@gmail.com）,然后打包上传，等待打包完成即可。（注意按照这种方式，目前还有问题，会提示cordova class not founf） 。

练习4：各种对话框

演示一个alert的用法，其余的自己去尝试

步骤1：修改index.html

步骤2：在js中添加个function

function showAlert(){
navigator.notification.alert(
"content",//内容
function () {//按钮点击的回调函数
playBeep();
alert("hello world");
}
);
}

 

 

4.3 加速度传感器

加速度传感器是一种用来检测物体相对运动方向以及沿着xyz三个方向运动的部件，phonegap提供了accelerometer类用来接收来自加速度传感器的数据，从而检测到设备在控件上的位置变化，比如说现在很流行的手环，或者说实现类似微信摇一摇功能的，传感器加上一些算法，那么我们如何使用phonegap是来得到传感器数据呢？

首先我们先开看第一个，如果获取加速度信息：

function getDeviceAcceletate(){

navigator.accelerometer.getCurrentAcceleration(function (acceleration) {

alert("x is "+acceleration.x+"\n y is "+acceleration.y+"\n z is "+acceleration.z);

}, function () {

alert('获取加速度信息失败')

})

}
 

那么通过上述方式，如果要检测运动数据的话，是不是得一直调用该方法啊，其实phonegap还给我们提供了一个方法：watchAcceleration()，我们一起来看下用法

function startWatch(){
var info = document.getElementById("accel_info");
id = navigator.accelerometer.watchAcceleration(
function (accel) {
info.innerHTML= "x is "+accel.x+"\nyis "+accel.y+"\nz is "+accel.z+"\n";
},
function () {
alert('error');
},
{frequency:300});
}

function stopWatch() {
if (id)
{
navigator.accelerometer.clearWatch(id);
}
id=null;
}

 

 

4.4 音视频的录制

可以实现音视频的播放、录制

接下来，我们来看下phonegap是如何实现音频的录制的.

navigator.device.capture.captureAudio(captureSuccess, captureError, options);

// 限制采集上限为3个媒体文件，每个文件不超过10秒

var options = { limit: 3, duration: 10 };

 

function record(){
// 采集操作成功完成后的回调函数
var captureSuccess = function(mediaFiles) {
var i, path, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
path = mediaFiles[i].fullPath;
// 对文件进行感兴趣的操作
alert(path);
}
};

// 采集操作出错后的回调函数
var captureError = function(error) {
navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
};

// 开始采集音频
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit:2});
}

在phonegap中，如果想进行拍照、录制视频的话，只需要将captureAudio，修改为captrueImage、captureVideo就行了。

4.5 文件操作

phoneGap通常是将一类操作完全封装在同一个对象中，比如设备信息都在device类中，但是phoneGap对文件的操作方法却封装在了许多不同的对象中，所以这是phoneGap最为复杂的一类对象。接下来，我们一起来学习下phoneGap的文件操作的基础知识。

如何操作一个文件？phoneGap提供了两个类分别是fileReader类和fileWriter类，在这两个类中，调用不同的方法去操作文件，插件名称是file，该插件是基于h5的file api,所以如果大家接触过h5的文件api的话，其实phonegap这里基本是一致的。

插件地址：https://github.com/apache/cordova-plugin-file/

4.5.1 fileReader

首先先来看第一个类fileReader，是一个允许用户读取文件的对象,文件以文本或者Base64编码的字符串样式读出来，用户注册自己的事件监听器来接受loadstart、loadend等事件

属性：

         readyState:当前读取器所处的状态，取值为以下三者之一：EMPTY、LOADING和DONE。

         result：已读取文件的内容。（DOMString类型）

         error：包含错误信息的对象。（FileError类型）

         onloadstart：读取启动时调用的回调函数。（函数类型）

         onprogress：读取过程中调用的回调函数，用于汇报读取进度（progress.loaded和progress.total）。（函数类型） 不支持

         onload：读取安全完成后调用的回调函数。（函数类型）

         onabort：读取被中止后调用的回调函数，例如通过调用abort()方法。（函数类型）

         onerror：读取失败后调用的回调函数。（函数类型）

         onloadend：请求完成后调用的回调函数（无论请求是成功还是失败）。（函数类型）

 

方法：

         abort：中止读取文件。

         readAsDataURL：读取文件，结果以Base64编码的data URL形式返回。(data URL的格式由IETF在RFC2397中定义)

         readAsText：读取文件，结果以文本字符串返回。

使用案例

修改index.html

<!-- 读取文件操作-->

<br/>

<button onclick="readFile()">读取文件</button>

<h1 id="file_read_id">example</h1>
 

在index.html中添加js代码

function readFile(){

window.requestFileSystem(LocalFileSystem.PERSISTENT,0,gotFSRead,fail);//只有执行了该函数，才能操作系统中的文件

}

function gotFSRead(fileSystem) {

fileSystem.root.getFile("readme.txt",null,getFileEntryRead,fail);//得到一个fileEntry对象，代表文件系统中的一个文件

}

function getFileEntryRead(fileEntry) {

fileEntry.file(function (file) {

var reader = new FileReader();//获取对文件进行读操作的对象

reader.onloadend = function (evt) {

alert(evt.target.result);

document.getElementById('file_read_id').innerHTML = evt.target.result;

};

reader.readAsText(file);

},fail)

}

function fail(evt) {

alert(evt.target.error.code);

}

4.5.2 fileWriter

<!-- 写入文件操作-->

<br/>

<button onclick="writeFile()">写入文件</button>

<input id="file_write_id"/>

function writeFile(){

window.requestFileSystem(LocalFileSystem.PERSISTENT,0,gotFSRead,fail);//只有执行了该函数，才能操作系统中的文件

}

function gotFSWrite(fileSystem) {

alert('call getFile Write');

fileSystem.root.getFile("readme2.txt",{create:true},getFileEntryWrite,fail);//得到一个fileEntry对象，代表文件系统中的一个文件

}

function getFileEntryWrite(fileEntry){

fileEntry.createWriter(function (writer) {

//writer 获取对文件进行写操作的对象

writer.onwrite = function (evt) {

alert("success");

};

writer.write(document.getElementById('file_write_id').value);

},fail);

}

 

 

 

 

 

5、每日一练

根据今天学习的加速度传感器的知识，实现摇一摇，改变页面背景色为一个随机颜色。

如何实现：

1、要实现对加速度传感器的监听

2、判断传感器上下左右任意一个值的变化，如果前后两次变化的值超过了25,就改变背景色

3、多久判断一次呢，可以创建个定时器相隔1s判断一次

function startWatch(){

var info = document.getElementById("accel_info");

id = navigator.accelerometer.watchAcceleration(function (accel) {

info.innerHTML= "x is "+accel.x+"\nyis "+accel.y+"\nz is "+accel.z+"\n";

x1=accel.x;

y1=accel.y;

z1=accel.z;

}, function () {

alert('error');

},{frequency:300});

}

function stopWatch() {

if (id)

{

navigator.accelerometer.clearWatch(id);

}

id=null;

}

var x1= 0,x2= 0,y1= 0,y2= 0,z1= 0,z2=0;

setInterval(function () {

var change = Math.abs(x1-x2+y1-y2+z1-z2);

if(change>25)

{

document.getElementById("btn_id").style.backgroundColor = getRandomColor();

}

x2=x1;

y2=y1;

z2=z1;

},100);

function getRandomColor(){

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

var hexR = r.toString(16);

var hexG = g.toString(16);

var hexB = b.toString(16);

return "#"+hexR+hexG+hexB;

}