了解一下PhoneGap

0.  PhoneGap介绍

0.1  什么是PhoneGap？

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

0.2  PhoneGap 历史

09，在iosDevCamp，觉着oc太复杂，尝试使用前端技术来实现ios下的应用程序。

11年，支持6个平台（iOS、Android、BlackBerry、Lg的webOS、Symbian。。）
11年10月份，被Adobe收购，保留了phoneGap的商标所有权。PhoneGap贡献的核心代码，被Adobe改名并开源：Cordova

0.3  Phonegap与Cordova的区别、联系

0.3.1 区别

phoneGap商业项目、功能比较齐全

Cordova开源项目、功能比较少

0.3.2 关系

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

0.4  Why？

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

0.5  核心特点

①兼容性

完全做到了write once，run everywhere。

②标准化

采用w3c标准

③大众化

不需要手机编程基础，只要会html/css/js就可以做手机应用。

0.6  如何学习？

推荐几个网站：

http://phonegap.com（phoneGap官网）

build.phonegap.com(云端打包)

apche.cordova.org(cordova官网)

http://www.phonegap100.com/（中文网站）

http://phonegap-plugins.com/（查看插件列表）

1.1  搭建环境

1.1   模式1：通过命令行形式

1.1.1 安装

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

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

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

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

 如何检验是否安装成功？

windows+R->Cmd->cordova

cmd命令:

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

②进入某个文件夹

    cd 文件夹

③显示文件夹下的内容

    dir 文件夹名称

④清除屏幕内容

    cls

1.1.2 cordova 常用命令

Ÿ   cordova项目平台部署操作

    增加或者删除ios平台

       cordovaplatform add ios

       cordovaplatform remove ios

    增加或删除android平台

       cordovaplatform add android

       cordovaplatform remove android

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

       cordovaplatfrom ls

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

    cordovarequirements

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

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

       cordovaemulate android(在模拟器中执行)

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

       cordovarun --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 DebugBridge，是一个命令行工具，可以和模拟器或者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

 

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

   

2.3   显示网页内容

打开创建好的的demo文件夹导入到项目中；

2.3.1   目录介绍

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

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

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

<metaname="format-detection" content="telephone=no" />

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

<metaname="msapplication-tap-highlight" content="no" />

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

 app.initialize()

  <scripttype="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="volumedown";

        });

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

            p.innerHTML="volume up";

        })

    },

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

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 οnclick="playBeep()">蜂鸣器发声</h1>

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

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

<scripttype="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("helloworld");

                    }

            );

        }

 

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(){

            varinfo = 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});

        }

 

        functionstopWatch() {

            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 };

 

functionrecord(){

            // 采集操作成功完成后的回调函数

            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, 'CaptureError');

            };

 

            // 开始采集音频

           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 οnclick="readFile()">读取文件</button>

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

 

在index.html中添加js代码

 

 

functionreadFile(){

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

    }

 

functiongotFSRead(fileSystem) {

       

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

    }

 

    functiongetFileEntryRead(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οnclick="writeFile()">写入文件</button>

        <inputid="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;

 

        }

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 兼容性

完全做到了writtenonce，runeverywhere；代码编写完之后，通过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 -gcordova  --registry http://registry.npm.taobao.org info

 

如何检验是否安装成功？

windows+R->Cmd->cordova

 

cmd命令:

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

②进入某个文件夹

    cd 文件夹

③显示文件夹下的内容

    dir 文件夹名称

④清除屏幕内容

    cls

 

1.1.2 cordova 常用命令

Ÿ   cordova项目平台部署操作

    增加或者删除ios平台

       cordovaplatform add ios

       cordovaplatform remove ios

    增加或删除android平台

       cordovaplatform add android

       cordovaplatform remove android

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

       cordovaplatfrom ls

 

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

    cordovarequirements

 

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

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

       cordovaemulate android(在模拟器中执行)

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

       cordovarun --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 DebugBridge，是一个命令行工具，可以和模拟器或者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文件，我们一起来分析一下：

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

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

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

<metaname="format-detection" content="telephone=no" />

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

<metaname="msapplication-tap-highlight" content="no" />

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

 

Ÿ   app.initialize()

  <scripttype="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="volumedown";

        });

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

            p.innerHTML="volume up";

        })

    },

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

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 οnclick="playBeep()">蜂鸣器发声</h1>

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

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

<scripttype="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("helloworld");

                    }

            );

        }

 

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(){

            varinfo = 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});

        }

 

        functionstopWatch() {

            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 };

 

functionrecord(){

            // 采集操作成功完成后的回调函数

            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, 'CaptureError');

            };

 

            // 开始采集音频

           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 οnclick="readFile()">读取文件</button>

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

 

在index.html中添加js代码

 

 

functionreadFile(){

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

    }

 

functiongotFSRead(fileSystem) {

       

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

    }

 

    functiongetFileEntryRead(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οnclick="writeFile()">写入文件</button>

        <inputid="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;

 

        }