欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Cordova 插件的介绍及安装使用

程序员文章站 2022-06-25 15:07:16
Cordova 插件使用Battery Status 电池插件cordova 对于插件的使用,需要先进行安装安装插件 cordova plugin add cordova-plugin-battery-status该插件可以用于监视设备电池的变化全局提供了三个时间batterystatus表示电池状态发生改变(至少1%电量变化)或者 充电状态改变触发batterycritical 表示电池电量进入临界值,快关机了(大致是电量剩余5%的时候触发,其余值不触发即便是3% 或者 4% 都...

Cordova 插件使用

Battery Status 电池插件

cordova 对于插件的使用,需要先进行安装

  1. 安装插件 cordova plugin add cordova-plugin-battery-status
  2. 该插件可以用于监视设备电池的变化
  3. 全局提供了三个时间
    • batterystatus 表示电池状态发生改变(至少1%电量变化)或者 充电状态改变触发
    • batterycritical 表示电池电量进入临界值,快关机了(大致是电量剩余5%的时候触发,其余值不触发即便是3% 或者 4% 都没有触发)
    • batterylow 表示电池电量比较低,触发(大致是电量剩余20%的时候触发,其余比20小的值也都没有触发)

注意点:插件的事件监听以及插件方法的调用,一定要在 deviceready 准备完成之后调用

所有的事件,都会返回一个 status 对象,这个对象里面有两个属性

  • status.level 表示设备电池电量的百分比 (0-100) number
  • status.isPlugged 表示设备是否正在充电 boolean值 true 表示在充电, false表示不再充电
// 检测设备是否连接成功
document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
    // 电池插件监听电池电量和充电状态
    window.addEventListener("batterystatus", onBatteryStatus, false);
}

function onBatteryStatus(status) {
  log(`level:${status.level}`)
  log(`isPlugged:${status.isPlugged}`)
  console.log("Level: " + status.level + " isPlugged: " + status.isPlugged);
}
function log (msg) {
  let p = document.createElement('p')
  p.style.fontSize = '16px'
  p.innerHTML = msg
  document.body.appendChild(p)
}

显示效果

Cordova 插件的介绍及安装使用

Cordova 插件的介绍及安装使用

Camera 相机插件

cordova-plugin-camera

这个插件定义了一个全局的 navigator.camera对象,它提供了一个用于拍照和从系统的图像库中选择图像的API。

尽管该对象附加到全局作用域的 navigator,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.camera);
}

Installation

这需要cordova 5.0以上

cordova plugin add cordova-plugin-camera

API参考

camera

camera.getPicture(successCallback, errorCallback, options)

使用相机拍照,或从设备的图片库中检索照片。图像作为base64编码的字符串或图像文件的URI传递给成功回调。

successCallback 表示的是成功的回调,返回的是一个图片地址,或者 base64的字符串

errorCallback 表示的是失败的回调,返回的是一个失败的提示

options 表示的是 相机的自定义设置,都有以下参数

Name Type default description
quality number 50 保存的图像的质量,表示为范围为0-100,其中100通常是完全分辨率,没有文件压缩损失。(请注意,该相机的分辨率信息不可用。)
destinationType DestinationType FILE_URI 选择返回值的格式
sourceType PictureSourceType CAMERA 设置图片的来源。
allowEdit Boolean true 允许简单的编辑图像之前选择。
encodingType EncodingType JPEG 选择返回的图像文件的编码。
targetWidth number 以像素为单位的宽度来缩放图像。必须正确使用。高宽比保持不变。
targetHeight number 以像素为单位的高度来缩放图像。必须与目标一起使用。高宽比保持不变。
mediaType MediaType PICTURE 设置要从中选择的媒体类型。仅当PictureSourceType为PHOTOLIBRARY或SAVEDPHOTOALBUM时有效。
correctOrientation Boolean 旋转图像以校正捕获期间设备的方向。
saveToPhotoAlbum Boolean 捕获后将图像保存到设备上的相册中。
popoverOptions CameraPopoverOptions 仅在iPad中指定弹窗位置的ios选项。
cameraDirection Direction BACK 选择要使用的相机(前置或后置)。

