Cordova day02 插件的使用

介绍splashScreen插件和启动图片的替换

splashscreen插件的地址http://cordova.apache.org/plugins/?q=splashscreen

安卓图片资源介绍http://my.oschina.net/mutouzhang/blog/209875

我的小米手机对应替换安卓下面的drawable-port-hdpi-screen.png文件

1 Device事件

网站地址：http://cordova.apache.org/docs/en/latest/cordova/events/events.html

设备加载事件

前台事件resume

后台事件pause

安卓端的返回按钮事件backbutton

安卓端的菜单按钮事件menubutton

2 插件的安装

2.1 显示插件的命令

cordova plugin list

cordova plugin search xxxx

cordova plugin add <cordova-plugin> --save

cordova plugin rm <cordova-plugin>

安装指定版本的插件，比较少用
cordova plugin add cordova-plugin-console@latest

cordova plugin add cordova-plugin-console@0.2.1

3 插件的使用

3.1 电池电量事件

电池电量事件：http://cordova.apache.org/docs/en/latest/reference/cordova-plugin-battery-status/index.html

电池电量的事件需要安装插件 cordova plugin add cordova-plugin-battery-status

注意：设备事件加载采用document.addEventListener
注意：电池电量加载采用window.addEventListener

batterycritical 事件
当 PhoneGap 应用监控到电池达到警告时触发(20%) batterycritical 的处理程序将会调用一个对象,该对象包含以下两个属性:
 level:电池剩余电量的百分比,取值范围是 0-100。(数字类型)
 isPlugged:boolean 型的值,表示设备是否接通电源。

batterylow 事件
在电量非常低的情况下触发(5%) batterylow 的处理程序将会调用一个对象,该对象包含以下两个属性:
 level:电池剩余电量的百分比,取值范围是 0-100。(数字类型)
 isPlugged:boolean 型的值,表示设备是否接通电源。

batterystatus 事件
PhoneGap 应用监控到电池状态有改变时触发(每当电量变化 1%的时候触发一次)
 batterystatus 的处理程序将会调用一个对象,该对象包含以下两个属性:
 level:电池剩余电量的百分比,取值范围是 0-100。(数字类型) isPlugged:boolean
型的值,表示设备是否接通电源。

3.2 介绍第一个插件whitelist白名单插件

ordova项目中的域名白名单是一个用来控制外部域名访问的安全模块，比如http://google.com默认的安全机制是没有网络访问权限。开发者可以定义特定域名和子域名的访问权限。

打开config.xml文件进行配置解释

3.2.1 Navigation Whitelist （webview中页面跳转白名单）
配置方式：config.xml 中 配置 节点 如<allow-navigation href="http://*" />，即允许跳转到任意http协议的页面,此节点对于单页面webapp用不到

3.2.2 Intent Whitelist （意图白名单）
这里的意图，也就是从外部浏览器打开，或者<a href="tel:10086">打电话</a>，<a href="sms:10086">发短信</a>。配置方式：config.xml 中 配置<allow-intent> 节点如<allow-intent href="*" />表示允许任何意图

3.2.3 Network Request Whitelist（http请求白名单）
也就是ajax和jsonp请求了 配置方式：config.xml 中 配置<access> 节点，如<access origin="*" />即允许任何网址的http请求

3.2.4 Content Security Policy W3C的Content SecurityPolicy，简称CSP。
顾名思义，这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少XSS的发生。 虽然脚本资源是最明显的安全隐患，但是CSP还提供了一套丰富的指令集，允许页面控制加载各种类型的资源，例如如下的类型：
content-src：限制连接的类型（例如XHR、WebSockets和EventSource）
font-src：控制网络字体的来源。例如可以通过font-src 错误! 超链接引用无效。

3.3 介绍第二个插件device

1 采用phonegap命令行搜索：phonegap plugin search device

2 采用cordova命令行搜索：cordova plugin search device

搜索对应的结果：https://www.npmjs.com/package/cordova-plugin-device

device对象可以用来确定设备的有限数量的信息。可用的设备属性如下：

device.name
device.cordova
device.platform
device.uuid
device.verson
device.model
添加插件，调用api将设备的信息打印到界面上显示出来

3.4 介绍第三个插件camera

phonegap的项目中已经安装了camera插件

同样采用上面的方式对插件进行搜索

对应的搜索结果: https://www.npmjs.com/package/cordova-plugin-camera

到网站上去搜索插件camera 查看使用方法

对data:image的说明：http://www.aimks.com/css-path-data-image-png-usage-base64.html

在建立的项目中添加一个按钮拍照的功能

3.5 远程调试

wenire 远程调试

百度搜索wenire 调试

http://blog.csdn.net/freshlover/article/details/42640253
安装npm -g install weinre //安装weinre

运行：weinre --boundHost 192.168.104.22 --httpPort 8090 //启动weinre

在客户端添加脚本文件 <script src="http://192.168.104.22:8090/target/target-script-min.js#anonymous"></script>存放的位置在所以的脚本文件的后面

运行手机端的apk 文件

用chrome 打开服务器进行手机端网页的远程调试