WebAPP-了解一下PhoneGap

最新推荐文章于 2024-04-18 08:58:23 发布

书亦何欢*

最新推荐文章于 2024-04-18 08:58:23 发布

阅读量696

点赞数

文章标签：前端

原文链接：https://blog.csdn.net/laizhixue/article/details/80389392?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159041132319195239815550%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159041132319195239815550&biz_id=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”>

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中的：

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（移动端）已经连接的情况下，去查看结果

和硬件沟通
除了能够将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=“vibrate()”>使设备震动

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

<scripttype=“text/javascript”>

    app.initialize();

    function playBeep() {

        navigator.notification.beep(3);

    };

     function vibrate() {

       navigator.notification.vibrate(300);

    }

步骤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;



    }

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程序呢？

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

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

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”>

但是我们会发现，在我们工程中是无法找到该文件的，是因为该文件已经集成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文件都做了那些事？

Ÿ 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=“vibrate()”>使设备震动

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

<scripttype=“text/javascript”>

    app.initialize();

    function playBeep() {

        navigator.notification.beep(3);

    };

     function vibrate() {

       navigator.notification.vibrate(300);

    }

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

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

练习4：各种对话框

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

步骤1：修改index.html

步骤2：在js中添加个function

function showAlert(){

        navigator.notification.alert(

                "content",//内容

                function () {//按钮点击的回调函数

                    playBeep();

                    alert("helloworld");

                }

        );

    }

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

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就行了。

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

4.5.1 fileReader

属性：

     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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebAPP-了解一下PhoneGap

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年1.
复制链接

扫一扫