console 控制台插件

cordova-plugin-console

这个插件旨在确保console.log()尽可能有用。它为iOS、Ubuntu、Windows Phone 8和Windows系统增加了额外的功能。

这个插件定义了一个全局 console 对象。

尽管该对象附加到全局范围内的 console ,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("console.log works well");
}

Installation

cordova plugin add cordova-plugin-console

Supported Methods

  • console.log
  • console.error
  • console.exception
  • console.warn
  • console.info
  • console.debug
  • console.assert
  • console.dir
  • console.dirxml
  • console.time
  • console.timeEnd
  • console.table

Contacts 联系人插件

这个插件定义了一个全局的 navigator.contacts 对象, 该对象提供对设备联系人数据库的访问。

尽管该对象附加到全局作用域的 navigator,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.contacts);
}

Installation

这需要cordova 5.0以上

cordova plugin add cordova-plugin-contacts

Device 设备插件

cordova-plugin-device

这个插件定义了一个全局 device 对象,它描述了设备的硬件和软件。尽管该对象在全局作用域中,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(device.cordova);
}

Installation

cordova plugin add cordova-plugin-device

Device Motion 设备运动传感器插件

cordova-plugin-device-motion

这个插件提供了对设备加速计的访问。加速度计是一种运动传感器,它在x、y和z轴上检测相对于当前设备方向的运动变化(delta)。

访问是通过一个全局的 navigator.accelerometer 对象

尽管该对象附加到全局作用域的 navigator,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.accelerometer);
}

Installation

cordova plugin add cordova-plugin-device-motion

Device Orientation 设备指南针传感器插件

cordova-plugin-device-orientation

这个插件提供了对设备指南针的访问。指南针是一个传感器,用于探测设备指向的方向或方向,通常从设备的顶部开始。它测量航向的角度从0到359.99,其中0是北。

访问是通过一个全局的 navigator.compass 对象

尽管该对象附加到全局作用域的 navigator,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.compass);
}

Installation

cordova plugin add cordova-plugin-device-orientation

Dialogs 原生对话框元素插件

cordova-plugin-dialogs

这个插件提供了 通过 全局的navigator.notification 对象,访问一些原生对话框 UI元素的功能。

尽管该对象附加到全局作用域的 navigator,但它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.notification);
}

Installation

cordova plugin add cordova-plugin-dialogs

File 文件插件

cordova-plugin-file

这个插件实现了一个文件API,允许对驻留在设备上的文件进行读/写访问。

这个插件定义了一个全局的 cordova.file 对象

尽管在全局范围中,它只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.file);
}

Installation

cordova plugin add cordova-plugin-file

File Transfer 文件上传下载插件

cordova-plugin-file-transfer

这个插件允许你上传和下载文件。

这个插件定义了全局FileTransfer, FileUploadOptions构造函数。尽管在全局范围内,它们只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(FileTransfer);
}

Installation

cordova plugin add cordova-plugin-file

Geolocation 设备位置插件

cordova-plugin-geolocation

这个插件提供了关于设备位置的信息,比如纬度和经度。位置信息的常见来源包括全球定位系统(GPS)和从网络信号推断的位置,如IP地址、RFID、WiFi和蓝牙MAC地址和GSM/CDMA小区id。不能保证API返回设备的实际位置。

这个插件定义了一个全局navigator.geolocation。地理定位对象(用于缺少它的平台)。

尽管该对象在全局范围内,但此插件提供的特性只有在deviceready事件发生后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("navigator.geolocation works well");
}

Installation

cordova plugin add cordova-plugin-geolocation

Globalization 全球化信息插件

cordova-plugin-globalization

