Cordova入门系列（三）Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html
Cordova入门系列（三）Cordova插件调用
版权声明：本文为博主原创文章，转载请注明出处
上一章我们介绍了cordova android项目是如何运行的，这一章我们介绍cordova的核心内容，插件的调用。演示一个例子，通过cordova插件，去调用摄像头。
一、插件的安装以及基本信息：
我们先在项目中安装调用摄像头的插件cordova-plugin-camera，cd到hello下，执行：
cordova plugin add cordova-plugin-camera
然后它会为我们的hello/plugins文件夹下添加cordova-plugin-camera插件（这个是整个这个插件模块，可用于安卓和ios。卸载插件用cordova plugin remove cordova-plugin-camera）；
同时也会在我们的platforms/android/platform_www/plugins下面添加对应的安卓的插件cordova-plugin-camera（这个是根据对应的平台生成的对应的插件内容，只可用于本安卓平台）；
也会在我们的资源文件夹assets/www/plugins下添加cordova-plugin-camera插件（这个资源文件夹下的所有的文件，才是真正的app运行的时候调用的，加载的文件）；
还会为我们的src下添加org.apache.cordova.camera包以及对应的java文件。
为什么要在项目中加这么多，这只是cordova的机制，我们不作重点研究。这三个目录是有不同的作用的，但我们只重点关注assets/www目录下。
除了上面这些，加完这个插件也会改变一些其他文件的内容，首先看res/xml/config.xml，最后多了一项配置信息：
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
</feature>
feature · name："js中间件通过它调用java方法"。
（中间件就是我们的插件对应的一些js文件。我们写的js程序通过这些插件（中间件）去调用Jjava原生内容）
param · name："android-package" value：原生插件类的包类路径。
打开assets/www下cordova_plugins.js，发现其中也增加了很多内容：
cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
{
"id": "cordova-plugin-camera.Camera",
"file": "plugins/cordova-plugin-camera/www/CameraConstants.js",
"pluginId": "cordova-plugin-camera",
"clobbers": [
"Camera"
]
},
{
"id": "cordova-plugin-camera.CameraPopoverOptions",
"file": "plugins/cordova-plugin-camera/www/CameraPopoverOptions.js",
"pluginId": "cordova-plugin-camera",
"clobbers": [
"CameraPopoverOptions"
]
},
{
"id": "cordova-plugin-camera.camera",
"file": "plugins/cordova-plugin-camera/www/Camera.js",
"pluginId": "cordova-plugin-camera",
"clobbers": [
"navigator.camera"
]
},
{
"id": "cordova-plugin-camera.CameraPopoverHandle",
"file": "plugins/cordova-plugin-camera/www/CameraPopoverHandle.js",
"pluginId": "cordova-plugin-camera",
"clobbers": [
"CameraPopoverHandle"
]
}
];
module.exports.metadata =
// TOP OF METADATA
{
"cordova-plugin-whitelist": "1.3.0",
"cordova-plugin-compat": "1.0.0",
"cordova-plugin-camera": "2.3.0"
};
// BOTTOM OF METADATA
});
id:插件中某个模块或具体功能的id
file:这个id对应的js文件（实现这个模块或功能的文件）
pluginId:插件的ID，通过这个ID可以进行插件的安装和卸载
clobbers:H5或js通过它去调用js中间件（插件）中定义的方法
二、在代码中如何调用摄像头插件
上面我们说的都是在执行了cordova plugin add cordova-plugin-camera，安装好插件之后所产生的内容以及插件的一些基本信息，配置信息。接下来我们说一下如何简单使用这个插件。
首先我们修改index.html（指的assets/www下的）
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Hello World</title>
</head>
<body>
<div class="app">
<!-- 这里添加一个button去调用自己写的拍照函数 -->
<button onClick="takePhoto()">拍照</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
接下来再修改index.js
//自己定义的拍照函数
function takePhoto() {
//拍照
//navigator.camera就是上面我们所说的clobbers定义的东西，用来调用插件中的方法的
//getPicture就是插件中调用摄像头拍照的方法
navigator.camera.getPicture(takeSuccess, takeFail, {
destinationType : Camera.DestinationType.FILE_URI
}); //拍照成功后回调
function takeSuccess(imageURI) {
console.log('success' + imageURI);
} //失败后回调
function takeFail(message) {
navigator.notification.alert("拍照失败，原因：" + message);
}
}
至此，我们的Cordova摄像头插件已经在代码中调用好了，运行我们的项目，就可以拍照了。（当然，模拟器上是不行的，得用真机）
三、getPicture()方法详解：
camera.getPicture(cameraSuccess, cameraError, cameraOptions)
选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：
1.一个字符串，包含Base64编码的照片图像（默认情况）。
2.一个字符串，表示在本地存储的图像文件位置。
cameraSuccess：
提供图像数据的onSuccess回调函数。
function(imageData) {
// 对图像进行处理
}
参数imageData：根据cameraOptions的设定值，为Base64编码的图像数据或图像文件的URI。（字符串类型）
errorCallback:
提供错误信息的onError回调函数。
function(message) {
// 显示有用信息
}
参数：message：设备本地代码提供的错误信息。（字符串类型）
cameraOptions：
定制摄像头设置的可选参数。
{
quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType : Camera.EncodingType.JPEG,
targetWidth : 100,
targetHeight : 100
};
quality：存储图像的质量，范围是[0,100]。（数字类型）
destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。（数字类型）
备注：强烈建议将“Camera.destinationType”设为FILE_URI。
sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型）
allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型）
EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型）
targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。（数字类型）
targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。（数字类型）
MediaType：设置选择图片的类型，只有当PictureSourceType is PHOTOLIBRARY or SAVEDPHOTOALBUM时才会生效，该参数由nagivator.camera.MediaType (数字类型)定义。
Cordova入门系列（三）Cordova插件调用 转发 https://www.cnblogs.com/lishuxue/p/6018416.html的更多相关文章
- Cordova入门系列（二）分析第一个helloworld项目 转发 https://www.cnblogs.com/lishuxue/p/6015420.html
Cordova入门系列(二)分析第一个helloworld项目 版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的 ...
- Cordova入门系列（一）创建项目 转发 https://www.cnblogs.com/lishuxue/p/6008678.html
版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...
- Cordova入门系列（四）自定义Cordova插件--showToast
前三篇Cordova入门系列,简单讲解了Cordova,以及如何调用Cordova插件,今天我们讲解一下如何自己做一个插件. 自定义插件,就是自己写一些安卓java代码,然后和js代码以及配置文件,封 ...
- C# 互操作性入门系列(三)：平台调用中的数据封送处理
好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...
- [转]C# 互操作性入门系列(三)：平台调用中的数据封送处理
参考网址:https://www.cnblogs.com/FongLuo/p/4512738.html C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列( ...
- mybatis入门系列三之类型转换器
mybatis入门系列三之类型转换器 类型转换器介绍 mybatis作为一个ORM框架,要求java中的对象与数据库中的表记录应该对应 因此java类名-数据库表名,java类属性名-数据库表字段名, ...
- Cordova入门系列（三）Cordova插件调用
版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件, ...
- ActiveMQ入门系列三：发布/订阅模式
在上一篇<ActiveMQ入门系列二:入门代码实例(点对点模式)>中提到了ActiveMQ中的两种模式:点对点模式(PTP)和发布/订阅模式(Pub & Sub),详细介绍了点对点 ...
- Cordova入门系列（二）分析第一个helloworld项目
版权声明:本文为博主原创文章,转载请注明出处 上一章我们介绍了如何创建一个cordova android项目,这章我们介绍一下创建的那个helloworld项目的代码,分析其运行. MainActiv ...
随机推荐
- 数据库 【redis】 命令大全
以下纯属搬砖,我用Python抓取的redis命令列表页内容 如果想看命令的具体使用可查去官网查看,以下整理为个人查找方便而已 地理位置GEOADD 将指定的地理空间位置(纬度.经度.名称)添加到指定 ...
- SpringBoot2.0之七 实现页面和后台代码的热部署
开发过程中我可能经常会因为修改一点点代码就需要重启项目而烦恼,这样不仅很繁琐,还会因为不断重启浪费大量的时间,无法提高工作效率.可是现在SpringBoot为我们提供了非常简单的方式让我们实现热部署. ...
- JAVA之enum类详解
目录 一.简介 二.默认枚举类 三.多值枚举类 四.属性和方法 五.构造函数 六.重要方法 七.引用参考 一.简介 1.枚举类代表一组常量: 2. ...
- 网络协议 3 - 从物理层到 MAC 层
在上一篇博文中,我们见证了 IP 地址的诞生,机器一旦有了 IP,就可以在网络的环境里和其他的机器展开沟通了. 今天,我们来认识下 物理层 和 MAC 层. 日常生活中,身为 ...
- Maven常用命令：
Maven库: http://repo2.maven.org/maven2/ Maven依赖查询: http://mvnrepository.com/ 一,Maven常用命令: 1. 创建Maven的 ...
- ubuntu上配置nginx实现反向代理
反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...
- 解读经典《C#高级编程》继承 页107-113.章4
前言 本章节开始讲接口. 接口 接口的声明很像抽象类,有方法的声明但无方法体.但它比抽象类限制更多.和类比起来,接口的定义有众多限制. 接口只能包含声明,而无方法体 接口只能包含方法.属性.索引器.事 ...
- 从零开始学安全(四十六)●sqli-labs 1-4关 涉及的知识点
Less-1 到Less-4 基础知识注入 我们可以在 http://127.0.0.1/sqllib/Less-1/?id=1 后面直接添加一个 ‘ ,来看一下效果: 从上述错误当中,我们可以看到 ...
- FreeMarker js 获取后台设置的request、session
使用Request里的Attribute值最简单的方法就是直接${AttributeName}或者安全一点:${AttributeName!"default Value"} 1.取 ...
- Java学习点滴——Class和反射
基于<Java编程思想>第四版 前言 我们要操作一个类实例对象时,一般都要先知道这个类有哪些方法或者成员变量.反射就是在我们不知道这个类有哪些方法或成员变量时,使用特定方式得到类的这些信息 ...