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
问题：速度很慢，基本下载不下来，怎么办？
解决方案: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应用
必备条件：
②安装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：创建用来存储项目的文件夹
步骤2：创建cordova项目首先在c盘根目录创建一个文件夹：phonegapDemo, 进入phonegaoDemo目录中
步骤3：判断是否创建成功点击+号，在弹窗中可以创建或者打开一个cordova项目，我们在这里点击create来创建一个新的cordova项目！
检查服务器是否跑起来
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
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 | 采集 |
罗盘 | |
contacts | 联系人 |
device | 设备 |
events | 事件 |
file | 文件 |
geolocation | 地理位置 |
media | |
通知（提醒） | |
storage | 存储 |
4.2 消息提示
phonegap的notification类中封装了一系列设备视觉、听觉、触觉的通知，可以为应用定制专门的消息推送、警告或者提示。
notification.alert() 弹出一个警告或者对话框
notification.confirm() 显示一个可定制的确认对话框
notification.prompt() 弹出一个对话框
notification.beep() 控制蜂鸣器发出蜂鸣声
notification.vibrate() 产生震动
练习3：调用phonegap的notification api让手机发出声音、震动
步骤1：修改index.html,添加两个h1标签
<h1 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 onclick="playBeep()">蜂鸣器发声</h1>
<h1onclick="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 onclick="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/>
<buttononclick="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;
}