①jQuery：简化DOM操作，常用于DOM操作频繁，数据增删改查不是特别多的场景
②bootStrap：在网站或者网络应用程序开发的开源前端框架，在响应式的开发，偏向于pc端
③angularJS：实现SPA应用，数据操作非常频繁。
1采用了MVC的设计模式 2双向数据绑定 3依赖注入 4模块化设计
框架学习：
①明确框架定位：解决什么样的问题
②掌握框架的核心概念或者语法
③遇到问题怎么解决问题
--遇到问题 官网找手册，定位到用法或者demo案例
--去官方技术论坛，stackoverflow(问答), segmentfault(国内)、github
--联系官方人员
一、WebApp、NativeApp、HybridApp
1、WebApp
网页应用：体验就像传统的PC端的应用一样，本身定位就是一个应用
2、NativeApp
原生应用：借助SDK（software development kit）提供的原生组件或者服务，进行编码而生成的应用。
①Android
②iOS
3、HybridApp 混合编程
采用前端技术+原生开发。
phoneGap 支持7个平台，是目前唯一做到一次部署，全平台通用的移动开发框架，能够让开发者采用web前端技术调用API接口，实现hybridApp。
二、Eclipse工具的使用以及Android工程的创建、运行
iOS开发环境--》MacOSX
android开发环境.
①java（安装jdk-》java development kit）
②配置环境变量（计算机-》属性--》高级系统设置-》环境变量-》新建、编辑）
③eclipse开发工具
④配置SDK
关于Eclipse的使用：
①如果没有显示工具条，点击window->show toolbar
②android sdk manager-->更新SDK
③android virtual device manager->
new->指定设备名称,选中设备，指定SD卡大小
使用：直接打开eclipse，选中android virtual device manager按钮，在设备列表中选中对应的设备，点击start，然后点击launch去启动模拟器。
④如果视图乱了或者出不来了，window->Reset perspective
创建一个Android项目：
File-》new-》AndroidApplicationProject-》设置应用的名称/包的名称，配置icon，一路next最后finish
layout中的xml文件都是用来显示的ui效果。
java代码
android项目文件的介绍：
①src--》source 源文件(java)
②gen--》android编译项目的时候，自动生成的文件，不需要理会
③android4.2.2 android private libraries 都是android本身sdk相关的文件
④assets 资源文件夹 存储是不希望被流处理的文件，比如混合编程的时候，前端代码就可以放在这个目录中
⑤bin-》binary 存储的是可以安装的apk包
⑥libs-》libraries 库 需要用到第三方公司所提供的jar包，
可以直接放到libs中，添加到build的路径中
⑦res-》resource 资源 存储是1 图片 2 xml 3 menu
⑧androidManifest.xml 权限的配置、版本号的设置、支持sdk的版本。。。都在这里进行设置。
ActivityManager: Warning: Activity not started, its current task has been brought to the front
代码没问题，问题出在你没有对代码做修改，又重复编译运行。
三、hybridApp 混合编程
步骤分析：
①编写前端代码，测试在pc端是否能够达到效果 index.html
②将前端代码拷贝到android工程中的assets目录
③借助原生组件WebView，将前端代码显示在android的视图中
WebView组件:网络视图组件，可以加载前端代码
//实例化WebView的一个对象
WebView wv = new WebView(getApplicationContext());
//使用wv来加载页面
wv.loadUrl("file:///android_asset/index.html");
//将wv作为activity的内容视图
setContentView(wv);
练习：新建一个android工程，来实现一个混合编程应用：
要求：一个html页面，页面有1个p，1个button，点击按钮，将p隐藏掉。
如果要想混合编程app能够执行js，必须添加设置：
wv.getSettings().setJavaScriptEnabled(true);
设置能够查看console.log所输入的日志：
wv.setWebChromeClient(
new WebChromeClient(){
@Override
@Deprecated
public void onConsoleMessage(String message,
int lineNumber, String sourceID) {
// TODO Auto-generated method stub
Log.e("test",
"行号为:"+lineNumber+
" 输入内容为:"+message);
super.onConsoleMessage(message, lineNumber, sourceID);
}
});
实现混合编程的两种方式：
1、直接将前端代码 放到assets目录中
2、将前端代码都部署在服务器端，拿到url，载入并显示
基本步骤：
①在pc端完成代码的编辑，能够正常访问和浏览
②将代码部署在服务器端（apache和mySql）
③拿到Url：得到当前机器的ip地址：windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。
172.163.100.78 将之前访问工程的localhost改成ip地址。
http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html
==》
http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html
④配置webView，载入指定的url
⑤添加网络权限，运行看效果。
4.2.2 ``
回顾：
①jQuery：简化DOM操作，常用于DOM操作频繁，数据增删改查不是特别多的场景
②bootStrap：在网站或者网络应用程序开发的开源前端框架，在响应式的开发，偏向于pc端
③angularJS：实现SPA应用，数据操作非常频繁。
1采用了MVC的设计模式 2双向数据绑定 3依赖注入 4模块化设计
框架学习：
①明确框架定位：解决什么样的问题
②掌握框架的核心概念或者语法
③遇到问题怎么解决问题
--遇到问题 官网找手册，定位到用法或者demo案例
--去官方技术论坛，stackoverflow(问答), segmentfault(国内)、github
--联系官方人员
一、WebApp、NativeApp、HybridApp
1、WebApp
网页应用：体验就像传统的PC端的应用一样，本身定位就是一个应用
2、NativeApp
原生应用：借助SDK（software development kit）提供的原生组件或者服务，进行编码而生成的应用。
①Android
②iOS
3、HybridApp 混合编程
采用前端技术+原生开发。
phoneGap 支持7个平台，是目前唯一做到一次部署，全平台通用的移动开发框架，能够让开发者采用web前端技术调用API接口，实现hybridApp。
二、Eclipse工具的使用以及Android工程的创建、运行
iOS开发环境--》MacOSX
android开发环境.
①java（安装jdk-》java development kit）
②配置环境变量（计算机-》属性--》高级系统设置-》环境变量-》新建、编辑）
③eclipse开发工具
④配置SDK
关于Eclipse的使用：
①如果没有显示工具条，点击window->show toolbar
②android sdk manager-->更新SDK
③android virtual device manager->
new->指定设备名称,选中设备，指定SD卡大小
使用：直接打开eclipse，选中android virtual device manager按钮，在设备列表中选中对应的设备，点击start，然后点击launch去启动模拟器。
④如果视图乱了或者出不来了，window->Reset perspective
创建一个Android项目：
File-》new-》AndroidApplicationProject-》设置应用的名称/包的名称，配置icon，一路next最后finish
layout中的xml文件都是用来显示的ui效果。
java代码
android项目文件的介绍：
①src--》source 源文件(java)
②gen--》android编译项目的时候，自动生成的文件，不需要理会
③android4.2.2 android private libraries 都是android本身sdk相关的文件
④assets 资源文件夹 存储是不希望被流处理的文件，比如混合编程的时候，前端代码就可以放在这个目录中
⑤bin-》binary 存储的是可以安装的apk包
⑥libs-》libraries 库 需要用到第三方公司所提供的jar包，
可以直接放到libs中，添加到build的路径中
⑦res-》resource 资源 存储是1 图片 2 xml 3 menu
⑧androidManifest.xml 权限的配置、版本号的设置、支持sdk的版本。。。都在这里进行设置。
ActivityManager: Warning: Activity not started, its current task has been brought to the front
代码没问题，问题出在你没有对代码做修改，又重复编译运行。
三、hybridApp 混合编程
步骤分析：
①编写前端代码，测试在pc端是否能够达到效果 index.html
②将前端代码拷贝到android工程中的assets目录
③借助原生组件WebView，将前端代码显示在android的视图中
WebView组件:网络视图组件，可以加载前端代码
//实例化WebView的一个对象
WebView wv = new WebView(getApplicationContext());
//使用wv来加载页面
wv.loadUrl("file:///android_asset/index.html");
//将wv作为activity的内容视图
setContentView(wv);
练习：新建一个android工程，来实现一个混合编程应用：
要求：一个html页面，页面有1个p，1个button，点击按钮，将p隐藏掉。
如果要想混合编程app能够执行js，必须添加设置：
wv.getSettings().setJavaScriptEnabled(true);
设置能够查看console.log所输入的日志：
wv.setWebChromeClient(
new WebChromeClient(){
@Override
@Deprecated
public void onConsoleMessage(String message,
int lineNumber, String sourceID) {
// TODO Auto-generated method stub
Log.e("test",
"行号为:"+lineNumber+
" 输入内容为:"+message);
super.onConsoleMessage(message, lineNumber, sourceID);
}
});
实现混合编程的两种方式：
1、直接将前端代码 放到assets目录中
2、将前端代码都部署在服务器端，拿到url，载入并显示
基本步骤：
①在pc端完成代码的编辑，能够正常访问和浏览
②将代码部署在服务器端（apache和mySql）
③拿到Url：得到当前机器的ip地址：windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。
172.163.100.78 将之前访问工程的localhost改成ip地址。
http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html
==》
http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html
④配置webView，载入指定的url
⑤添加网络权限，运行看效果。
4.2.2 ``
回顾：
①jQuery：简化DOM操作，常用于DOM操作频繁，数据增删改查不是特别多的场景
②bootStrap：在网站或者网络应用程序开发的开源前端框架，在响应式的开发，偏向于pc端
③angularJS：实现SPA应用，数据操作非常频繁。
1采用了MVC的设计模式 2双向数据绑定 3依赖注入 4模块化设计
框架学习：
①明确框架定位：解决什么样的问题
②掌握框架的核心概念或者语法
③遇到问题怎么解决问题
--遇到问题 官网找手册，定位到用法或者demo案例
--去官方技术论坛，stackoverflow(问答), segmentfault(国内)、github
--联系官方人员
一、WebApp、NativeApp、HybridApp
1、WebApp
网页应用：体验就像传统的PC端的应用一样，本身定位就是一个应用
2、NativeApp
原生应用：借助SDK（software development kit）提供的原生组件或者服务，进行编码而生成的应用。
①Android
②iOS
3、HybridApp 混合编程
采用前端技术+原生开发。
phoneGap 支持7个平台，是目前唯一做到一次部署，全平台通用的移动开发框架，能够让开发者采用web前端技术调用API接口，实现hybridApp。
二、Eclipse工具的使用以及Android工程的创建、运行
iOS开发环境--》MacOSX
android开发环境.
①java（安装jdk-》java development kit）
②配置环境变量（计算机-》属性--》高级系统设置-》环境变量-》新建、编辑）
③eclipse开发工具
④配置SDK
关于Eclipse的使用：
①如果没有显示工具条，点击window->show toolbar
②android sdk manager-->更新SDK
③android virtual device manager->
new->指定设备名称,选中设备，指定SD卡大小
使用：直接打开eclipse，选中android virtual device manager按钮，在设备列表中选中对应的设备，点击start，然后点击launch去启动模拟器。
④如果视图乱了或者出不来了，window->Reset perspective
创建一个Android项目：
File-》new-》AndroidApplicationProject-》设置应用的名称/包的名称，配置icon，一路next最后finish
layout中的xml文件都是用来显示的ui效果。
java代码
android项目文件的介绍：
①src--》source 源文件(java)
②gen--》android编译项目的时候，自动生成的文件，不需要理会
③android4.2.2 android private libraries 都是android本身sdk相关的文件
④assets 资源文件夹 存储是不希望被流处理的文件，比如混合编程的时候，前端代码就可以放在这个目录中
⑤bin-》binary 存储的是可以安装的apk包
⑥libs-》libraries 库 需要用到第三方公司所提供的jar包，
可以直接放到libs中，添加到build的路径中
⑦res-》resource 资源 存储是1 图片 2 xml 3 menu
⑧androidManifest.xml 权限的配置、版本号的设置、支持sdk的版本。。。都在这里进行设置。
ActivityManager: Warning: Activity not started, its current task has been brought to the front
代码没问题，问题出在你没有对代码做修改，又重复编译运行。
三、hybridApp 混合编程
步骤分析：
①编写前端代码，测试在pc端是否能够达到效果 index.html
②将前端代码拷贝到android工程中的assets目录
③借助原生组件WebView，将前端代码显示在android的视图中
WebView组件:网络视图组件，可以加载前端代码
//实例化WebView的一个对象
WebView wv = new WebView(getApplicationContext());
//使用wv来加载页面
wv.loadUrl("file:///android_asset/index.html");
//将wv作为activity的内容视图
setContentView(wv);
练习：新建一个android工程，来实现一个混合编程应用：
要求：一个html页面，页面有1个p，1个button，点击按钮，将p隐藏掉。
如果要想混合编程app能够执行js，必须添加设置：
wv.getSettings().setJavaScriptEnabled(true);
设置能够查看console.log所输入的日志：
wv.setWebChromeClient(
new WebChromeClient(){
@Override
@Deprecated
public void onConsoleMessage(String message,
int lineNumber, String sourceID) {
// TODO Auto-generated method stub
Log.e("test",
"行号为:"+lineNumber+
" 输入内容为:"+message);
super.onConsoleMessage(message, lineNumber, sourceID);
}
});
实现混合编程的两种方式：
1、直接将前端代码 放到assets目录中
2、将前端代码都部署在服务器端，拿到url，载入并显示
基本步骤：
①在pc端完成代码的编辑，能够正常访问和浏览
②将代码部署在服务器端（apache和mySql）
③拿到Url：得到当前机器的ip地址：windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。
172.163.100.78 将之前访问工程的localhost改成ip地址。
http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html
==》
http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html
④配置webView，载入指定的url
⑤添加网络权限，运行看效果。
4.2.2 ``
http://androiddevtools.cn/ 更新SDK
一、PhoneGap
why？ 昨天所写混合编程应用程序和webApp功能都差不多，在android系统中运行，借助工具来实现和nativeApp差不多的功能，比如说调用底层的硬件--phoneGap
what？
开源的移动设备应用程序框架，目标是使用前端开发技术来实现跨平台应用程序，能够实现原生应用程序可以实现的功能：调用智能手机的核心本地功能，传感器、摄像头、震动。。
开发框架分为3层：
应用层 ：开发者写js、html、css
中间层 ：phoneGap/cordova封装好的js的api
底层： 各个操作系统的硬件的调用
发展历史：
09年，iOSDevCamp中，提出了使用前端技术来开发iOS应用程序
10年，支持7个平台
11年，被Adobe收购，phoneGap保留了商标，将核心的跨平台代码贡献给了Adobe，Adobe将代码开源，叫做cordova
特点：
①兼容性
write once ,run everywhere
②标准化
采用w3c标准
③大众化
不需要手机编程基础，只要会html/css/js，就能做混合编程应用程序开发，而且还能够通过js调用设备底层硬件
build.phonegap.com //云端打包
phonegap.com
cordova.apache.org
phonegap-plugins.com
二、搭建phoneGap的开发环境
方式1：通过命令行的方式
需要安装nodeJS，通过npm安装cordova，使用cordova所提供的命令去创建、编译运行工程等功能。
参考cordova官网：http://cordova.apache.org/
方式2：通过图形化的方式
1、pc端
http://phonegap.com/getstarted/
2、移动端
https://github.com/phonegap/phonegap-app-developer/blob/master/resources/release/android/PhoneGap-1.7.6-release.apk
将apk的安装包安装到模拟器中，有两种方式：
方式1：通过adb（Android Debug Bridge），借助命令行去安装
步骤1：找到adb
步骤2：windows+R ->cmd ->显示可以输入命令的窗口
步骤3：统一将apk包放到c盘根目录下
步骤4：通过adb去安装apk包 路径+adb.exe install 路径+**.apk
方式2：将apk放在apache对应的htdocs目录中，然后在模拟器访问对应的目录，点击下载，去安装
安装移动端的应用程序注意：
①如果提示waiting for device,建议将模拟器和eclipse关掉再打开
②如果提示 INSTAILL_FAILED_ALREADY_EXISTS,说明安装包已经安装过了，不要去重复安装！
三、phonegap事件列表
①运行状态 pause/resume
②网络状态 online/offline
③电池状态 battery
④按钮： button
document.addEventListener('事件名称',事件对应的处理函数,false)
四、phoneGap核心API
1、设备
device.platform/version/uuid/name/phonegap..
注意事项：核心API在使用的过程中，都是在deviceReady之后调用，否则有可能调用不成功。
插件工作原理（以device为例）：
在插件中的www目录device.js，执行exec方法读取到设备的信息；
在执行exec方法时，根据当前的平台，找到对应的cordova.js；
在cordova.js文件中，通过nativeApiProvider找到真正要去执行的原生代码，将结果再一步步通过回调返回。
2、提醒通知
notification来实现听觉、视觉、触觉的通知
navigator.notification.alert/confirm/beep(3)/vibrate(2000)
3、加速度传感器
accelerometer获取沿着xyz三个轴加速度信息
navigator.accelerometer.getCurrentAcceleration()
navigator.accelerometer.watchAcceleration()
navigator.accelerometer.clearWatch()
4、capture 采集音频、视频、照片
navigator.device.capture.captureAudio/Image/Video()
5、file文件操作
功能1：文件系统创建文件并写入内容
功能2：从文件系统读取文件中的内容
功能1：写文件
①得到文件系统 FileSystem
requestFileSystem，在成功的回调里得到fileSystem
②得到fileEntry
getFile 在成功的回调中得到fileEntry
③fileWriter
createWriter在成功的回调中得到fileWriter
fileWriter.write() 写内容
功能2：读文件
①fileSystem
②fileEntry
③fileReader
file对象：fileEntry.file()
fileReader.readAsText(file);
文件操作对象：
fileSystem 文件系统
fileEntry 文件操作入口对象
fileWriter 文件写对象 fileWriter.write('asdfadsf');
fileReader 文件读对象 fileReader.readAsText(file);
file 文件对象 包含了文件属性信息 名称/路径/大小。。 fileEntry.file()
6、摄像头
navigator.camera.getPicture(成功的回调，失败的回调，option对象)
option对象：{quality:50,sourceType:Camera.PictureSourceType.PHOTOLIBRARY}
如果sourceType为从相册中选取照片，在成功的回调中 存储的是图片的路径
练习：通过camera所提供的getPicture方法，从相册中选取一张图片，设置为对应的头像。
页面：button、image
实现：点击button调用getPicture方法，在成功的回调中得到url，找到image标签，设置它的src为刚得到的url
注意：没有照片，通过apache，在模拟器中通过输入pc端的ip地址，访问开饭项目中img目录中图片，长按图片，save保存。
每日一练：
加速度传感器：通过摇一摇，改变元素的背景色。
分析：
1、要实现对加速度传感器数据的监听
2、判断传感器数据在xyz值的变化，如果这个值的变化超过了20，
就认为是摇一摇的动作--》 改变背景色
3、创建一个定时器，判断当前和上次数据的变化的差值，1s
build.phonegap.com 云端打包
404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
