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 (数字类型)定义

转载于:https://www.cnblogs.com/Free-Thinker/p/10769079.html

Cordova入门系列（三）Cordova插件调用相关推荐

Cordova入门系列（三）Cordova插件调用转发 https://www.cnblogs.com/lishuxue/p/6018416.html...
Cordova入门系列(三)Cordova插件调用版权声明:本文为博主原创文章,转载请注明出处上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容 ...
机器学习入门系列三（关键词：逻辑回归，正则化）
机器学习入门系列三(关键词:逻辑回归,正则化) 目录(?)[+] 一逻辑回归逻辑回归假设表示决策边界代价函数其他优化方法多元分类二正则化一.逻辑回归 1.逻辑回归什么是逻辑回归问题, ...
Reflex WMS入门系列三十二：导出到Excel
Reflex WMS入门系列三十二:导出到Excel 如同SAP系统的风格 --- 凡是有list的界面,都能导出到Excel ---, Reflex WMS系统也提供了类似的功能.几乎在任何的Lis ...
小猪的C语言快速入门系列(三)
小猪的C语言快速入门系列(三) 标签: C语言本节引言: 在上一节中,对C语言的基本语法进行了学习,类比成学英语的话,我们现在只是会单词而已,组成一个个句子还需要学习一些语法,本节学习的就是两对 ...
零基础数据挖掘入门系列(三) - 数据清洗和转换技巧
思维导图:零基础入门数据挖掘的学习路径 1. 写在前面零基础入门数据挖掘是记录自己在Datawhale举办的数据挖掘专题学习中的所学和所想, 该系列笔记使用理论结合实践的方式,整理数据挖掘相关知识, ...
sumo添加车辆_SUMO仿真快速入门系列三：产生车辆移动模型
在<SUMO快速入门系列二>中,我们已经产生了一个较为简单的街道地图模型. 本节中我们产生车辆移动模型并与道路模型结合,使得车辆在真实道路中跑起来.在SUMO中,车辆移动模型称为Deman ...
SUMO仿真快速入门系列三：产生车辆移动模型
在<SUMO快速入门系列二>中,我们已经产生了一个较为简单的街道地图模型. 本节中我们产生车辆移动模型并与道路模型结合,使得车辆在真实道路中跑起来.在SUMO中,车辆移动模型称为Deman ...
etcd入门系列三：身份验证访问控制
etcd入门系列一. etcd在docker中的安装与使用二. etcd 开启 https 1. 简介 etcd 默认是没有开启访问控制的,如果我们开启外网访问的话就需要考虑访问控制的问题,etc ...
Cordova入门系列（一）创建项目
版权声明:本文为博主原创文章,转载请注明出处 Cordova是什么? 初学Cordova的人,虽然了解一点点,知道Cordova是用来将html, css, js变成app的,但并不知道到底是怎么用的 ...

Cordova入门系列（三）Cordova插件调用

Cordova入门系列（三）Cordova插件调用相关推荐

最新文章

热门文章