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

cordova plugin rm

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

cordova plugin add [email protected]

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 中 配置 节点 如,即允许跳转到任意http协议的页面,此节点对于单页面webapp用不到

3.2.2 Intent Whitelist (意图白名单)
这里的意图,也就是从外部浏览器打开,或者打电话发短信。配置方式:config.xml 中 配置 节点如表示允许任何意图

3.2.3 Network Request Whitelist(http请求白名单)
也就是ajax和jsonp请求了 配置方式:config.xml 中 配置 节点,如即允许任何网址的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

在客户端添加脚本文件 存放的位置在所以的脚本文件的后面

运行手机端的apk 文件

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

你可能感兴趣的:(Cordova day02 插件的使用)