此插件获取特定于用户地区、语言和时区的信息并执行操作。请注意语言环境和语言之间的区别:语言环境控制一个区域的数字、日期和时间的显示方式,而语言独立于语言环境设置决定语言文本的显示方式。通常开发人员使用locale来设置这两个设置,但是用户没有理由不将语言设置为“英语”,而将locale设置为“法语”,这样文本就会以英语显示,而日期、时间等会以法语显示。不幸的是,大多数移动平台目前并不区分这些设置。

这个插件定义了全局的 navigator.globalization 对象

尽管该对象在全局范围内,但此插件提供的特性只有在deviceready事件发生后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.globalization);
}

Installation

cordova plugin add cordova-plugin-globalization

Inappbrowser web浏览器视图插件

cordova-plugin-inappbrowser

这个插件提供了一个web浏览器视图,在调用cordova.InAppBrowser.open()时显示。

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');

cordova.InAppBrowser.open()功能被定义为该window.open()功能的替代品。window.open()通过替换window.open,现有调用可以使用InAppBrowser窗口:

window.open = cordova.InAppBrowser.open;

InAppBrowser窗口的行为类似于标准的Web浏览器,并且无法访问Cordova API。因此,如果您需要加载第三方(不可信)内容,而不是将其加载到主Cordova Web视图中,则建议使用InAppBrowser。InAppBrowser不受白名单限制,也不会在系统浏览器中打开链接。

默认情况下,InAppBrowser为用户提供其自己的GUI控件(后退,前进,完成)

为了向后兼容,此插件还挂钩window.open。但是,插件安装的hook window.open可能具有意想不到的副作用(尤其是如果仅将此插件作为另一个插件的依赖项包含在内)。 The hook of window.open 将在以后的主要版本中删除。在从插件中删除钩子之前,应用程序可以手动恢复默认行为:

delete window.open // Reverts the call back to it's prototype's default

尽管window.open在全局范围内,但InAppBrowser直到deviceready事件发生后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("window.open works well");
}

Installation

cordova plugin add cordova-plugin-inappbrowser

Media 多媒体插件

cordova-plugin-media

这个插件提供了记录和播放设备上的音频文件的能力。

这个插件定义了全局的 Media 构造函数

尽管在全局范围内,但此插件提供的特性只有在deviceready事件发生后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(Media);
}

** Installation **

cordova plugin add cordova-plugin-media

Media Capture 多媒体捕获访问插件

cordova-plugin-media-capture

这个插件提供了对设备的音频、图像和视频捕获功能的访问。

这个插件定义了全局的 navigator.device.capture 对象

尽管在全局范围内,但此插件提供的特性只有在deviceready事件发生后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.device.capture);
}

Installation

cordova plugin add cordova-plugin-media-capture

Network Information 网络连接插件

cordova-plugin-network-information

这个插件提供了一个旧版本的网络信息API的实现。它提供设备的蜂窝和wifi连接信息,以及设备是否有互联网连接。

Installation

cordova plugin add cordova-plugin-network-information

Splashscreen 屏幕插件

cordova-plugin-splashscreen

这个插件需要与启动屏幕工作。这个插件在应用程序启动时显示和隐藏启动屏幕

Installation

// npm hosted (new) id
cordova plugin add cordova-plugin-splashscreen

// you may also install directly from this repo
cordova plugin add https://github.com/apache/cordova-plugin-splashscreen.git

Vibration 设备震动插件

cordova-plugin-vibration

这个插件提供了震动设备的方法。

这个插件定义了全局对象,包括navigator.vibrate

尽管在全局范围内,它们只有在deviceready事件之后才可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.vibrate);
}

Installation

cordova plugin add cordova-plugin-vibration

Statusbar 状态栏插件

cordova-plugin-statusbar

StatusBar对象提供了一些自定义iOS和Android状态栏的功能。

Installation

这种安装方法需要cordova 5.0以上

cordova plugin add cordova-plugin-statusbar

Whitelist webview白名单插件

cordova-plugin-statusbar

这个插件实现了一个在Cordova 4.0上导航应用webview的白名单策略

本文地址:https://blog.csdn.net/lvjinhu/article/details/108136935

相关标签: cordova